login

This tailwind example is contributed by Abhishek Kumar, on 20-Sep-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Abhishek Kumar

709

Fork Fullscreen

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative py-20 lg:py-10 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 xl:items-center">
        <div class="w-full lg:w-1/2 xl:w-3/5 px-4 order-last lg:order-first">
          <div class="relative max-w-xl mx-auto lg:mx-0 lg:max-w-3xl h-full">
            <img class="block w-full h-166 lg:h-full object-cover rounded-3xl" src="https://media.istockphoto.com/id/1479454259/vector/background-with-drawings-drawn-in-chalk-on-a-school-blackboard-back-to-school-poster-with.jpg?s=612x612&w=0&k=20&c=7kPuwoPlOrfk7bxS0cc8qqCNrarI4rONLq6WHDwPDZo=" alt=""/>
            <div class="absolute bottom-0 w-full left-0 p-4 sm:p-6">
              <div class="p-6 sm:p-10 backdrop-blur-md backdrop-filter 
              bg-black/35   rounded-4xl">
                <div class="overflow-hidden">
                  <div class="flex transition-transform duration-500 ease-in-out -m-5" >
                    <div x-ref="slide1" class="flex-shrink-0 h-full w-full p-5">
                      <h5 class="text-3xl text-white font-semibold mb-2">About PSIT</h5>
                      <span class="block text-sm text-white font-semibold mb-6">Pranveer Singh Institute of Technology</span>
                      <p class="max-w-xl text-2xl text-white font-semibold mb-15">founded in 2004, stands today as a beacon of academic excellence, celebrating 20 transformative years of empowering minds and shaping futures.</p>
                    </div>
                    <div x-ref="slide2" class="flex-shrink-0 h-full w-full p-5">
                      <h5 class="text-3xl text-white font-semibold mb-2">Kristin Watson</h5>
                      <span class="block text-sm text-white font-semibold mb-6">Medical Assistant</span>
                      <p class="max-w-xl text-2xl text-white font-semibold mb-15">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna."</p>
                    </div>
                    <div x-ref="slide3" class="flex-shrink-0 h-full w-full p-5">
                      <h5 class="text-3xl text-white font-semibold mb-2">Darrell Steward</h5>
                      <span class="block text-sm text-white font-semibold mb-6">Marketing Coordinator</span>
                      <p class="max-w-xl text-2xl text-white font-semibold mb-15">"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
                    </div>
                  </div>
                </div>
                <div>
                  <button x-on:click="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" :class="{'bg-blue-900': activeSlide === 0, 'bg-white hover:bg-blue-100': activeSlide !== 0 }" class="inline-block mr-2 h-1 w-5 bg-blue-900 rounded-full cursor-pointer"></button>
                  <button x-on:click="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" :class="{'bg-blue-900': activeSlide === 1, 'bg-white hover:bg-blue-100': activeSlide !== 1 }" class="inline-block mr-2 h-1 w-5 bg-white hover:bg-blue-100 rounded-full cursor-pointer"></button>
                  <button x-on:click="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" :class="{'bg-blue-900': activeSlide === 2, 'bg-white hover:bg-blue-100': activeSlide !== 2 }" class="inline-block h-1 w-5 bg-white hover:bg-blue-100 rounded-full cursor-pointer"></button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 xl:w-2/5 px-4 mb-16 lg:mb-0">
          <div class="max-w-md lg:py-20 mx-auto lg:mr-0">
            <h3 class="font-heading text-4xl text-gray-900 font-semibold mb-4">Sign in to your account</h3>
            <p class="text-lg text-gray-500 mb-10">Greetings on your return! We kindly request you to enter your details.</p>
            <div class="flex flex-wrap mb-6 items-center -mx-2">
              <div class="w-full md:w-1/2 px-2 mb-3 md:mb-0">
                <a class="inline-flex w-full py-3 px-4 items-center justify-center rounded-full border border-gray-200 hover:border-gray-400 transition duration-100" href="#">
                  <img src="saturn-assets/images/sign-up/icon-facebook.svg" alt=""/>
                  <span class="ml-4 text-sm font-semibold text-gray-500">Login with Facebook</span>
                </a>
              </div>
              <div class="w-full md:w-1/2 px-2">
                <a class="inline-flex w-full py-3 px-4 items-center justify-center rounded-full border border-gray-200 hover:border-gray-400 transition duration-100" href="#">
                  <img src="saturn-assets/images/sign-up/icon-apple.svg" alt=""/>
                  <span class="ml-4 text-sm font-semibold text-gray-500">Login with Apple</span>
                </a>
              </div>
            </div>
            <div class="flex mb-6 items-center">
              <div class="w-full h-px bg-gray-300"></div>
              <span class="mx-4 text-sm font-semibold text-gray-500">Or</span>
              <div class="w-full h-px bg-gray-300"></div>
            </div>
            <form action="">
              <div class="mb-6">
                <label class="block mb-1.5 text-sm text-gray-900 font-semibold" for="">Email</label>
                <input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="email" placeholder="pat@saturn.dev"/>
              </div>
              <div class="mb-7">
                <div class="flex mb-1.5 items-center justify-between">
                  <label class="block text-sm text-gray-900 font-semibold" for="">Password</label>
                  <a class="inline-block text-xs font-semibold text-orange-900 hover:text-gray-900" href="#">Forget password?</a>
                </div>
                <div class="relative">
                  <input class="w-full py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="password" placeholder="Enter your password"/>
                  <button class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 inline-block hover:scale-110 transition duration-100">
                    <img src="saturn-assets/images/sign-up/icon-eye.svg" alt=""/>
                  </button>
                </div>
              </div>
              <div class="flex mb-6 items-center">
                <input type="checkbox" value="" id=""/>
                <label class="ml-2 text-xs text-gray-800" for="">Remember for 30 days</label>
              </div>
              <button class="relative group block w-full mb-6 py-3 px-5 text-center text-sm font-semibold text-orange-50 bg-orange-900 rounded-full overflow-hidden" type="submit">
                <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                <span class="relative">Login</span>
              </button>
              <span class="text-xs font-semibold text-gray-900">
                <span>Don’t have an account?</span>
                <a class="ml-1 inline-block text-orange-900 hover:text-orange-700" href="#">Sign up</a>
              </span>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Login Form - Agendamiento

Author:
Jhonatan Llamuca

1 year ago

1.4k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

1 year ago

2.7k
login page
modern login form by salvator

Author:
Baraka Salvator

9 months ago

615
login page

Author:
Abid Ullah

1 year ago

2.4k
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

2 years ago

8.1k
Full page login page

Author:
Anonymous

1 year ago

3k
Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

Author:
shrenik khule

1 month ago

69
Responsive registration form
form with social login buttons

Author:
Sophia Baker

3 years ago

44.9k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

1 year ago

4.3k
login page
login page

Author:
Tofayel Islam

2 months ago

234
Instagram Login Clone
login form and signup

Author:
gidy

9 months ago

516
Login Page Transition

Author:
Fatwa Bawahsi

11 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components