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 22

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

Card post blog
Targetas para blog

Raul antonio de la cruz hernandez

11 months ago

709
Forgot password?
you can change password an time

gidy

1 year ago

1.1k
Apple Dock Navigation Bar

Cristian

1 year ago

3.2k
The Life of a Singularity
The Life of a Singularity is the story of one powerful idea evolving into endless possibilities. It symbolizes innovation, intelligence, and the continuous pursuit of creating smarter, faster, and more connected experiences.

Lokesh H

4 months ago

112
Active Beauty Main Page

Maxim

1 year ago

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

Abhiraj

1 year ago

3k
Hero

Anonymous

1 month ago

30
Share button

Maxim

1 year ago

2.2k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Ahita Bisma Adlula

1 year ago

4.3k
About Us Component

KULDEEP

1 year ago

2.1k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
Elegant Dock
Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

Nick Girga

1 year ago

1.4k