Tailwind align element to bottom of parent - css

Question

I've been trying to build this UI for almost a day.
I'm just stuck with not getting the middle div in the center of the screen and the last Copyright div align to the bottom of the screen. I'm a mobile dev first, just started out styling on web. This is what I've managed to build so far, ignore rest of the UI, I can do that part. Here's the sandbox for my code as well : https://codesandbox.io/s/tailwind-css-and-react-forked-v9c22d?file=/src/App.js:140-2801
<div className="bg-background-light dark:bg-background-dark h-screen w-full">
<div>
<img
src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a"
className="h-24 w-24 mt-9 ml-9"
/>
<div className="flex justify-center items-center h-fit">
<div className="flex flex-col items-start">
<div className="text-4xl text-black">Admin Dashboard</div>
<div className="text-login-subtitle-light dark:text-login-subtitle-dark mt-6">
Enter your email and password to sign in
</div>
<label className="dark:text-white text-text-color-primary-light mt-6">
Email
</label>
<input
placeholder="Email"
className="w-full rounded font-thin px-5 py-3 mt-4"
autoFocus
type="email"
required
/>
<label className="dark:text-white text-text-color-primary-light mt-6">
Password
</label>
<input
placeholder="Password"
id="password"
className="w-full rounded font-thin px-5 py-3 mt-4"
autoFocus
type="password"
required
/>
<label
for="default-toggle"
class="inline-flex relative items-center cursor-pointer"
>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 mb-5"></div>
<input
type="checkbox"
value=""
id="red-toggle"
class="sr-only peer"
checked
/>
<span class="ml-3 text-sm font-medium text-text-color-primary-light dark:text-white mb-5">
Remember me
</span>
</label>
<button
className="text-white bg-red-900 h-16 rounded-xl w-full text-xl"
type="submit"
>
Sign In
</button>
<div className="text-black dark:text-white">
© Example Technologies Pvt. Ltd.
</div>
</div>
</div>
</div>
</div>
Problem highlight, as you can see the second div starts as soon as the image ends
After adding your code and when I scroll, so when we add a bottom padding to the copyright view, it creates a white bg when I open the console, is this the expected behaviour?

Answer 1

You need to set the logo and the copyright absolute. The copyright can you stick to the bottom and left and right side with bottom-0 left-0 right-0, and center the text with text-center.
Then, you need to add flex to the parent div, and then m-auto to the div with the fields. This will center the div horizontal and vertical on the page (in the main div). I also set a background on it so you can see the div, but that is not necessary of cause.
Here is the code:
import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";
export default function App() {
return (
<div className="relative flex bg-background-light dark:bg-background-dark h-screen w-full">
<img
src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a"
className="absolute h-24 w-24 mt-9 ml-9"
/>
<div className="m-auto bg-gray-500 rounded-lg p-8">
<div className="flex justify-center items-center h-fit">
<div className="flex flex-col items-start">
<div className="text-4xl text-black">Admin Dashboard</div>
<div className="text-login-subtitle-light dark:text-login-subtitle-dark mt-6">
Enter your email and password to sign in
</div>
<label className="dark:text-white text-text-color-primary-light mt-6">
Email
</label>
<input
placeholder="Email"
className="w-full rounded font-thin px-5 py-3 mt-4"
autoFocus
type="email"
required
/>
<label className="dark:text-white text-text-color-primary-light mt-6">
Password
</label>
<input
placeholder="Password"
id="password"
className="w-full rounded font-thin px-5 py-3 mt-4"
autoFocus
type="password"
required
/>
<label
for="default-toggle"
class="inline-flex relative items-center cursor-pointer"
>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 mb-5"></div>
<input
type="checkbox"
value=""
id="red-toggle"
class="sr-only peer"
checked
/>
<span class="ml-3 text-sm font-medium text-text-color-primary-light dark:text-white mb-5">
Remember me
</span>
</label>
<button
className="text-white bg-red-900 h-16 rounded-xl w-full text-xl"
type="submit"
>
Sign In
</button>
</div>
</div>
</div>
<div className="absolute bottom-0 left-0 right-0 text-center text-black dark:text-white">
© Example Technologies Pvt. Ltd.
</div>
</div>
);
}