login!!!!

html , css

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

Author Hacker Development

213

Fork Fullscreen

</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<div class="container py-5">
  <button  type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#loginModal">
      Open Login Modal
  </button>

<div class="modal fade" id="loginModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Welcome Back!</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form>
            <div class="mb-3">
              <label class="form-label">Email address</label>
              <div class="input-group">
                <input type="email" class="form-control" placeholder="name@example.com">
                <span class="input-group-text">
                    <i class="fas fa-envelope"></i>
                  </span>
              </div>
            </div>

<div class="mb-3">
              <label class="form-label">Password</label>
              <div class="input-group">
                <input type="password" class="form-control" placeholder="Enter your password">
                <span class="input-group-text password-toggle">
                    <i class="fas fa-eye"></i>
                  </span>
              </div>
            </div>

<div class="form-check">
              <div>
                <input type="checkbox" class="form-check-input" id="remember">
                <label class="form-check-label" for="remember">Remember me</label>
              </div>
              <a href="#" class="text-decoration-none">Forgot password?</a>
            </div>

<div class="divider">
              <span>or continue with</span>
            </div>

<div class="social-login">
              <button type="button" class="btn btn-social">
                  <i class="fab fa-google"></i>Google
                </button>
              <button type="button" class="btn btn-social">
                  <i class="fab fa-facebook-f"></i>Facebook
                </button>
            </div>

<div class="register-link">
              Don't have an account? <a href="#" class="text-decoration-none">Register now</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Login Form
Login Form With google icon

Author:
Md. Tofayel islam

5 months ago

1k
cards
html , css ,

Author:
Hacker Development

2 months ago

377
login
html , css

Author:
Hacker Development

2 months ago

87
Sign In page CezeriLab

Author:
Sedat Kumcu

8 months ago

1.1k
Login Card

Author:
Anonymous

1 year ago

2.7k
Portfolio Hero Section 5

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

3 months ago

1.1k
Login Form simple
Login form design

Author:
QQ-VVN

2 months ago

130
Responsive Registration Page
I created a responsive and visually appealing registration page using TailwindCSS and HTML5. This page features a gradient background, a modern card-style form, and clear input fields for username, email, password, and password confirmation. It includes client-side validation with real-time error messages to ensure all required fields are filled correctly and passwords match. This form is designed to provide a seamless user experience across all devices.

Author:
zobaidul kaziex

1 year ago

2.8k
Banner with Form

Author:
Aitrik Saha

5 months ago

716
Login
Login

Author:
Amine Ghanim

3 months ago

602
My Personal Landing page
This HTML document showcases Aydin Vesali Moghaddam's personal portfolio, highlighting his journey in web development. The page features a responsive design that adapts to various screen sizes, ensuring a seamless user experience across devices. It includes a personal introduction, a brief overview of Aydin's tech journey, and a contact form for visitors to subscribe to updates. Additionally, the page provides links to Aydin's Discord, website, and Twitter, offering multiple avenues for connecting and staying updated on his projects.

Author:
AyDin VM

1 year ago

5.3k
Login Form - Agendamiento

Author:
Jhonatan Llamuca

6 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components