How to Build a Card component using Tailwind CSS ?

Last Updated : 26 Apr, 2025

In this article, we will learn about how to Build a card component using Tailwind CSS, Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code. In this article, we will see how to build the card component using the Tailwind CSS.

A Card Component is like a container used to group some related information. The card usually shows information in an appealing way and can be a blog post, a user profile, etc. We may use these card components to show our data and information to your users in multiple forms and contexts.

Syntax:

<div class="block p-6 max-w-sm bg-green-600 
            rounded-lg border border-gray-200">
    <h1 class="mb-2 text-3xl font-bold text-gray-900>
        ...
    </h1>
    <p class=" font-normal text-white">
        ...
        </p>
</div>

Tailwind CSS Classes: To create a card component, we have used some utility classes of tailwind CSS.

block: It is used to create a block-level element by using the .block class.
p-6: It is used to give the padding of 6 from all sides.
max-w-sm: It is used to set the max width of the component as small.
rounded-lg: It is used to set the rounded corners as large.
border border-gray-200: It is used to add a border of a grey color.
shadow-md: It is used to add shadows of medium size.
mb-2: It adds the margin-bottom of 1 rem.
text-3xl: It makes the font size 1.875rem.
font-bold: It makes the font size bold.
text-gray-900: It makes the text color gray.
text-white: It makes the text color white.

Tailwind CSS Installation: There are 2 ways through which the Tailwind CSS can be used:

Using the MPM installation
Using the CDN link

We will understand both approaches for utilizing the Tailwind CSS. The following step will be followed for the Tailwind CSS Installation, is described below:

Install the package available on npm using the following command:

npm install tailwindcss

After that create an ad Tailwind configuration file using the following command:

npm tailwind init {name of file}

Using Tailwind CSS CDN Link:

Add the CDN script tag to the <head> of the HTML file and start using Tailwind’s utility classes to style the content:

<script src="https://cdn.tailwindcss.com"></script>

Adding Tailwind to your project:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>GeeksforGeeks</title>
    <script src=
"https://cdn.tailwindcss.com"></script>
</head>

<body>
    ...
</body>
</html>

Create a card container:

<div class="block p-6 max-w-sm
            bg-green-600 rounded-lg 
            border border-grey-200 shadow-md">
    ...        
</div>

Add Headers and main content:

<h1 class="mb-2 text-3xl font-bold text-gray-900">
    Header
</h1>
<p class="text-white">
    content goes here...
</p>

Example 1: Below example demonstrates the basic card component created using Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Card Component In Tailwind CSS</title>
    <script src=
"https://cdn.tailwindcss.com">
    </script>
</head>
 
<body>
    <div style="text-align: center">
        <h1 class="text-green-600 
                   text-3xl font-bold">
            GeeksforGeeks
        </h1>
        <h3 class="text-xl">
            Card in Tailwind CSS
        </h3>
    </div>
    <div class="py-4 flex justify-center">
        <div class="block p-6 max-w-sm 
                    bg-green-600 
                    rounded-lg border 
                    border-gray-200 shadow-md">
            <h1 class="mb-2 text-3xl 
                       font-bold 
                       text-gray-900 
                       dark:text-white">
                GeeksforGeeks
            </h1>
            <p class="font-normal text-white">
                GeeksforGeeks aka GFG is an online platform 
                that provides Free Tutorials, Millions of 
                Articles, Live, Online and Classroom Courses,
                Frequent Coding Competitions ,Webinars by 
                Industry Experts, Internship opportunities
                and Job Opportunities.
            </p>
        </div>
    </div>
</body>
</html>

Output:

Example 2: Below example demonstrates the card component with the image using Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>GeeksforGeeks</title>
    <script src=
"https://cdn.tailwindcss.com">
    </script>
</head>
 
<body>
    <div style="text-align: center">
        <h1 class="text-green-600 
                   text-3xl font-bold">
            GeeksforGeeks
        </h1>
        <h3 class="text-xl">
            Card in Tailwind CSS
        </h3>
    </div>
    <div class="py-4 
                flex justify-center">
        <div class="w-full 
                    max-w-sm 
                    bg-gray-800 
                    rounded-lg 
                    border border-gray-200 
                    shadow-md">
            <div class="flex flex-col 
                        items-center pt-4 pb-10">
                <img class="mb-3 w-24 h-24 
                            rounded-full shadow-lg" 
                     src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
                     alt="gfg" />
                <h5 class="mb-1 text-xl 
                           font-medium 
                           text-gray-900 
                           dark:text-white">
                    GeeksforGeeks
                </h5>
                <span class="text-sm 
                             text-gray-500 
                             dark:text-gray-400">
                    Coding Platform
                </span>
                <div class="flex mt-4 space-x-3 md:mt-6">
                    <a href="https://www.geeksforgeeks.org"
                       class="inline-flex items-center py-2 px-4 
                              text-sm font-medium text-center 
                              text-white bg-green-600 rounded-lg 
                              hover:bg-green-700 focus:ring-4 
                              focus:outline-none focus:ring-blue-300">
                        Website
                    </a>
                    <a href="#"
                       class="inline-flex items-center py-2 px-4 
                              text-sm font-medium text-center 
                              text-gray-900 bg-white rounded-lg 
                              border border-gray-300 hover:bg-gray-100 
                              focus:ring-4 focus:outline-none 
                              focus:ring-gray-200 dark:bg-gray-800 
                              dark:text-white dark:border-gray-600 
                              dark:hover:bg-gray-700 
                              dark:hover:border-gray-700 
                              dark:focus:ring-gray-700">
                        Contact
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>