Create Simple Floating Label Form in Tailwind CSS

In this section we will create simple floating label form using Tailwind CSS 3.

How to install & setup Tailwind CSS v3


1. Create simple floating lable form.

<div class="relative">
  <input type="name" id="name"
      class="w-full h-16 p-3 pt-4 placeholder-transparent border border-gray-200 rounded-md peer focus:outline-none focus:border-gray-500 focus:shadow-sm"
      placeholder="Name" autocomplete="off" />
  <label for="name"
      class="absolute top-0 left-0 h-full px-3 py-5 text-sm transition-all duration-100 ease-in-out origin-left transform scale-75 translate-x-1 -translate-y-3 opacity-75 pointer-events-none peer-placeholder-shown:opacity-100 peer-focus:opacity-75 peer-placeholder-shown:scale-100 peer-focus:scale-75 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-3 peer-placeholder-shown:translate-x-0 peer-focus:translate-x-1">Name</label>
</div>


2.Single border floating lable form.

<div class="relative">
  <input id="name" name="name" type="text"
      class="w-full h-10 text-gray-900 placeholder-transparent border-b-2 border-gray-300 peer focus:outline-none focus:border-purple-600"
      placeholder="Name" />
  <label for="name"
      class="absolute left-0 -top-3.5 text-gray-600 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm">Name
      </label>
</div>
tailwind css border floating lable

tailwind css border floating lable

3. Tailwind CSS Login Page floating lable

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Create Simple Floating Label Login Page</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>

    <body>
        <div class="relative flex flex-col justify-center min-h-screen overflow-hidden">
            <div
                class="w-full p-6 m-auto bg-white rounded-md shadow-md border-top lg:max-w-md">
                <h1 class="text-3xl font-semibold text-center text-purple-700">Floating Label</h1>
                <form class="mt-6">
                    <div class="relative mb-8">
                        <input id="email" name="email" type="text"
                            class="w-full h-10 text-gray-900 placeholder-transparent border-b-2 border-gray-300 peer focus:outline-none focus:border-purple-600"
                            placeholder="[email protected]" />
                        <label for="email"
                            class="absolute left-0 -top-3.5 text-gray-600 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm">Email
                            address</label>
                    </div>
                    <div class="relative mb-4">
                        <input id="password" name="password" type="password"
                            class="w-full h-10 text-gray-900 placeholder-transparent border-b-2 border-gray-300 peer focus:outline-none focus:border-purple-600"
                            placeholder="[email protected]" />
                        <label for="Password"
                            class="absolute left-0 -top-3.5 text-gray-600 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-sm">
                            Password</label>
                    </div>
                    <a href="#" class="text-xs text-gray-600 hover:underline">Forget Password?</a>
                    <div class="mt-6">
                        <button
                            class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600">
                            Login
                        </button>
                    </div>
                </form>
                <p class="mt-8 text-xs font-light text-center text-gray-700"> Don't have an account? <a href="#"
                        class="font-medium text-purple-600 hover:underline">Sign up</a></p>

            </div>

    </body>

</html>
tailwind login page with floating lable

tailwind login page with floating lable



Tags: