MiniStore - Toko Online Sederhana

by oktaviardi pratama

HTML

<!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Header / Navigation -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
            <a href="#" class="text-xl font-bold text-indigo-600 tracking-wide">MINISTORE</a>
            
            <!-- Tombol Keranjang -->
            <button class="relative p-2 text-gray-600 hover:text-indigo-600 transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                </svg>
                <span class="absolute top-0 right-0 bg-indigo-600 text-white text-xs w-4 h-4 rounded-full flex items-center justify-center font-bold">2</span>
            </button>
        </div>
    </nav>

    <!-- Banner Selamat Datang -->
    <header class="bg-indigo-50 py-12 px-4 text-center">
        <h1 class="text-3xl font-extrabold text-gray-900 mb-2">Koleksi Produk Pilihan</h1>
        <p class="text-sm text-gray-600 max-w-md mx-auto">Belanja mudah, cepat, dan terpercaya langsung dari *gadget* Anda.</p>
    </header>

    <!-- Katalog Produk -->
    <main class="max-w-6xl mx-auto px-4 py-10">
        <!-- Grid layout: 1 kolom di HP, 2 di tablet, 4 di laptop -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            
            <!-- Produk 1 -->
            <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition border border-gray-100 overflow-hidden flex flex-col">
                <img src="https://images.unsplash.com/photo-1521572267360-ee0c2909d518?w=500&auto=format&fit=crop&q=60" alt="Kaos Polos" class="w-full h-48 object-cover">
                <div class="p-4 flex flex-col flex-1 justify-between">
         ...