Product Card

Introduction of Product Card In Tailwind CSS

Here today we will see that how to make a html product card component with the help of HTML and Tailwind. In this product card html you will see that the image and details will be given and when user will hover on the image then image will change. This is very useful as you can use it in your e-commerce like website project or you can do this for your practice. You can also see this type of card in e-commerce like website.

Let’s start making this Product Card Tailwind CSS by following the code of HTML and Tailwind step by step to understand it properly. This is not very complicated, you just need to focus carefully to learn it.

HTML

First, we will make the structure of the Product Card Tailwind CSS . In this, there will first be a parent div in which all the details of the Product Card In Tailwind CSS will be contained, including images. Then we will insert two images, one of which will be shown by default and the other will come on hover. Then there will be the name and price of the product in the heading and span tag, and at the end, we shall also make a button to add the product to the card with the logo of the cart.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="/dist/output.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://kit.fontawesome.com/0f01d8d2a0.js" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
    <div class="grid h-screen bg-black lg:grid-cols-3 justify-center">
        <div></div>
        <div class="group border-gray-100/30 flex w-full max-w-xs flex-col self-center overflow-hidden rounded-lg border bg-gray-700 shadow-md">
          <a class="relative mx-3 mt-3 flex h-60 overflow-hidden rounded-xl" href="#">
            <img class="peer absolute top-0 right-0 h-full w-full object-cover" src="https://images.unsplash.com/flagged/photo-1556637640-2c80d3201be8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8c25lYWtlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60?a=b" alt="product image" />
            <img class="peer peer-hover:right-0 absolute top-0 -right-96 h-full w-full object-cover transition-all delay-100 duration-1000 hover:right-0" src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8c25lYWtlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="product image" />
            <svg class="group-hover:animate-ping group-hover:opacity-30 peer-hover:opacity-0 pointer-events-none absolute inset-x-0 bottom-5 mx-auto text-3xl text-white transition-opacity" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M2 10a4 4 0 0 1 4-4h20a4 4 0 0 1 4 4v10a4 4 0 0 1-2.328 3.635a2.996 2.996 0 0 0-.55-.756l-8-8A3 3 0 0 0 14 17v7H6a4 4 0 0 1-4-4V10Zm14 19a1 1 0 0 0 1.8.6l2.7-3.6H25a1 1 0 0 0 .707-1.707l-8-8A1 1 0 0 0 16 17v12Z" /></svg>
            <!-- <span class="absolute top-0 left-0 m-2 rounded-full bg-black px-2 text-center text-sm font-medium text-white">39% OFF</span> -->
          </a>
          <div class="mt-4 px-5 pb-5">
            <a href="#">
              <h5 class="text-xl tracking-tight text-white">Nike Air MX Super 2500 - Red</h5>
            </a>
            <div class="mt-2 mb-5 flex items-center justify-between">
              <p>
                <span class="text-3xl font-bold text-white">$449</span>
                <span class="text-sm text-white line-through">$699</span>
              </p>
            </div>
            <a href="#" class="hover:border-white/40 flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-5 py-2.5 text-center text-sm font-medium text-white focus:outline-none focus:ring-4 focus:ring-blue-300">
              <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
              </svg>
              Add to cart</a
            >
          </div>
        </div>
      </div>
      
</body>
</html>

Tailwind

After making the structure of the Product Card In Tailwind CSS, it’s time to design the card with the help of TailwindCss ( a framework of CSS used to design and make websites responsive). First, we need to move the card to the center of the screen. Then we will design the card, starting with the parent div background and border settings, and then proceed to the content of the div, like adjusting the size and positions of images. One image will show in default case, and when the user hovers on the image, the previous image will be hidden and a new one will be displayed with some transition. Now we will set the name, price, and “add to card” button, as you can see in the result.

@tailwind base;
@tailwind components;
@tailwind utilities;

OutPut of Html Product Card Component

Finally, we made the Hovering product card with the help of HTML tailwind, using the following code step by step carefully. You can also make such a creative project; you just need to follow our tutorial. If you want the source code, then click on the button given below.