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 11

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

LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Hamza Atig

1 year ago

1.7k
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k
Clean Component Sharing Hub (Landing State)
A minimalist, "before-talking" landing screen designed for a code or design component sharing platform. Features a welcoming header, three distinct action cards for sharing/browsing/exporting code, and a floating input bar, all styled with soft shadows and ample white space mimicking modern design tools.

Omer fils ELENGA

2 weeks ago

5
Two-Factor Authentication

JUGENDRA GANGWAR

3 weeks ago

22
Card KPI
Targetas

Raul antonio de la cruz hernandez

11 months ago

1k
Fake Medicine Detector
Fake Medicine Detector

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.1k
Irish Destination
For Irish road signs Destination

Allynn Alvarico

6 months ago

311
products, show, items
display images, card, products

Rushikesh Latpate

9 months ago

850
Health Tracker - Diet Calorie Management App
Health Tracker - Diet Calorie Management App

Tanvir Hasan Bappy (Tanvir)

9 months ago

610
Order Management Data Table
A responsive order management table built with Tailwind CSS and DataTables. It includes a navigation bar, sortable data table, order progress indicators, file upload controls, and a footer. The component is suitable for admin dashboards, production workflows, and project tracking interfaces. Tags: Table, Data Table, Dashboard, Admin Panel, File Upload, Progress Bar, Responsive, Tailwind CSS

Alla Telegina

1 month ago

53
Pricing Plans

ariaw

1 year ago

634
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Muhammad Umair Arshad

1 year ago

1.7k