Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Product Card</title> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-100 flex items-center justify-center min-h-screen p-4"> <!-- Product Card Container --> <div class="max-w-sm w-full bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden"> <!-- Product Image --> <a href="#"> <img class="rounded-t-lg w-full h-48 object-cover" src="https://placehold.co/600x400/3498db/ffffff?text=Product" alt="product image" /> </a> <!-- Card Content --> <div class="p-5"> <!-- Product Category --> <span class="text-xs text-gray-500 uppercase font-semibold">Category</span> <!-- Product Name --> <h3 class="text-lg font-bold tracking-tight text-gray-900 mt-1"> <a href="#">Modern & Sleek Smartwatch</a> </h3> <!-- Price and Rating --> <div class="flex items-center justify-between mt-2.5 mb-5"> <span class="text-2xl font-extrabold text-gray-900">$599</span> <!-- A small star rating example --> <div class="flex items-center"> <svg class="w-4 h-4 text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20"> <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/> </svg> <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded ml-2">5.0</span> </div> </div> <!-- Add to Cart Button --> <button class="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center transition-colors duration-300"> Add to Cart </button> </div> </div> </body> </html>
