Bootdey

e commerce product list

Ready-to-use e commerce product list using Tailwind utility classes. No dependencies, no setup—just grab the code and ship.

Preview HTML

HTML code

This is the html code used to create this tailwind snippet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>E-commerce Product List - Tailwind CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen pt-5">
<div class="container mx-auto px-4">
<div class="flex flex-wrap -mx-3">

    <div class="w-full sm:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="bg-white border border-gray-200 rounded-sm overflow-hidden 
                     hover:border-transparent hover:shadow-lg hover:shadow-gray-400/50 
                     transition duration-300">
            
            <div class="text-center py-24 bg-gray-50 text-gray-400 font-semibold text-lg">
                [ INFO ]
            </div>
            
            <div class="pt-4 px-5 pb-5 relative">
                
                <span class="absolute -top-8 right-0 text-sm font-semibold text-white bg-emerald-500 px-3 py-1.5">
                    $10
                </span>
                
                <small class="text-gray-500 text-xs">Category</small>
                
                <a href="#" class="text-base font-semibold text-gray-700 block my-1 hover:text-emerald-500"> Product</a>

                <div class="text-xs mt-1 text-gray-600">
                    Many desktop publishing packages and web page editors now.
                </div>
                
                <div class="mt-4 text-right">
                    <a href="#" class="inline-flex items-center text-xs py-1 px-2 border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white rounded-sm transition duration-150 ease-in-out">
                        Info
                        <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="w-full sm:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="bg-white border border-gray-200 rounded-sm overflow-hidden 
                     hover:border-transparent hover:shadow-lg hover:shadow-gray-400/50 
                     transition duration-300">
            <div class="text-center py-24 bg-gray-50 text-gray-400 font-semibold text-lg">
                [ INFO ]
            </div>
            <div class="pt-4 px-5 pb-5 relative">
                <span class="absolute -top-8 right-0 text-sm font-semibold text-white bg-emerald-500 px-3 py-1.5">
                    $10
                </span>
                <small class="text-gray-500 text-xs">Category</small>
                <a href="#" class="text-base font-semibold text-gray-700 block my-1 hover:text-emerald-500"> Product</a>

                <div class="text-xs mt-1 text-gray-600">
                    Many desktop publishing packages and web page editors now.
                </div>
                <div class="mt-4 text-right">
                    <a href="#" class="inline-flex items-center text-xs py-1 px-2 border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white rounded-sm transition duration-150 ease-in-out">
                        Info
                        <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="w-full sm:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="bg-white border border-transparent shadow-lg shadow-gray-400/50 rounded-sm overflow-hidden">
            <div class="text-center py-24 bg-gray-50 text-gray-400 font-semibold text-lg">
                [ INFO ]
            </div>
            <div class="pt-4 px-5 pb-5 relative">
                <span class="absolute -top-8 right-0 text-sm font-semibold text-white bg-emerald-500 px-3 py-1.5">
                    $10
                </span>
                <small class="text-gray-500 text-xs">Category</small>
                <a href="#" class="text-base font-semibold text-gray-700 block my-1 hover:text-emerald-500"> Product</a>

                <div class="text-xs mt-1 text-gray-600">
                    Many desktop publishing packages and web page editors now.
                </div>
                <div class="mt-4 text-right">
                    <a href="#" class="inline-flex items-center text-xs py-1 px-2 border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white rounded-sm transition duration-150 ease-in-out">
                        Info
                        <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="w-full sm:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="bg-white border border-gray-200 rounded-sm overflow-hidden 
                     hover:border-transparent hover:shadow-lg hover:shadow-gray-400/50 
                     transition duration-300">
            <div class="text-center py-24 bg-gray-50 text-gray-400 font-semibold text-lg">
                [ INFO ]
            </div>
            <div class="pt-4 px-5 pb-5 relative">
                <span class="absolute -top-8 right-0 text-sm font-semibold text-white bg-emerald-500 px-3 py-1.5">
                    $10
                </span>
                <small class="text-gray-500 text-xs">Category</small>
                <a href="#" class="text-base font-semibold text-gray-700 block my-1 hover:text-emerald-500"> Product</a>
                
                <div class="text-xs mt-1 text-gray-600">
                    Many desktop publishing packages and web page editors now.
                </div>
                <div class="mt-4 text-right">
                    <a href="#" class="inline-flex items-center text-xs py-1 px-2 border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white rounded-sm transition duration-150 ease-in-out">
                        Info
                        <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>