image

Animated Login Form

TailwindCSS Login Form

Animated login form using TailwindCSS framework.

HTML/TailwindCSS
<body class="bg-yellow-100 overflow-x-hidden lg:overflow-x-auto lg:overflow-hidden flex items-center justify-center lg:h-screen">
  <!-- remove flex classes from body tag to remove the horizontal and vertical position -->

  <div class="login-container container w-full lg:w-4/5 lg:bg-white h-screen lg:h-screen-75 lg:border border-gray-300 rounded-lg flex flex-wrap lg:flex-nowrap flex-col lg:flex-row justify-between group">

    <!-- product Side -->
    <div class="w-full lg:w-1/2 h-28 lg:h-full mt-32 lg:mt-0 lg:bg-theme-yellow-dark flex relative order-2 lg:order-1">

      <div class="text-center hidden lg:flex items-center justify-start h-full w-full select-none">

        <span class="transform block whitespace-nowrap h-full -rotate-90 text-[55px] 2xl:text-[70px] font-black uppercase text-yellow-300 opacity-0 transition-all group-hover:opacity-100 ml-10 2xl:ml-12 group-hover:-ml-20 2xl:group-hover:ml-26 lg:group-hover:ml-20 duration-1000 lg:duration-700 ease-in-out">Learn With Aamir</span>

      </div>
      <!-- product text -->

      <div class="product absolute right-0 bottom-0 flex items-center lg:justify-center w-full opacity-50 lg:opacity-100">

        <img src="./images/1.png" alt="product" class="-mb-5 lg:mb-0 -ml-12 lg:ml-0 product h-[500px] xl:h-[700px] 2xl:h-[900px] w-auto object-cover transform group-hover:translate-x-26 2xl:group-hover:translate-x-48 transition-all duration-1000 lg:duration-700 ease-in-out">
        <!-- product image -->

        <div class="shadow w-full h-5 bg-black bg-opacity-25 filter blur absolute bottom-0 lg:bottom-14 left-0 lg:left-24 rounded-full transform skew-x-10"></div>
        <!-- product shadow -->
      </div>

      <div class="hidden lg:block w-1/3 bg-white ml-auto"></div>

    </div>
    <!-- Product Side End-->

    <!-- Login Form -->
    <div class="w-full lg:w-1/2 order-1 lg:order-2">
      <div class="form-wrapper flex items-center lg:h-full px-10 relative z-10 pt-16 lg:pt-0">
        <div class="w-full space-y-5">

          <div class="form-caption flex items-end justify-center text-center space-x-3 mb-20">
            <span class="text-3xl font-semibold text-gray-700">Login</span>
            <span class="text-base text-gray-800">Form</span>
          </div>
          <!-- form caption -->

          <div class="form-element">
            <label class="space-y-2 w-full lg:w-4/5 block mx-auto">
              <span class="block text-lg text-gray-800 tracking-wide">Email</span>
              <span class="block">
                <input type="text" class="bg-yellow-100 lg:bg-white border lg:border-2 border-gray-400 lg:border-gray-200 w-full p-3 focus:outline-none active:outline-none focus:border-gray-400 active:border-gray-400">
              </span>
            </label>
          </div>
          <!-- form element -->


          <div class="form-element">
            <label class="space-y-2 w-full lg:w-4/5 block mx-auto">
              <span class="block text-lg text-gray-800 tracking-wide">Password</span>
              <span class="block">
                <input type="password" class="bg-yellow-100 lg:bg-white border lg:border-2 border-gray-400 lg:border-gray-200 w-full p-3 focus:outline-none active:outline-none focus:border-gray-400 active:border-gray-400">
              </span>
            </label>
          </div>
          <!-- form element -->

          <div class="form-element">
            <div class="w-full lg:w-4/5 block mx-auto flex items-center justify-between">
              <label class="block text-gray-800 tracking-wide flex items-center space-x-2 select-none">
                <input type="checkbox" name="" id="">
                <span class="block text-gray-800 tracking-wide">Remember me</span>
              </label>
              <a href="#" class="block text-gray-800 tracking-wide inline-block border-b border-gray-300">Forgot Password?</a>
            </div>
          </div>
          <!-- form element -->

          <div class="form-element">
            <span class="w-full lg:w-4/5 block mx-auto ">
              <input type="submit" class="cursor-pointer border-2 border-yellow-200 w-full p-3 bg-yellow-200 focus:outline-none active:outline-none focus:bg-theme-yellow active:bg-theme-yellow hover:bg-theme-yellow transition-all">
            </span>
          </div>
          <!-- form element -->

        </div>
      </div>
      <!-- form wrapper -->
    </div>
    <!-- Login Form End-->


  </div>

  <script src="./js/script.js"></script>
</body>
Tailwind.config.js
module.exports = {
  mode: "jit",
  purge: [
    './index.html',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        "theme-yellow": '#ffc727',
        "theme-yellow-dark": '#e6b323',
        "theme-dark": '#37474f',
      },
      height: {
        'screen-75': '90vh',
        'screen-50': '50vh'
      },
      fontFamily: {
        'main': ['"Open Sans"']
      }
    },
  },
  variants: {
    extend: {
      scale: ['active', 'group-hover'],
    },
  },
  plugins: [],
}

Note: The image you can download from my GitHub repo. You will find it on the top right of this page.

Technologies


Features Animated , login form , responsive
Type UI Components
Date Created September 21, 2021
Last Updated 11, Feb 2021
Licence MIT
envelope
Subscribe to our newsletter to receive weekly design freebies!

We want your email to send the free themes, templates, and beautiful UI components every week. you will be the first to hear about new uploads NO SPAM.

2 x 4 =
Answer to the quesiton to submit