We will learn how to design a visually appealing product details card with animation using Tailwind CSS. This card will display essential information about a product, such as its image, title, price, description, features, and an interactive "Add to Cart" button.
Approach
- Each product card is structured with a div container containing an image (img), product details (h3, p), and an "Add to Cart" button (button).
- Tailwind CSS utility classes are used to style various elements within the product cards, including sizing, margins, padding, colors, and typography.
- Animation and transition effects are applied using Tailwind's built-in transition utilities. The transition classes are added to elements to specify the properties that should transition smoothly when changed, such as transform and box-shadow.
- Each product card has a unique animation effect applied on hover (card1, card2, card3, card4). These effects include rotation, scaling, and skewing, achieved through the use of Tailwind's transformation classes (rotate, scale, skew).
- The "Add to Cart" button has a hover effect applied using Tailwind's hover classes. When hovered over, the button transitions smoothly to a darker background color (hover:bg-blue-600), providing feedback to the user.
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Product Details Cards with Animation</title>
<link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet">
<style>
.card {
transition: transform 0.3s ease-in-out,
box-shadow 0.3s ease-in-out;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
.card1:hover {
transform: rotate(-2deg) scale(1.05);
}
.card2:hover {
transform: rotate(2deg) scale(1.05);
}
.card3:hover {
transform: scale(1.05);
}
.card4:hover {
transform: skewY(-5deg);
}
</style>
</head>
<body class="bg-gray-100 flex
justify-center
items-center h-screen">
<div class="grid grid-cols-1
md:grid-cols-2
lg:grid-cols-4 gap-8">
<!-- Card 1 -->
<div class="max-w-xs bg-white
rounded-lg overflow-hidden
shadow-lg card card1">
<img class="w-full"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240405130404/Image_5.png"
alt="Product Image">
<div class="p-4">
<h3 class="text-xl
font-semibold
text-gray-800">Product Name 1</h3>
<p class="text-gray-600
mt-2">here content goes for the card 1</p>
<p class="text-gray-700
font-bold mt-2">$19.99</p>
<button class="bg-blue-500 text-white
font-semibold py-2 px-4
mt-4 rounded-lg
hover:bg-blue-600
transition-all
duration-300">Add
to Cart</button>
</div>
</div>
<!-- Card 2 -->
<div class="max-w-xs bg-white
rounded-lg overflow-hidden
shadow-lg card card2">
<img class="w-full"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240405130408/Image_2.png"
alt="Product Image">
<div class="p-4">
<h3 class="text-xl
font-semibold
text-gray-800">Product Name 2</h3>
<p class="text-gray-600
mt-2">here content goes for the card 2</p>
<p class="text-gray-700
font-bold mt-2">$29.99</p>
<button class="bg-blue-500 text-white
font-semibold py-2 px-4 mt-4
rounded-lg hover:bg-blue-600
transition-all duration-300">Add
to Cart</button>
</div>
</div>
<!-- Card 3 -->
<div class="max-w-xs bg-white rounded-lg
overflow-hidden shadow-lg
card card3">
<img class="w-full"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240405130404/Image_5.png"
alt="Product Image">
<div class="p-4">
<h3 class="text-xl
font-semibold
text-gray-800">Product Name 3</h3>
<p class="text-gray-600
mt-2">here content goes for the card 3</p>
<p class="text-gray-700
font-bold mt-2">$39.99</p>
<button class="bg-blue-500 text-white
font-semibold py-2 px-4
mt-4 rounded-lg hover:bg-blue-600
transition-all duration-300">
Add to Cart</button>
</div>
</div>
<!-- Card 4 -->
<div class="max-w-xs bg-white
rounded-lg overflow-hidden
shadow-lg card card4">
<img class="w-full"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240405130405/Image_4.png"
alt="Product Image">
<div class="p-4">
<h3 class="text-xl font-semibold
text-gray-800">Product Name 4</h3>
<p class="text-gray-600 mt-2">
here content goes for the card 4</p>
<p class="text-gray-700 font-bold mt-2">$49.99</p>
<button class="bg-blue-500 text-white
font-semibold py-2 px-4 mt-4
rounded-lg hover:bg-blue-600
transition-all duration-300">
Add to Cart</button>
</div>
</div>
</div>
</body>
</html>
Output:
Output
Recommended Articles