Cards & Sections in Tailwind CSS 4 – Complete Guide

Cards are one of the most popular UI components used in modern web design. They help organize content into visually appealing sections.

Cards are commonly used for:

  • blog posts
  • user profiles
  • products
  • pricing plans
  • dashboards
  • portfolios

Tailwind CSS makes it easy to create beautiful card layouts using utility classes without writing custom CSS.

In this tutorial you will learn:

  • Card layout basics
  • Profile cards
  • Product cards
  • Pricing cards
  • Real UI layout examples

We will use the Tailwind CSS 4 CDN.

https://unpkg.com/@tailwindcss/browser@4

Step 1: Setup Tailwind CSS CDN

Create a simple HTML file.

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>

<body class="p-10 bg-gray-100">

<h1 class="text-3xl font-bold mb-6">
Tailwind Card Examples
</h1>

</body>
</html>

Now you can start building card layouts.

Card Layout

A basic card usually contains:

  • image
  • title
  • description
  • action button

Basic Card Example

<div class="max-w-sm bg-white rounded-lg shadow-lg overflow-hidden">

<img
src="https://picsum.photos/400/200"
class="w-full h-40 object-cover">

<div class="p-4">

<h3 class="text-lg font-semibold mb-2">
Card Title
</h3>

<p class="text-gray-600 text-sm mb-4">
This is a simple card layout created using Tailwind CSS.
</p>

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Read More
</button>

</div>

</div>

Features:

  • shadow effect
  • rounded corners
  • image header
  • action button

Card Grid Layout

Cards are usually displayed in a grid.

<div class="grid md:grid-cols-3 gap-6">

<div class="bg-white p-6 rounded-lg shadow">
Card 1
</div>

<div class="bg-white p-6 rounded-lg shadow">
Card 2
</div>

<div class="bg-white p-6 rounded-lg shadow">
Card 3
</div>

</div>

This creates a responsive card layout.

Profile Card

Profile cards display user information like:

  • profile picture
  • name
  • job title
  • social links

Example

<div class="max-w-sm bg-white rounded-lg shadow-lg text-center p-6">

<img
src="https://picsum.photos/100"
class="w-24 h-24 rounded-full mx-auto mb-4 object-cover">

<h3 class="text-lg font-semibold">
John Doe
</h3>

<p class="text-gray-500 mb-4">
Frontend Developer
</p>

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Follow
</button>

</div>

Used in:

  • team sections
  • profile pages
  • social platforms

Profile Card with Social Links

<div class="max-w-sm bg-white rounded-lg shadow-lg text-center p-6">

<img
src="https://picsum.photos/101"
class="w-24 h-24 rounded-full mx-auto mb-4 object-cover">

<h3 class="text-lg font-semibold">
Sarah Smith
</h3>

<p class="text-gray-500 mb-4">
UI Designer
</p>

<div class="flex justify-center gap-4 text-blue-500">

<a href="#">Twitter</a>
<a href="#">LinkedIn</a>
<a href="#">GitHub</a>

</div>

</div>

Product Card

Product cards are commonly used in ecommerce websites.

They include:

  • product image
  • product title
  • price
  • add to cart button

Example

<div class="max-w-sm bg-white rounded-lg shadow-lg overflow-hidden">

<img
src="https://picsum.photos/400/300"
class="w-full h-48 object-cover">

<div class="p-4">

<h3 class="text-lg font-semibold mb-2">
Wireless Headphones
</h3>

<p class="text-gray-600 text-sm mb-3">
High quality sound with noise cancellation.
</p>

<p class="text-xl font-bold text-blue-600 mb-4">
$99
</p>

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-full">
Add to Cart
</button>

</div>

</div>

Product Card Grid Example

<div class="grid md:grid-cols-3 gap-6">

<div class="bg-white rounded-lg shadow p-4">
Product 1
</div>

<div class="bg-white rounded-lg shadow p-4">
Product 2
</div>

<div class="bg-white rounded-lg shadow p-4">
Product 3
</div>

</div>

Used in:

  • ecommerce product listings
  • online marketplaces

Pricing Cards

Pricing cards are used to display subscription plans.

They usually contain:

  • plan name
  • price
  • features
  • call-to-action button

Pricing Card Example

<div class="max-w-sm bg-white rounded-lg shadow-lg p-6 text-center">

<h3 class="text-xl font-semibold mb-4">
Basic Plan
</h3>

<p class="text-4xl font-bold text-blue-600 mb-4">
$9
</p>

<ul class="text-gray-600 space-y-2 mb-6">

<li>10 Projects</li>
<li>5GB Storage</li>
<li>Email Support</li>

</ul>

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-full">
Choose Plan
</button>

</div>

Pricing Table Layout

<div class="grid md:grid-cols-3 gap-6">

<div class="bg-white p-6 rounded-lg shadow text-center">
Basic
</div>

<div class="bg-white p-6 rounded-lg shadow text-center border-2 border-blue-500">
Pro
</div>

<div class="bg-white p-6 rounded-lg shadow text-center">
Enterprise
</div>

</div>

The middle card is highlighted for marketing.

Pricing Card with Highlight

<div class="bg-white p-6 rounded-lg shadow-lg border-2 border-blue-500 text-center">

<h3 class="text-xl font-semibold mb-4">
Pro Plan
</h3>

<p class="text-4xl font-bold text-blue-600 mb-4">
$29
</p>

<ul class="space-y-2 mb-6 text-gray-600">
<li>Unlimited Projects</li>
<li>50GB Storage</li>
<li>Priority Support</li>
</ul>

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-full">
Get Started
</button>

</div>

Why Use Cards in UI Design?

Organized Content

Cards divide information into manageable sections.

Modern Design Pattern

Cards are widely used in modern UI frameworks.

Responsive Layout

Cards work well with grid layouts.

Reusable Components

Cards can be reused across different sections.

FAQs

What is a card layout in Tailwind?

A card layout is a container that groups related content such as images, text, and buttons.

How do you create a card in Tailwind?

Example:

<div class="bg-white p-6 rounded-lg shadow">
Card Content
</div>

How do you create responsive card layouts?

Use grid utilities.

Example:

grid md:grid-cols-3 gap-6

What are profile cards used for?

Profile cards display user details such as photo, name, and role.

What are pricing cards?

Pricing cards display subscription plans with features and pricing details.



IT and Digital Marketing
keyboard_arrow_left Previous: Buttons and Forms in Tailwind CSS 4 – Complete Guide with Examples
Next: Navbar and Footer Design in Tailwind CSS 4 – Responsive Navbar, Sticky Navbar, Dropdown Menu & Footer Layout keyboard_arrow_right
Online Learner Logo

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.

Quick Links

Company

© 2023 - 2026 OnlineLearner.in | All Rights Reserved.

logo
Frontend
Backend
Interviews