Tailwind align element to bottom of parent

Abhishek AN 0
Viewed 47

I've been trying to build this UI for almost a day. enter image description here

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 enter image description here

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? enter image description here

flexbox tailwind-css reactjs css
1 Answers

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