<!-- https://play.tailwindcss.com/CF9WdM43Jf -->

<section class="bg-slate-900 min-h-screen text-slate-100">

    <!-- Shopping Cart -->
    <div class="rounded-md bg-slate-800 p-8 grid grid-cols-[auto_1fr_auto_auto_auto] gap-6">
        <div class="grid gap-6 col-span-5 grid-cols-subgrid">
            <p class="col-span-2">Product</p>
            <p>Price</p>
            <p>Quantity</p>
            <p class="text-right">Total</p>
        </div>

        <div class="grid gap-6 col-span-5 grid-cols-subgrid">
            <img
                class="size-20 object-cover"
                src="https://tinyurl.com/3r25tr36"
                alt=""
            />
            <div>
                <h3 class="text-xl font-medium">
                    Stylish Tote Bag
                </h3>
                <p class="text-sm text-slate-400">
                    Women's Tote Bag Brown
                </p>
                <span class="text-sm text-slate-500">
                    #368798
                </span>
            </div>
            <p class="text-slate-400">
                $99.00
            </p>
            <label>
                <input
                    class="border border-slate-600 bg-transparent px-2 py-1 text-sm text-slate-400"
                    type="text"
                    value="1"
                    size="2"
                />
            </label>
            <p class="font-medium text-right">
                $99.00
            </p>
        </div>

        <div class="grid gap-6 col-span-5 grid-cols-subgrid">
            <img
                class="size-20 object-cover"
                src="https://tinyurl.com/3pj5teex"
                alt=""
            />
            <div>
                <h3 class="text-xl font-medium">
                    Sunglasses
                </h3>
                <p class="text-sm text-slate-400">
                    Wooden Frame
                </p>
                <span class="text-sm text-slate-500">
                    #756328
                </span>
            </div>
            <p class="text-slate-400">
                $102.00
            </p>
            <label>
                <input
                    class="border border-slate-600 bg-transparent px-2 py-1 text-sm text-slate-400"
                    type="text"
                    value="10"
                    size="2" />
            </label>
            <p class="font-medium text-right">
                $1020.00
            </p>
        </div>
    </div>
</section>