Published on

6 Easy Ways To Create A Rounded Cards With Tailwind CSS

Tags
Rounded Cards

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.