record

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

Other

Author Anonymous

Tailwind v3.4 5

Fork Fullscreen

//medical record
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">

<div class="flex items-center justify-between px-6 py-4 border-b">

<div>
        <h2 class="text-xl font-semibold text-gray-800">
          Add Medical Record
        </h2>

<p class="text-sm text-gray-500 mt-1">
          Add medical record for this appointment
        </p>
      </div>

<button
        type="button"
        (click)="onClose()"
        class="text-2xl text-gray-500 hover:text-gray-800">
        &times;
      </button>

</div>

<form
      [formGroup]="medicalRecordForm"
      (ngSubmit)="onSubmit()"
      class="p-6">

<div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-1">
          Patient
        </label>

<div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-1">
          Doctor
        </label>

<div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-1">
          Appointment Date
        </label>

<div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-1">
          Record Type
        </label>

<option value="">
            Select Record Type
          </option>

<option value="Consultation">
            Consultation
          </option>

<option value="Diagnosis">
            Diagnosis
          </option>

<option value="Follow-up">
            Follow-up
          </option>

<option value="General">
            General
          </option>

</select>
      </div>

<div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-1">
          Diagnosis
        </label>

<div class="mb-6">
        <label class="block text-sm font-medium text-gray-700 mb-1">
          Description
        </label>

<div class="flex justify-end gap-3 pt-4 border-t">

<button
          type="button"
          (click)="onClose()"
          class="px-4 py-2 border border-gray-300 rounded-md
                 text-gray-700 hover:bg-gray-100">
          Cancel
        </button>

<button
          type="submit"
          class="px-5 py-2 bg-blue-600 text-white rounded-md
                 hover:bg-blue-700">
          Save Medical Record
        </button>

</div>

</form>

</div>

</div>
```

Related Examples

Maintenance page

Faye

1 year ago

2.7k
Image - Figure with figcaption design

Maxim

1 year ago

1.4k
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
Cafee shop
help to buy something that can help you to relax

INGRIDE MUZIRANENGE

1 year ago

1.6k
Verify OTP
verification code

gidy

1 year ago

1.3k
Order History
Order History

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.6k
Invoice Generator
Invoice Generator

Tanvir Hasan Bappy (Tanvir)

9 months ago

466
templete
templete

Uwera Dorcas

1 year ago

1.2k
Recipe Card
beautiful recipe component with image and step-by-step instructions

Anonymous

3 years ago

8.1k
Responsive Login & Support Form
A responsive login page for an order and production management system. It features a branded navigation bar, username and password fields, a clear sign-in action, and a built-in support message form with attachment and emoji controls. Built with Tailwind CSS and Flowbite, the layout adapts smoothly to desktop and mobile screens. Tags: Login Form, Authentication, Contact Form, Support Form, Responsive, Navbar, Footer, Tailwind CSS, Flowbite, Admin Panel

Alla Telegina

4 weeks ago

124
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

KULDEEP

1 year ago

1.7k
Pricing Plans

ariaw

1 year ago

632