Components
Card

Components

Tailwind CSS Card

Use pre-built Tailwind CSS cards with various layouts and interactive UI components. Ideal for product and event listings, user profiles, dashboards, and more.

Example

A basic card containing a title, content and an extra corner content.

Cards assume no specific width to start, so they'll be 100% wide unless otherwise stated.

Theme:

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        <img class="w-full h-auto rounded-t-xl" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&q=80" alt="Card Image">
                        <div class="p-4  ">
                          <h3 class="font-semibold text-foreground">
                            Card title
                          </h3>
                          <p class="mt-1 text-muted-foreground-1">
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                          </p>
                          <a class="mt-2 py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Go somewhere
                          </a>
                        </div>
                      </div>

Content types

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what's supported.

Body

Simple body example with text.

Theme:

Simple card

A simple card only containing a content area.

Theme:

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        <div class="p-4  ">
                          <h3 class="font-semibold text-foreground">
                            Card title
                          </h3>
                          <p class="mt-1 text-xs font-medium uppercase text-muted-foreground-1">
                            Card subtitle
                          </p>
                          <p class="mt-1 text-muted-foreground-1">
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                          </p>
                          <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Card link
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                          </a>
                        </div>
                      </div>

Header and footer

Add an optional header and/or footer within a card.

Theme:

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        <div class="bg-surface border-b border-card-line rounded-t-xl py-3 px-4">
                          <p class="text-sm text-muted-foreground-1">
                            Featured
                          </p>
                        </div>
                        <div class="p-4  ">
                          <h3 class="font-semibold text-foreground">
                            Card title
                          </h3>
                          <p class="mt-1 text-muted-foreground-1">
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                          </p>
                          <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Card link
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                          </a>
                        </div>
                      </div>

Simple footer within a card.

Theme:

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        <div class="p-4  ">
                          <h3 class="font-semibold text-foreground">
                            Card title
                          </h3>
                          <p class="mt-1 text-muted-foreground-1">
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                          </p>
                          <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Card link
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                          </a>
                        </div>
                        <div class="bg-surface border-t border-card-line rounded-b-xl py-3 px-4">
                          <p class="text-sm text-muted-foreground-1">
                            Last updated 5 mins ago
                          </p>
                        </div>
                      </div>

Sizes

Small

Theme:

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        <div class=" p-3 ">
                          <h3 class="font-semibold text-foreground">
                            Card title
                          </h3>
                          <p class="mt-1 text-muted-foreground-1">
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                          </p>
                          <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Card link
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                          </a>
                        </div>
                      </div>

Default

Theme:

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        <div class="p-4  ">
                          <h3 class="font-semibold text-foreground">
                            Card title
                          </h3>
                          <p class="mt-1 text-muted-foreground-1">
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                          </p>
                          <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Card link
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                          </a>
                        </div>
                      </div>

Large

Theme:

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        <div class="  p-4 sm:p-6">
                          <h3 class="font-semibold text-foreground">
                            Card title
                          </h3>
                          <p class="mt-1 text-muted-foreground-1">
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                          </p>
                          <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Card link
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                          </a>
                        </div>
                      </div>

Add some navigation to a card's header (or block).

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full mx-auto mt-2">
                      <div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        <div class="bg-surface border-b border-card-line rounded-t-xl pt-3 px-4 md:pt-4 md:px-5">
                          <nav class="flex gap-x-2">
                            <a class="-mb-px py-3 px-4 text-sm font-medium text-center bg-layer border border-line-2 border-b-transparent text-foreground rounded-t-lg focus:outline-hidden focus:z-10" href="#">
                              Active
                            </a>
                            <a class="-mb-px py-3 px-4 text-sm font-medium text-center border-b border-line-2 text-muted-foreground-1 rounded-t-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus focus:z-10" href="#">
                              Link
                            </a>
                            <a class="-mb-px py-3 px-4 text-sm font-medium text-center border-b border-line-2 text-muted-foreground-1 rounded-t-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus focus:z-10" href="#">
                              Link
                            </a>
                          </nav>
                        </div>
                        <div class="p-4 sm:py-7 text-center">
                          <h3 class="font-semibold text-foreground">
                            Card title
                          </h3>
                          <p class="mt-2 text-muted-foreground-1">
                            With supporting text below as a natural lead-in to additional content.
                          </p>
                          <a class="mt-3 py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Go somewhere
                          </a>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        <div class="bg-surface border-b border-card-line rounded-t-xl pt-3 px-4 md:pt-4 md:px-5">
                          <nav class="flex gap-x-2">
                            <a class="-mb-px py-3 px-4 text-sm font-medium text-center bg-layer border border-line-2 border-b-transparent text-foreground rounded-t-lg focus:outline-hidden focus:z-10" href="#">
                              Active
                            </a>
                            <a class="-mb-px py-3 px-4 text-sm font-medium text-center border-b border-line-2 text-muted-foreground-1 rounded-t-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus focus:z-10" href="#">
                              Link
                            </a>
                            <a class="-mb-px py-3 px-4 text-sm font-medium text-center border-b border-line-2 text-muted-foreground-1 rounded-t-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus focus:z-10" href="#">
                              Link
                            </a>
                          </nav>
                        </div>
                        <div class="p-4 sm:py-7 text-center">
                          <h3 class="font-semibold text-foreground">
                            Card title
                          </h3>
                          <p class="mt-2 text-muted-foreground-1">
                            With supporting text below as a natural lead-in to additional content.
                          </p>
                          <a class="mt-3 py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Go somewhere
                          </a>
                        </div>
                      </div>

Where long content doesn't fit on the screen, change the tab bar to <select> on mobile.

Theme:

<div class="hidden sm:block">
                            <nav class="relative z-0 flex rounded-xl divide-x divide-card-divider">
                              <a class="relative min-w-0 flex-1 bg-layer p-4 border-b-2 border-b-primary text-foreground rounded-ss-xl text-sm font-medium text-center overflow-hidden hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus focus:z-10" aria-current="page" href="#">
                                My Account
                              </a>

<a class="relative min-w-0 flex-1 bg-layer p-4 border-b border-b-line-2 text-muted-foreground-1 hover:text-primary-hover text-sm font-medium text-center overflow-hidden hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus focus:z-100" href="#">
                                Company
                              </a>

<a class="relative min-w-0 flex-1 bg-layer p-4 border-b border-b-line-2 text-muted-foreground-1 hover:text-primary-hover rounded-se-xl text-sm font-medium text-center overflow-hidden hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus focus:z-100" href="#">
                                Billing
                              </a>
                            </nav>
                          </div>

<div class="p-4 sm:py-7 text-center">
                            <h3 class="font-semibold text-foreground">
                              Card title
                            </h3>
                            <p class="mt-2 text-muted-foreground-1">
                              With supporting text below as a natural lead-in to additional content.
                            </p>
                            <a class="mt-3 py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                              Go somewhere
                            </a>
                          </div>
                        </div>
                        
                            <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                          </body>
                        </html>

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                          
                          <div class="sm:hidden">
                            <label for="hs-card-nav" class="sr-only">Select a nav</label>
                            <select name="hs-card-nav" id="hs-card-nav" class="block w-full border-t-0 border-x-0 border-line-2 rounded-t-xl focus:outline-hidden focus:ring-0 disabled:opacity-50 disabled:pointer-events-none">
                              <option selected>My Account</option>
                              <option>Company</option>
                              <option>Team Members</option>
                              <option>Billing</option>
                            </select>
                          </div>

Images

Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.

Image placeholders

Similar to headers and footers, cards can include top and bottom "image placeholder"—images at the top.

Theme:

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        <img class="w-full h-auto rounded-t-xl" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&q=80" alt="Card Image">
                        <div class="  p-4 sm:p-6">
                          <h3 class="font-semibold text-foreground">
                            Card title
                          </h3>
                          <p class="mt-1 text-muted-foreground-1">
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                          </p>
                          <p class="mt-5 text-xs text-muted-foreground-1">
                            Last updated 5 mins ago
                          </p>
                        </div>
                      </div>

Or bottom of the card.

Theme:

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        <div class="  p-4 sm:p-6">
                          <h3 class="font-semibold text-foreground">
                            Card title
                          </h3>
                          <p class="mt-1 text-muted-foreground-1">
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                          </p>
                          <p class="mt-5 text-xs text-muted-foreground-1">
                            Last updated 5 mins ago
                          </p>
                        </div>
                        <img class="w-full h-auto rounded-b-xl" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&q=80" alt="Card Image">
                      </div>

Image overlays

Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities.

Theme:

<div class="relative bg-card border border-card-line shadow-2xs rounded-xl">
                          <img class="w-full h-auto rounded-xl" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&q=80" alt="Card Image">
                          <div class="absolute top-0 start-0 end-0">
                            <div class="p-4">
                              <h3 class="font-semibold text-foreground">
                                Card title
                              </h3>
                              <p class="mt-1 text-muted-foreground-1">
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                              </p>
                              <p class="mt-5 text-xs text-muted-foreground-1">
                                Last updated 5 mins ago
                              </p>
                            </div>
                          </div>
                        </div>

Attention needed

Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.

Animations

Image scaling animation on hover

Add a smooth scaling animation to card images that activates on hover, creating an engaging visual effect.

Theme:

<a class="flex flex-col group bg-card border border-card-line shadow-2xs rounded-xl overflow-hidden hover:shadow-lg focus:outline-hidden focus:shadow-lg transition" href="#">
                        <div class="relative pt-[50%] sm:pt-[60%] lg:pt-[80%] rounded-t-xl overflow-hidden">
                          <img class="size-full absolute top-0 start-0 object-cover group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out rounded-t-xl" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&q=80" alt="Card Image">
                        </div>
                        <div class="p-4">
                          <h3 class="font-semibold text-foreground">
                            Card title
                          </h3>
                          <p class="mt-1 text-muted-foreground-1">
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                          </p>
                        </div>
                      </a>

Transition on hover

Add smooth shadow transitions when users hover over the card for enhanced visual feedback.

Theme:

Horizontal

Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.

Theme:

<div class="sm:flex bg-card border border-card-line rounded-xl shadow-2xs">
                        <div class="shrink-0 relative w-full rounded-t-xl overflow-hidden pt-[40%] sm:rounded-s-xl sm:max-w-60 sm:rounded-se-none sm:max-w-20">
                          <img class="size-full absolute top-0 start-0 object-cover" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&q=80" alt="Card Image">
                        </div>
                        <div class="flex flex-wrap">
                          <div class="p-4 flex flex-col h-full sm:p-7">
                            <h3 class="font-semibold text-foreground">
                              Card title
                            </h3>
                            <p class="mt-1 text-muted-foreground-1">
                              Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                            <div class="mt-5 sm:mt-auto">
                              <p class="text-xs text-muted-foreground-1">
                                Last updated 5 mins ago
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>

Card layout

Card group

Use card groups to render cards as a single, attached element with equal width and height columns.

Theme:

<div class="flex flex-col flex-1 bg-card">
                          <img class="w-full h-auto" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&q=80" alt="Card Image">
                          <div class="p-4 flex-1 md:p-5">
                            <h3 class="font-semibold text-foreground">
                              Card title
                            </h3>
                            <p class="mt-1 text-muted-foreground-1">
                              This card has supporting text below as a natural lead-in to additional content.
                            </p>
                          </div>
                          <div class="p-4 border-t border-card-footer">
                            <p class="text-xs text-muted-foreground-1">
                              Last updated 5 mins ago
                            </p>
                          </div>
                        </div>

<div class="flex flex-col flex-1 bg-card">
                          <img class="w-full h-auto sm:rounded-se-xl" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&q=80" alt="Card Image">
                          <div class="p-4 flex-1 md:p-5">
                            <h3 class="font-semibold text-foreground">
                              Card title
                            </h3>
                            <p class="mt-1 text-muted-foreground-1">
                              This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
                            </p>
                          </div>
                          <div class="p-4 border-t border-card-footer">
                            <p class="text-xs text-muted-foreground-1">
                              Last updated 5 mins ago
                            </p>
                          </div>
                        </div>
                        
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="grid border border-card-line rounded-xl shadow-2xs divide-y overflow-hidden sm:flex sm:divide-y-0 sm:divide-x divide-card-divider">
                        
                        <div class="flex flex-col flex-1 bg-card">
                          <img class="w-full h-auto rounded-t-xl sm:rounded-se-none" src="https://images.unsplash.com/photo-1680868543815-b8666dba60f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&q=80" alt="Card Image">
                          <div class="p-4 flex-1 md:p-5">
                            <h3 class="font-semibold text-foreground">
                              Card title
                            </h3>
                            <p class="mt-1 text-muted-foreground-1">
                              This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                            </p>
                          </div>
                          <div class="p-4 border-t border-card-footer">
                            <p class="text-xs text-muted-foreground-1">
                              Last updated 5 mins ago
                            </p>
                          </div>
                        </div>

Top bordered card

You can change the color of the border by using a different border-color utility class. For example, to change the border color to red, you would use the border-red-500 utility class.

Theme:

<div class="flex flex-col bg-card border border-card-line border-t-4 border-t-primary shadow-2xs rounded-xl">
                        <div class="p-4 md:p-5">
                          <h3 class="font-semibold text-foreground">
                            Card title
                          </h3>
                          <p class="mt-2 text-muted-foreground-1">
                            With supporting text below as a natural lead-in to additional content.
                          </p>
                          <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Card link
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                          </a>
                        </div>
                      </div>

Panel actions

Top bordered card example.

Requires JS

Note that this component requires the use of our Tooltip plugin, else you can skip this message if you are already using Preline UI as a bundle.

Learn more

Theme:

<div class="flex items-center gap-x-1">
                            <div class="hs-tooltip inline-block">
                              <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md" role="tooltip">
                                  Refresh
                                </span>
                              </button>
                            </div>
                            <div class="hs-tooltip inline-block">
                              <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8"/><path d="M3 16.2V21m0 0h4.8M3 21l6-6"/><path d="M21 7.8V3m0 0h-4.8M21 3l-6 6"/><path d="M3 7.8V3m0 0h4.8M3 3l6 6"/></svg>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md" role="tooltip">
                                  Fullscreen
                                </span>
                              </button>
                            </div>
                            <div class="hs-tooltip inline-block">
                              <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md" role="tooltip">
                                  Close
                                </span>
                              </button>
                            </div>
                          </div>
                          
                        </div>

<div class="p-4">
                          <p class="mt-2 text-muted-foreground-1">
                            With supporting text below as a natural lead-in to additional content.
                          </p>
                          <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Card link
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                          </a>
                        </div>
                        
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        
                        <div class="py-3 px-4 flex justify-between items-center border-b border-card-header rounded-t-xl">
                          <h3 class="font-semibold text-foreground">
                            Card action
                          </h3>

With alert

Use an alert box that perfectly sits within a card.

Theme:

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                          <div class="py-3 px-4 border-b border-card-header rounded-t-xl">
                            <p class="mt-1 text-sm text-muted-foreground-1">
                              Featured
                            </p>
                          </div>
                          <div class="py-3 px-4 bg-surface border-b border-card-divider text-sm text-foreground">
                            <span class="font-semibold">Attention needed!</span> This is an alert box.
                          </div>
                          <div class="p-4">
                            <h3 class="font-semibold text-foreground">
                              Card title
                            </h3>
                            <p class="mt-2 text-muted-foreground-1">
                              With supporting text below as a natural lead-in to additional content.
                            </p>
                            <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                              Card link
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </a>
                          </div>
                        </div>

Centered body content

Simple example of a center aligned body content.

Theme:

<div class="min-h-60 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        <div class="flex flex-auto flex-col justify-center items-center p-4 md:p-5">
                          <h3 class="font-semibold text-foreground">
                            Card title
                          </h3>
                          <p class="mt-2 text-muted-foreground-1">
                            With supporting text below as a natural lead-in to additional content.
                          </p>
                          <a class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:text-primary-hover hover:underline focus:underline focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Card link
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                          </a>
                        </div>
                      </div>

Empty state

Display empty state placeholder when there is no data provided, display for friendly tips.

Theme:

<div class="min-h-60 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        <div class="p-4 flex flex-auto flex-col justify-center items-center">
                          <svg class="size-10 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="22" x2="2" y1="12" y2="12"/>
                            <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
                            <line x1="6" x2="6.01" y1="16" y2="16"/>
                            <line x1="10" x2="10.01" y1="16" y2="16"/>
                          </svg>
                          <p class="mt-2 text-sm text-foreground">
                            No data to show
                          </p>
                        </div>
                      </div>

Scrollable body

Simple example of a center aligned body content.

Theme:

<!DOCTYPE html>
                        <html lang="en" dir="" class="relative min-h-full h-full">
                          <head>
                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                            <title>Preline UI</title>
                            <link rel="shortcut icon" href="../favicon.ico">
                            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                            <link rel="stylesheet" href="../assets/css/main.min.css">
                          </head>
                          <body class="w-full max-w-2xl mx-auto mt-4">
                        <div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                          <div class="p-4 my-1.5 me-1.5 h-80 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            <h3 class="font-semibold text-foreground">
                              Card title
                            </h3>
                            <p class="mt-3 text-muted-foreground-1">
                              This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                            </p>
                            <p class="mt-3 text-muted-foreground-1">
                              This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                            </p>
                            <p class="mt-3 text-muted-foreground-1">
                              This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                            </p>
                          </div>
                        </div>
                        
                            <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                          </body>
                        </html>

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                          <div class="p-4 my-1.5 me-1.5 h-80 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            <h3 class="font-semibold text-foreground">
                              Card title
                            </h3>
                            <p class="mt-3 text-muted-foreground-1">
                              This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                            </p>
                            <p class="mt-3 text-muted-foreground-1">
                              This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                            </p>
                            <p class="mt-3 text-muted-foreground-1">
                              This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                            </p>
                          </div>
                        </div>

Tailwind CSS Card

Basic usage

Example

Content types

Body

Simple card

Header and footer

Sizes

Small

Default

Large

Navigation

Navigation with select on mobile

Images

Image placeholders

Image overlays

Attention needed

Animations

Image scaling animation on hover

Transition on hover

Horizontal

Card layout

Card group

Top bordered card

Panel actions

Requires JS

With alert

Centered body content

Empty state

Scrollable body

On this page