How to Build a Card component using Tailwind CSS ?
Last Updated :
09 May, 2023
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>
<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=
</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=
</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=
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">
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>
|
Output:
Share your thoughts in the comments
Please Login to comment...