yvette

is good

This tailwind example is contributed by Umutoniwase Yvette, on 24-May-2025. Component is made with Tailwind v3.4. It is responsive.

Header

Author Umutoniwase Yvette

Tailwind v3.4 1.3k 8

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login Form</title>
  <link rel="stylesheet" href="style.css">
<style>
  body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-container {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 300px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

label {
  display: block;
  margin-top: 10px;
}

input {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>
</head>
<body>
  <div class="login-container">
    <h2>Login</h2>
    <form action="#" method="POST">
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>

<label for="password">Password</label>
      <input type="password" id="password" name="password" required>

Related Examples

Promotional sticky top section

Leon Bachmann

3 years ago

13.3k
Ecommerce Navbar with products, Expanding Search & Mobile sidebar filter
luxury ecommerce navigation bar crafted with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

2 months ago

190
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.4k
Navbar
E-commerce Navbar

Aman kumar

2 years ago

5.6k
Animated Title
App Logo or Main Title

khalidrootdevs

2 years ago

7.6k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

AKASH GANDHAR

2 years ago

2.8k
MyWebsite
Create a professional website for free with the Website.com website builder. Domain names, web hosting, website templates, and ecommerce solutions included.

Augustin

1 year ago

1.1k
Header with logo, menu and buttons
Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

Mike Varen

2 years ago

4.8k
Fashion Landing Page with Hero Slider, GSAP Animations
fashion/eCommerce landing page built using HTML, CSS, GSAP, Swiper.js, and Lenis Smooth Scroll.

JUGENDRA GANGWAR

2 months ago

269
Modern Retail Analytics Dashboard UI with Interactive Charts
Dashboard built with HTML, Tailwind CSS, and vanilla JavaScript.

JUGENDRA GANGWAR

2 months ago

258
Home page
Home page для ПО, страница для входа в приложение.

Alla Telegina

1 year ago

1.8k