Prescription

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 8

Fork Fullscreen

//prescription form

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

<div>
        <h2 class="text-xl font-semibold text-gray-800">
          Issue Prescription
        </h2>

<p class="text-sm text-gray-500 mt-1">
          Add prescription 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]="prescriptionForm"
      (ngSubmit)="onSubmit()"
      class="p-6">

<div class="mb-4">

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

</div>

<div class="mb-4">

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

</div>

<div class="mb-4">

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

</div>

<div class="mb-4">

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

</div>

<div class="mb-4">

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

</div>

<div class="mb-6">

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

</div>

<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 Prescription
        </button>

</div>

</form>

</div>

Related Examples

Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Muhammad Umair Arshad

1 year ago

1.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.2k
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Muhammad Umair Arshad

1 year ago

1.4k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Abdul Baset Bappy

1 year ago

1.5k
Login AND Signup
login and signup

Uwera Dorcas

1 year ago

1.3k
AutoTrade
Browse thousands of quality used cars from trusted sellers. Great prices and easy financing options available

INGRIDE MUZIRANENGE

1 year ago

1.3k
Contact us Form with Responsive

KULDEEP

1 year ago

1.2k
tiny fishing
fun fishing

Abel Wright

7 months ago

235
Dark dashboard
Dark dashboard

Tanvir Hasan Bappy (Tanvir)

9 months ago

406
Invoice Generator
Invoice Generator

Tanvir Hasan Bappy (Tanvir)

9 months ago

482
machine
tell you how your MAC pc work

gidy

11 months ago

751
ForK blocks animations
ForK blocks animations

Yor Rodriguez

1 year ago

2.4k