Product Card in tailwind by Editorial Staff Output View Horizontal Vertical HTML CSS JS Tidy <div class="flex justify-center bg-blue-100"> <div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden my-10 "> <div class="px-4 py-2"> <h1 class="text-gray-900 font-bold text-3xl uppercase">Jordan 1 Retro</h1> <p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p> </div> <img class="h-56 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1705096953495-8ea06879b986?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Jordan 1 Retro"> <div class="flex items-center justify-between px-4 py-2 bg-gray-900"> <h1 class="text-gray-200 font-bold text-xl">$229</h1> <button class="px-3 py-1 bg-gray-200 text-sm text-gray-900 font-semibold rounded">Add to card</button> </div> </div> </div> HTML CSS JS Tidy HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Product card component in tailwind css. Its features has a add to card button with price, title, short description. Catagory Tailwind Tags Product Card Resource Add External Stylesheets and Script <link href="https://unpkg.com/tailwindcss@1.4.6/dist/tailwind.min.css" rel="stylesheet">
