Tailwind CSS v3 Cards Examples

In this section we will create tailwind css v3 cards ui, responsive tailwind v3 horizontal card, tailwind v3 style cards using tailwind v3 new features card like shdow color decoration underline, card with image example with Tailwind CSS version 3. Before we start you need to install or setup tailwind v3 project, you can check below article.

How to install & setup Tailwind CSS v3

Example 1

Simple tailwind v3 card.

<div class="max-w-xs rounded shadow-md">
  <div class="p-4">
    <div>
      <h2 class="text-xl font-bold text-gray-800">Tailwind v3 Card</h2>
      <p class="text-gray-600">Lorem, ipsum dolor sit amet consectetur adipis</p>
    </div>
  </div>
</div>

Shadow color card using tailwind v3 new feature.

<div class="max-w-xs rounded shadow-md shadow-indigo-600">
  <div class="p-4">
    <div>
      <h2 class="text-xl font-bold text-indigo-600">Tailwind v3 Card</h2>
      <p class="text-gray-600">
        Lorem, ipsum dolor sit amet consectetur adipis
      </p>
    </div>
  </div>
</div>

tailwind v3 shadow color card

Decoration and underline style card using tailwind v3 new feature.

<div class="max-w-xs rounded shadow-md shadow-indigo-600">
  <div class="p-4 bg-indigo-600">
    <div>
      <h2 class="mb-4 text-xl font-bold text-gray-100">
        <span class="underline decoration-gray-100 decoration-wavy"
          >Tailwind v3
        </span>
        Card
      </h2>
      <p class="text-gray-100">
        Lorem,
        <span class="underline decoration-red-600 decoration-solid">
          tailwind v3 features
        </span>
        sit amet consectetur
        <span class="underline decoration-2 decoration-red-600 decoration-solid"
          >adipis</span
        >
      </p>
    </div>
  </div>
</div>

Decoration and underline style card

Example 2

Tailwind CSS v3 card with image using tailwind v3 new color & shadow style.

<div class="max-w-sm rounded-lg shadow-md shadow-sky-600">
  <img
    class="object-cover w-full h-48"
    src="https://cdn.pixabay.com/photo/2016/12/19/18/21/snowflake-1918794__340.jpg"
    alt="image"
  />
  <div class="px-6 py-4">
    <h4 class="mb-3 text-xl font-semibold tracking-tight text-sky-600">
      Christmas Tree Decoration
    </h4>
    <p class="mb-2 leading-normal text-sky-900">
      Lorem ipsum dolor, sit amet cons ectetur adipis icing elit. Praesen tium,
      quibusdam facere quo laborum maiores sequi nam tenetur laud.
    </p>
    <button
      class="px-4 py-2 text-sm shadow bg-sky-100 shadow-sky-600 text-sky-700 
      hover:bg-sky-600 hover:text-sky-100">
      Read more
    </button>
  </div>
</div>

Tailwind CSS v3 card with image

tailwind v3 responsive horizontal card with image.

<div class="max-w-xl rounded-lg shadow-md lg:flex md:flex shadow-sky-600">
  <img
    class="object-cover w-full md:w-1/2 lg:w-1/3"
    src="https://cdn.pixabay.com/photo/2016/12/19/18/21/snowflake-1918794__340.jpg"
    alt="image"
  />
  <div class="px-6 py-4">
    <h4 class="mb-3 text-base font-semibold tracking-tight text-sky-600">
      Christmas Tree Decoration
    </h4>
    <p class="mb-2 text-sm leading-normal text-justify text-sky-900">
      Lorem ipsum dolor, sit amet cons ectetur adipis icing elit. Praesen tium,
      quibusdam facere quo laborum maiores sequi nam tenetur laud.
    </p>
    <button
      class="
        px-4
        py-2
        text-sm
        shadow
        bg-sky-100
        shadow-sky-600
        text-sky-700
        hover:bg-sky-600 hover:text-sky-100">
      Read more
    </button>
  </div>
</div>

tailwind v3 horizontal card

Read Also

Tailwind CSS 3 FAQ Accordion UI Example

Tailwind CSS 3 Alert Message Example

Tailwind CSS 3 Avatars Example

Tailwind CSS 3 Badges Example

Tailwind CSS 3 Breadcrumb Example

Tailwind CSS Gradient Button Example

Tailwind CSS 3D Button Example

Tailwind CSS Loading Button Example

Tailwind CSS v3 Cards Examples

Tailwind CSS Checkbox Form Examples

Tailwind CSS Dropdowns (Menu) on Hover Example

Tailwind CSS Multiselect Dropdown Example

How to use dark mode toggle switch in Tailwind CSS 3

How to use @apply directive in Tailwind CSS

Tailwind CSS sticky header & fixed navbar example

Tailwind CSS Navbar UI Example

Tailwind CSS 3 Login Page UI Example

Tailwind CSS Login Modal Example

Tailwind CSS Search Examples

Tailwind CSS 3 Overlay Image Example

Tailwind CSS Thank You Page Example

Tailwind CSS Timeline UI Example

Tailwind CSS Responsive Footer Section Example

Tailwind CSS Background Image Header Example