login

html , css

This tailwind example is contributed by Hacker Development, on 08-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are loading, loader,Register, Sign in,Front page

Input Spinner / Loading Login Form Landing Page

Author Hacker Development

Fork Fullscreen

<div class="flex h-screen bg-indigo-700">
  <div class="w-full max-w-xs m-auto bg-indigo-100 rounded p-5">
    <header>
      <img class="w-20 mx-auto mb-5" src="https://img.icons8.com/fluent/344/year-of-tiger.png" />
    </header>
    <form>
      <div>
        <label class="block mb-2 text-indigo-500" for="username">Username</label>
        <input class="w-full p-2 mb-6 text-indigo-700 border-b-2 border-indigo-500 outline-none focus:bg-gray-300" type="text" name="username" placeholder="write your username?">
      </div>
      <div>
        <label class="block mb-2 text-indigo-500" for="password">Password</label>
        <input class="w-full p-2 mb-6 text-indigo-700 border-b-2 border-indigo-500 outline-none focus:bg-gray-300" type="password" name="password" placeholder="write your Password?">
      </div>
      <div>
        <input class="w-full bg-indigo-700 hover:bg-pink-700 text-white font-bold py-2 px-4 mb-6 rounded" type="submit">
      </div>
    </form>
    <footer>
      <a class="text-indigo-700 hover:text-pink-700 text-sm float-left" href="#">Forgot Password?</a>
      <a class="text-indigo-700 hover:text-pink-700 text-sm float-right" href="#">Create Account</a>
    </footer>
  </div>
</div>

Related Examples

Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

4 months ago

1.2k
Forgot password?
you can change password an time

Author:
gidy

3 days ago

4
Matha ghurainna Ball
Tailwind Spinner

Author:
khalidrootdevs

1 year ago

5.2k
Spinner

Author:
Sienna

2 years ago

10.3k
Product Form - Reverie

Author:
S V

3 weeks ago

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

Author:
Anonymous

2 months ago

68
Login Page Transition

Author:
Fatwa Bawahsi

1 month ago

385
Login/Register Form with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.4k
Home
html , css

Author:
Hacker Development

3 weeks ago

41
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

6 months ago

1.2k
Loding spinner with image inside

Author:
JaxStone

2 years ago

15.1k
Colored checkboxes
use custom accent color according to your design

Author:
Pixel Perfect

1 year ago

4.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components