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 164

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

free tailwind resume template
free tailwind resume template

Geoffrey Callaghan

2 years ago

4.8k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

KULDEEP

1 year ago

1.5k
Payment success page example

Anonymous

2 months ago

151
Responsive Multi-Step Registration Form with Progress Stepper

JUGENDRA GANGWAR

2 months ago

243
Services

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

1 year ago

2.6k
hello world
by salvator

Anonymous

1 year ago

1.2k
tab3
table

Anonymous

1 month ago

85
Apple Dock Navigation Bar

Cristian

1 year ago

3.2k
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Abhiraj

1 year ago

3k
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Walid Ahmad

2 years ago

1.9k
loginForm3
form

Anonymous

1 month ago

78
Stacked Checkboxes

kishan pc

2 years ago

3.9k