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>
tailwind v3 ssimple card

tailwind v3 ssimple card


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

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

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 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

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 Breadcrumb Example

Tailwind CSS v3 Button Examples

Tailwind CSS v3 Cards Examples

How to use dark mode toggle switch in Tailwind CSS 3

Tailwind CSS 3 Login Page UI Example