- Published on
6 Easy Ways To Create A Rounded Cards With Tailwind CSS
- What is Tailwind CSS?
- The description of Rounded Cards ui component
- Why use Tailwind CSS to create a Rounded Cards ui component?
- The preview of Rounded Cards ui component
- The source code of Rounded Cards ui component
- How to create a Rounded Cards with Tailwind CSS?
- 1. Basic Rounded Cards
- 2. Colored Rounded Cards
- 3. Image Rounded Cards
- 4. Hover Effect Rounded Cards
- 5. Grouped Rounded Cards
- 6. Borderless Rounded Cards
- Conclusion
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that helps developers to create beautiful and responsive user interfaces with ease. It provides a set of pre-defined classes that can be used to create complex layouts and styles without writing any custom CSS code.
The description of Rounded Cards ui component
Rounded Cards is a popular UI component used in many web applications. It is a card with rounded corners that contains some information or content. Rounded Cards can be used to display product information, user profiles, or any other type of content.
Why use Tailwind CSS to create a Rounded Cards ui component?
Tailwind CSS is a great choice for creating Rounded Cards UI components because it provides a set of pre-defined classes that can be used to create rounded corners, shadows, and other styles. This makes it easy to create beautiful and responsive Rounded Cards without writing any custom CSS code.
The preview of Rounded Cards ui component
To create a Rounded Cards UI component with Tailwind CSS, we will use the rounded-lg
class to create rounded corners and the shadow-lg
class to add a shadow effect. We will also use the bg-white
class to set the background color to white.
Free download of the Rounded Cards's source code
The source code of Rounded Cards ui component
To create a Rounded Cards UI component with Tailwind CSS, we will use the following HTML and CSS code:
<div class="flex flex-wrap">
<div class="md:w-1/2 lg:w-1/3 py-4 px-4" >
<div class=" ">
<a href="/donee/donee-2">
<div class="bg-white relative shadow p-2 rounded-lg text-gray-800 hover:shadow-lg">
<div class="right-0 mt-4 rounded-l-full absolute text-center font-bold text-xs text-white px-2 py-1 bg-orange-500">
0 Follower
</div>
<img src="http://alpha.backer.id/assets/images/bg/kucingmalas.jpeg" class="h-32 rounded-lg w-full object-cover">
<div class="flex justify-center">
<img src="http://alpha.backer.id//assets/images/bg/avatar-default2.jpg" class="rounded-full -mt-6 border-4 object-center object-cover border-white mr-2 h-16 w-16">
</div>
<div class="py-2 px-2">
<div class=" font-bold font-title text-center">Kucing Malas</div>
<div class="text-sm font-light text-center my-2">Portal pecinta kucing</div>
</div>
</div>
</a>
</div>
</div>
<div class="md:w-1/2 lg:w-1/3 py-4 px-4">
<div class=" ">
<a href="/donee/donee-3">
<div class="bg-white relative shadow p-2 rounded-lg text-gray-800 hover:shadow-lg">
<div class="right-0 mt-4 rounded-l-full absolute text-center font-bold text-xs text-white px-2 py-1 bg-orange-500">
0 Follower
</div>
<img src="http://alpha.backer.id//assets/images/bg/podcast.jpeg" class="h-32 rounded-lg w-full object-cover">
<div class="flex justify-center">
<img src="http://alpha.backer.id//assets/images/bg/avatar-default3.jpg" class="rounded-full -mt-6 border-4 object-center object-cover border-white mr-2 h-16 w-16">
</div>
<div class="py-2 px-2">
<div class=" font-bold font-title text-center">KNTL</div>
<div class="text-sm font-light text-center my-2">Kumpulan Narasi Tidak Lazim</div>
</div>
</div>
</a>
</div>
</div>
<div class="md:w-1/2 lg:w-1/3 py-4 px-4">
<div class=" ">
<a href="/donee/donee-1">
<div class="bg-white relative shadow p-2 rounded-lg text-gray-800 hover:shadow-lg">
<div class="right-0 mt-4 rounded-l-full absolute text-center font-bold text-xs text-white px-2 py-1 bg-orange-500">
0 Follower
</div>
<img src="http://alpha.backer.id//assets/images/bg/ngamen.jpeg" class="h-32 rounded-lg w-full object-cover">
<div class="flex justify-center">
<img src="http://alpha.backer.id//assets/images/bg/avatar-default1.jpg" class="rounded-full -mt-6 border-4 object-center object-cover border-white mr-2 h-16 w-16">
</div>
<div class="py-2 px-2">
<div class=" font-bold font-title text-center">Sekolah Ngamen Kerja</div>
<div class="text-sm font-light text-center my-2">Musisi Jalanan</div>
</div>
</div>
</a>
</div>
</div>
</div>
How to create a Rounded Cards with Tailwind CSS?
Now, let's take a look at 6 easy ways to create a Rounded Cards UI component with Tailwind CSS.
1. Basic Rounded Cards
To create a basic Rounded Cards UI component, we can use the following code:
<div class="rounded-lg shadow-lg bg-white p-6">
<h2 class="text-lg font-bold mb-2">Card Title</h2>
<p class="text-gray-700 text-base">Card content goes here.</p>
</div>
In this code, we have used the p-6
class to add padding to the card, the text-lg
class to set the font size of the title, and the text-gray-700
class to set the color of the content.
2. Colored Rounded Cards
To create a colored Rounded Cards UI component, we can use the following code:
<div class="rounded-lg shadow-lg bg-blue-500 text-white p-6">
<h2 class="text-lg font-bold mb-2">Card Title</h2>
<p class="text-base">Card content goes here.</p>
</div>
In this code, we have used the bg-blue-500
class to set the background color of the card to blue, and the text-white
class to set the color of the text to white.
3. Image Rounded Cards
To create an image Rounded Cards UI component, we can use the following code:
<div class="rounded-lg shadow-lg bg-white p-6">
<img class="rounded-lg mb-2" src="https://via.placeholder.com/150" alt="Card image">
<h2 class="text-lg font-bold mb-2">Card Title</h2>
<p class="text-gray-700 text-base">Card content goes here.</p>
</div>
In this code, we have used the rounded-lg
class to create rounded corners for the image, and the mb-2
class to add margin to the bottom of the image.
4. Hover Effect Rounded Cards
To create a hover effect for the Rounded Cards UI component, we can use the following code:
<div class="rounded-lg shadow-lg bg-white p-6 hover:shadow-xl transition-shadow duration-200">
<h2 class="text-lg font-bold mb-2">Card Title</h2>
<p class="text-gray-700 text-base">Card content goes here.</p>
</div>
In this code, we have used the hover:shadow-xl
class to add a shadow effect when the card is hovered, and the transition-shadow duration-200
classes to add a smooth transition effect.
5. Grouped Rounded Cards
To create a group of Rounded Cards UI components, we can use the following code:
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded-lg shadow-lg bg-white p-6">
<h2 class="text-lg font-bold mb-2">Card Title</h2>
<p class="text-gray-700 text-base">Card content goes here.</p>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded-lg shadow-lg bg-white p-6">
<h2 class="text-lg font-bold mb-2">Card Title</h2>
<p class="text-gray-700 text-base">Card content goes here.</p>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded-lg shadow-lg bg-white p-6">
<h2 class="text-lg font-bold mb-2">Card Title</h2>
<p class="text-gray-700 text-base">Card content goes here.</p>
</div>
</div>
</div>
In this code, we have used the flex flex-wrap -mx-4
classes to create a flex container with wrapped items, and the w-full md:w-1/2 lg:w-1/3 px-4 mb-8
classes to set the width and margin of each card.
6. Borderless Rounded Cards
To create a borderless Rounded Cards UI component, we can use the following code:
<div class="rounded-lg shadow-lg bg-white p-6">
<h2 class="text-lg font-bold mb-2">Card Title</h2>
<p class="text-gray-700 text-base">Card content goes here.</p>
</div>
In this code, we have not used any border classes to create a borderless card.
Conclusion
Rounded Cards UI components are a great way to display information or content in a beautiful and responsive way. With Tailwind CSS, creating Rounded Cards is easy and requires no custom CSS code. By using the pre-defined classes provided by Tailwind CSS, we can create Rounded Cards with different styles and effects.