Tailwind align element to bottom of parent

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>
  );
}