card

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

Card

Author aditya_sharma

Tailwind v3.4 191

Fork Fullscreen

<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
        <div
          class="bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden"
        >
          
          <div class="px-5 py-4 border-b border-gray-100 flex items-start justify-between gap-3">
            <div class="min-w-0">
              <p class="text-xs font-medium text-gray-500">field 1</p>

<p
                class="mt-1 text-sm font-semibold text-gray-800 truncate"
                title="{{ application.applicationId }}"
              >
              field1 data
              </p>
            </div>

<div class="p-5 space-y-5">
            <div>
              <p class="text-xs font-medium text-gray-500">field2</p>

<h3 class="mt-1 text-lg font-semibold text-gray-900">
field2 data              </h3>

</div>

<div class="bg-gray-50 rounded-xl p-4">
              <p class="text-xs font-medium text-gray-500">field3</p>

<p class="mt-1 font-semibold text-gray-800">
field 3 data              </p>

<div class="grid grid-cols-2 gap-4">
              <div>
                <p class="text-xs text-gray-500">field 4</p>

<p class="mt-1 text-sm font-semibold text-gray-800">
field data 4                </p>
              </div>

<div>
                <p class="text-xs text-gray-500">field 5</p>

<p class="mt-1 text-sm font-semibold text-gray-800">
field data 5                </p>
              </div>
            </div>
          </div>

<div class="px-5 py-4 border-t border-gray-100 flex gap-3">
            <button
              type="button"
              (click)="openViewApplicationDetailModal(application)"
              class="cursor-pointer flex-1 px-4 py-2.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold transition"
            >
               Details
            </button>

<button
              type="button"
              (click)="openDeleteApplicationModal(application)"
              class="cursor-pointer flex-1 px-4 py-2.5 rounded-xl border border-red-200 text-white bg-red-500 text-sm font-semibold transition disabled:opacity-40 disabled:cursor-not-allowed"
            >
              apply
            </button>
          </div>
        </div>
    </div>

Related Examples

Cards with Animated Corner Arrow
Transitioning from Foundation to Tailwind - built cards and tiles to prove that we don't need javascript to reproduce our card and tile layouts/interactions.

Sherry Lynne

3 months ago

297
Clean Architectural Blog & News Section Grid
A sleek, modern, and minimal blog section designed for architecture, portfolio, or agency websites. Features landscape card layouts, top-aligned post titles for consistent grid alignment, category badges, publication dates with icons, and a smooth outlined CTA button.

Alief Malik

2 months ago

83
Call to Action Box

Aitrik Saha

1 year ago

2.1k
Form
form

Aman kumar

2 years ago

2.8k
Simple Profile Card.
Profile page with basic informations

Sedat Kumcu

2 years ago

3.6k
Greeting Card with CTA
card with two actions with greeting msg according to time

Amit Pachange

3 years ago

8.4k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Anonymous

1 year ago

2k
Form package

Hunter Guru

2 years ago

3k
ApexCodeStudios.com Signature Profile Card
Get Access to 216+ Free Premium Tailwind CSS UI Components at apexcodestudios.com. Elegant compact professional profile card with gradient banner.

Apex Code Studios

5 months ago

317
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.5k
credit card checkout

Antony

2 years ago

4k
Responsive Card Section With Hover Effect
added more cards with ui friendly

SAI BENDE

1 year ago

1.1k