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