pay fee

This tailwind example is contributed by John, on 19-Oct-2026. Component is made with Tailwind v3.4. It is responsive.

Tailwind v3.4 5

<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
  <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800">
      Withdraw Application
    </h2>

<p class="mt-3 text-sm text-gray-600">
      Are you sure you want to withdraw this admission application?
      This action may not be reversible.
    </p>

<div class="mt-6 flex justify-end gap-3">
      <button
        type="button"
        (click)="onCancel()"
        class="rounded-lg border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-100">
        Cancel
      </button>

<button
        type="button"
        (click)="onConfirm()"
        class="rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700">
        Confirm Withdraw
      </button>
    </div>
  </div>
</div>

//pay fee

<div class="flex items-center justify-between">
      <h2 class="text-xl font-semibold text-gray-800">
        Interview Details
      </h2>

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

<div>
        <label class="text-sm font-medium text-gray-600">
          Interview Date & Time
        </label>
        <p class="mt-1 rounded-lg bg-gray-50 p-3 text-gray-800">
          {{ interviewDate ? (interviewDate | date:'medium') : 'Not scheduled' }}
        </p>
      </div>

<div>
        <label class="text-sm font-medium text-gray-600">
          Interview Location
        </label>
        <p class="mt-1 rounded-lg bg-gray-50 p-3 text-gray-800">
          {{ interviewLocation || 'Not provided' }}
        </p>
      </div>

<div>
        <label class="text-sm font-medium text-gray-600">
          Remarks
        </label>
        <p class="mt-1 rounded-lg bg-gray-50 p-3 text-gray-800">
          {{ interviewRemarks || 'No remarks' }}
        </p>
      </div>

</div>

<div class="mt-6 flex justify-end">
      <button
        type="button"
        (click)="onClose()"
        class="rounded-lg bg-gray-800 px-5 py-2 text-white hover:bg-gray-700">
        Close
      </button>
    </div>

</div>
</div>
```

Related Examples

Chat template
fullscreen chat template suitable for mobile devices

Manon Daniel

3 years ago

18.2k
LED Dot Matrix Display
LED Dot Matrix Display

Omer fils ELENGA

2 weeks ago

47
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Hamza Atig

1 year ago

1.4k
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Lekhraj Ghimire

1 year ago

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

INGRIDE MUZIRANENGE

1 year ago

1.3k
tab3
table

Anonymous

3 weeks ago

84
Register Form

John

4 days ago

4
Apple Dock Navigation Bar

Cristian

1 year ago

3k
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Anonymous

3 years ago

12.2k
chatbot
is my chatbot

Omer fils ELENGA

11 months ago

1.3k
Giftcard grid

ariaw

1 year ago

1.3k
Collapsible content

Rafferty Kim

3 years ago

14.7k