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

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

Author:
Gopi Yadav

2 years ago

10.7k
Register Form
This is a simple Register Form component with dark mode supported and mobile responsive

Author:
Shariar Hasan

1 year ago

3.2k
Sign in form

Author:
Simon Scheffer

2 years ago

15.7k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
Anonymous

5 months ago

455
Login page

Author:
Reuben Enahoro

9 months ago

1.6k
Travel Guru - User Login Page
A clean and responsive login page designed with TailwindCSS for the Travel Guru platform. This component provides users with a secure and simple way to sign in using their username or email and password, with additional options for remembering login credentials and password recovery. It also supports social logins via Facebook and Google for a faster authentication experience. The design focuses on a minimal and modern user interface with clear call-to-actions and seamless user flow.

Author:
SHARIFUL ISLAM

6 months ago

740
Instagram Login Clone
login form and signup

Author:
gidy

3 months ago

348
Login page
Login and register page, you can reuse both

Author:
Abhiraj

7 months ago

1.4k
login form
You can use this login when you want to log in to a specific website such as Facebook, Instagram, etc.

Author:
Nishimwe Jeanine

3 months ago

362
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

9.4k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

4 months ago

291
Simple Login Form
Username and Password inputs with Login button. Very simple. You might like it.

Author:
Jerome Soriano

11 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components