Hello developers! Are you looking to create stunning card designs with hover effects using Tailwind CSS? You’ve come to the right place. Let’s dive right in!
Step 1: Setup HTML Structure
First, we start with the basic HTML structure. We have an HTML document with a <!DOCTYPE html> declaration, an <html> element, a <head> section for metadata, and a <body> where our content goes.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags and title go here -->
</head>
<body>
<!-- Card components will go here -->
</body>
</html>
Step 2: Add Tailwind CSS
To use Tailwind CSS, you can include it from a CDN like this:
<script src="https://cdn.tailwindcss.com"></script>
Step 3: Create Card Components
Inside the <body> section, let’s create our card components. We’ll make three cards for different pizza flavors. Each card will have an image, title, description, and an “Order Now” button.
<div class="h-screen flex items-center justify-center bg-red-200">
<div class="flex items-center gap-5">
<!-- Card 1 -->
<div class="group bg-red-400 w-80 h-40 hover:h-auto shadow-md rounded-md overflow-hidden">
<!-- Card content goes here -->
</div>
<!-- Card 2 and Card 3 go here -->
</div>
</div>
Step 4: Card Content
Now, let’s fill in the content for Card 1. It includes an image, title, description, and a button. We also add Tailwind CSS classes for styling.
<div class="group bg-red-400 w-80 h-40 hover:h-auto shadow-md rounded-md overflow-hidden">
<div class="h-40 relative overflow-hidden">
<img src="pizz1.jpg" class="absolute top-0 left-0 h-full w-full object-cover" />
</div>
<div class="p-5 opacity-0 group-hover:opacity-100 duration-[1s] -translate-y-6 group-hover:translate-y-0">
<h4 class="font-semibold text-xl">Ground Beef</h4>
<p>
Meat in general on pizza is amazing, but ground beef on pizza has a unique, delicious flavor. Add caramelized onions to your ground beef pizza and you definitely won’t regret it!
</p>
<div class="py-2 px-5 bg-white mt-2 w-fit rounded-md text-sm font-semibold">
Order Now
</div>
</div>
</div>
Step 5: Duplicate Cards
Duplicate this card structure for Card 2 and Card 3, changing the content, and image sources as needed.
Step 6: Test and Customize
Save your HTML file and open it in a browser to see your interactive card design with hover effects! You can further customize the design and content to suit your needs.
That’s it! You’ve created a beautiful card design with hover effects using Tailwind CSS. Feel free to customize and expand upon this tutorial to create more complex card designs or integrate it into your web projects. Happy coding!
Here is the full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>cards</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="h-screen flex items-center justify-center bg-red-200">
<div class="flex items-center gap-5">
<div
class="group bg-red-400 w-80 h-40 hover:h-auto shadow-md rounded-md overflow-hidden"
>
<div class="h-40 relative overflow-hidden">
<img
src="pizz1.jpg"
class="absolute top-0 left-0 h-full w-full object-cover"
/>
</div>
<div
class="p-5 opacity-0 group-hover:opacity-100 duration-[1s] -translate-y-6 group-hover:translate-y-0"
>
<h4 class="font-semibold text-xl">Ground Beef</h4>
<p>
Meat in general on pizza is amazing, but ground beef on pizza has
a unique, delicious flavor. Add caramelized onions to your ground
beef pizza and you definitely won’t regret it!
</p>
<div
class="py-2 px-5 bg-white mt-2 w-fit rounded-md text-sm font-semibold"
>
Order Now
</div>
</div>
</div>
<div
class="group bg-red-400 w-80 h-40 hover:h-auto shadow-md rounded-md overflow-hidden"
>
<div class="h-40 relative overflow-hidden">
<img
src="pizz2.jpg"
class="absolute top-0 left-0 h-full w-full object-cover"
/>
</div>
<div
class="p-5 opacity-0 group-hover:opacity-100 duration-[1s] -translate-y-6 group-hover:translate-y-0"
>
<h4 class="font-semibold text-xl">Jalapenos</h4>
<p>
Add jalapenos to your pizza and your taste buds will be satisfied
while your mouth is on fire in the best way possible. If you’re
feeling extra spicy, add some sriracha to your pizza to make it
even hotter.
</p>
<div
class="py-2 px-5 bg-white mt-2 w-fit rounded-md text-sm font-semibold"
>
Order Now
</div>
</div>
</div>
<div
class="group bg-red-400 w-80 h-40 hover:h-auto shadow-md rounded-md overflow-hidden"
>
<div class="h-40 relative overflow-hidden">
<img
src="pizz3.jpg"
class="absolute top-0 left-0 h-full w-full object-cover"
/>
</div>
<div
class="p-5 opacity-0 group-hover:opacity-100 duration-[1s] -translate-y-6 group-hover:translate-y-0"
>
<h4 class="font-semibold text-xl">Bacon</h4>
<p>
verybody loves bacon. You can put bacon on anything and know that
it’s going to be delicious. So, why not add it to your pizza too?
You can add bacon to almost any type of pizza and it is likely to
be amazing.
</p>
<div
class="py-2 px-5 bg-white mt-2 w-fit rounded-md text-sm font-semibold"
>
Order Now
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Video Tutorial
Don’t forget to Subscribe to our YouTube Channel for more
