Tailwind product Card by Editorial Staff Output View Horizontal Vertical HTML CSS JS Tidy <div class="p-24 flex flex-wrap items-center justify-center"> <div class="flex-shrink-0 m-6 relative overflow-hidden bg-red-500 rounded-lg max-w-xs shadow-lg"> <svg class="absolute bottom-0 left-0 mb-8" viewBox="0 0 375 283" fill="none" style="transform: scale(1.5); opacity: 0.1;"> <rect x="159.52" y="175" width="152" height="152" rx="8" transform="rotate(-45 159.52 175)" fill="white"/> <rect y="107.48" width="152" height="152" rx="8" transform="rotate(-45 0 107.48)" fill="white"/> </svg> <div class="relative pt-10 px-10 flex items-center justify-center"> <div class="block absolute w-48 h-48 bottom-0 left-0 -mb-24 ml-3" style="background: radial-gradient(black, transparent 60%); transform: rotate3d(0, 0, 1, 20deg) scale3d(1, 0.6, 1); opacity: 0.2;"></div> <img class="relative w-40" src="https://images.unsplash.com/photo-1509423350716-97f9360b4e09?q=80&w=2835&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""> </div> <div class="relative text-white px-6 pb-6 mt-6"> <span class="block opacity-75 -mb-1">Indoor</span> <div class="flex justify-between"> <span class="block font-semibold text-xl">Peace Lily</span> <span class="block bg-white rounded-full text-red-500 text-xs font-bold px-3 py-2 leading-none flex items-center">$9.00</span> </div> </div> </div> <div class="flex-shrink-0 m-6 relative overflow-hidden bg-green-500 rounded-lg max-w-xs shadow-lg"> <svg class="absolute bottom-0 left-0 mb-8" viewBox="0 0 375 283" fill="none" style="transform: scale(1.5); opacity: 0.1;"> <rect x="159.52" y="175" width="152" height="152" rx="8" transform="rotate(-45 159.52 175)" fill="white"/> <rect y="107.48" width="152" height="152" rx="8" transform="rotate(-45 0 107.48)" fill="white"/> </svg> <div class="relative pt-10 px-10 flex items-center justify-center"> <div class="block absolute w-48 h-48 bottom-0 left-0 -mb-24 ml-3" style="background: radial-gradient(black, transparent 60%); transform: rotate3d(0, 0, 1, 20deg) scale3d(1, 0.6, 1); opacity: 0.2;"></div> <img class="relative w-40" src="https://images.unsplash.com/photo-1508022713622-df2d8fb7b4cd?q=80&w=2835&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""> </div> <div class="relative text-white px-6 pb-6 mt-6"> <span class="block opacity-75 -mb-1">Outdoor</span> <div class="flex justify-between"> <span class="block font-semibold text-xl">Cactus </span> <span class="block bg-white rounded-full text-teal-500 text-xs font-bold px-3 py-2 leading-none flex items-center">$22.00</span> </div> </div> </div> <div class="flex-shrink-0 m-6 relative overflow-hidden bg-orange-500 rounded-lg max-w-xs shadow-lg"> <svg class="absolute bottom-0 left-0 mb-8" viewBox="0 0 375 283" fill="none" style="transform: scale(1.5); opacity: 0.1;"> <rect x="159.52" y="175" width="152" height="152" rx="8" transform="rotate(-45 159.52 175)" fill="white"/> <rect y="107.48" width="152" height="152" rx="8" transform="rotate(-45 0 107.48)" fill="white"/> </svg> <div class="relative pt-10 px-10 flex items-center justify-center"> <div class="block absolute w-48 h-48 bottom-0 left-0 -mb-24 ml-3" style="background: radial-gradient(black, transparent 60%); transform: rotate3d(0, 0, 1, 20deg) scale3d(1, 0.6, 1); opacity: 0.2;"></div> <img class="relative w-40" src="https://images.unsplash.com/photo-1609061800916-894a886af7fa?q=80&w=2921&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""> </div> <div class="relative text-white px-6 pb-6 mt-6"> <span class="block opacity-75 -mb-1">Outdoor</span> <div class="flex justify-between"> <span class="block font-semibold text-xl">Monstera</span> <span class="block bg-white rounded-full text-orange-500 text-xs font-bold px-3 py-2 leading-none flex items-center">$33.50</span> </div> </div> </div> <div class="flex-shrink-0 m-6 relative overflow-hidden bg-blue-500 rounded-lg max-w-xs shadow-lg"> <svg class="absolute bottom-0 left-0 mb-8" viewBox="0 0 375 283" fill="none" style="transform: scale(1.5); opacity: 0.1;"> <rect x="159.52" y="175" width="152" height="152" rx="8" transform="rotate(-45 159.52 175)" fill="white"/> <rect y="107.48" width="152" height="152" rx="8" transform="rotate(-45 0 107.48)" fill="white"/> </svg> <div class="relative pt-10 px-10 flex items-center justify-center"> <div class="block absolute w-48 h-48 bottom-0 left-0 -mb-24 ml-3" style="background: radial-gradient(black, transparent 60%); transform: rotate3d(0, 0, 1, 20deg) scale3d(1, 0.6, 1); opacity: 0.2;"></div> <img class="relative w-40" src="https://images.unsplash.com/photo-1509423350716-97f9360b4e09?q=80&w=2835&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""> </div> <div class="relative text-white px-6 pb-6 mt-6"> <span class="block opacity-75 -mb-1">Indoor</span> <div class="flex justify-between"> <span class="block font-semibold text-xl">Lily</span> <span class="block bg-white rounded-full text-blue-500 text-xs font-bold px-3 py-2 leading-none flex items-center">$19.00</span> </div> </div> </div> </div> HTML CSS JS Tidy HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Simple product Card component built on tailwind CSS, with price and feature image. 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">
