component1

this is for demo

This tailwind example is contributed by Anonymous, on 26-Sep-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Anonymous

Tailwind v3.4 146

Fork Fullscreen

<main id="content" role="main" class="w-full  max-w-md mx-auto p-6">
    <div class="mt-7 bg-white  rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700 border-2 border-indigo-300">
      <div class="p-4 sm:p-7">
        <div class="text-center">
          <h1 class="block text-2xl font-bold text-gray-800 dark:text-white">Forgot password?</h1>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
            Remember your password?
            <a class="text-blue-600 decoration-2 hover:underline font-medium" href="#">
              Login here
            </a>
          </p>
        </div>

<div class="mt-5">
          <form>
            <div class="grid gap-y-4">
              <div>
                <label for="email" class="block text-sm font-bold ml-1 mb-2 dark:text-white">Email address</label>
                <div class="relative">
                  <input type="email" id="email" name="email" class="py-3 px-4 block w-full border-2 border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 shadow-sm" required aria-describedby="email-error">
                </div>
                <p class="hidden text-xs text-red-600 mt-2" id="email-error">Please include a valid email address so we can get back to you</p>
              </div>
              <button type="submit" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">Reset password</button>
            </div>
          </form>
        </div>
      </div>
    </div>

<p class="mt-3 flex justify-center items-center text-center divide-x divide-gray-300 dark:divide-gray-700">
      <a class="pr-3.5 inline-flex items-center gap-x-2 text-sm text-gray-600 decoration-2 hover:underline hover:text-blue-600 dark:text-gray-500 dark:hover:text-gray-200" href="#" target="_blank">
        <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
        </svg>
        View Github
      </a>
      <a class="pl-3 inline-flex items-center gap-x-2 text-sm text-gray-600 decoration-2 hover:underline hover:text-blue-600 dark:text-gray-500 dark:hover:text-gray-200" href="#">
        
        Contact us!
      </a>
    </p>
  </main>

<!-- builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.Converters.Add(
            new TimeOnlyJsonConverter());
    })
     .AddJsonOptions(options =>
     {
         options.JsonSerializerOptions.Converters.Add(
             new JsonStringEnumConverter());
     });

//api/converter
 public class TimeOnlyJsonConverter : JsonConverter<TimeOnly>
 {
     private const string Format = "HH:mm:ss";

public override TimeOnly Read(
         ref Utf8JsonReader reader,
         Type typeToConvert,
         JsonSerializerOptions options)
     {
         var value = reader.GetString();

if (string.IsNullOrWhiteSpace(value))
         {
             throw new JsonException("Time value cannot be empty.");
         }

if (TimeOnly.TryParseExact(
             value,
             Format,
             CultureInfo.InvariantCulture,
             DateTimeStyles.None,
             out var time))
         {
             return time;
         }

throw new JsonException(
             $"Invalid time format. Expected {Format}.");
     }

public override void Write(
         Utf8JsonWriter writer,
         TimeOnly value,
         JsonSerializerOptions options)
     {
         writer.WriteStringValue(
             value.ToString(Format, CultureInfo.InvariantCulture));
     }
 }

namespace MedicalClinicManagementSystem.Models
{
    public class DoctorAvailability
    {
        public int Id { get; set; }

public int DoctorId { get; set; }

public Doctor Doctor { get; set; } = null!;

public DayOfWeek DayOfWeek { get; set; }

public TimeOnly StartTime { get; set; }

public TimeOnly EndTime { get; set; }

public bool IsAvailable { get; set; }
    }
} -->

Related Examples

Creative Bento Gallery
A modern bento-style gallery combining differently sized image cards in a structured and visually engaging layout.

JUGENDRA GANGWAR

2 months ago

308
Ripple Animation
Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Tofayel Islam

9 months ago

793
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Ayyamperumal S

1 year ago

2.7k
tab5
table

Anonymous

3 weeks ago

27
Table Skeleton
Data table skeleton built with Tailwind CSS for admin dashboards and SaaS applications.

JUGENDRA GANGWAR

3 days ago

13
Fancy underline

Simon Scheffer

3 years ago

13.2k
Download App Buttons
Ready-to-use Apple App Store and Google Play Store download buttons with official branding and styling

Musawer Shah

11 months ago

856
default template

Anonymous

1 year ago

751
Glassmorphism form

Geoffrey Callaghan

2 years ago

7.5k
carte visa black

Omer fils ELENGA

4 months ago

269
Footer
Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

Abdul Jabbar Al Nahid

1 year ago

1.3k
Product cards
Product cards for eCommerce

ehmasuk

11 months ago

1.4k