Product E-commerce Card

<div class="max-w-[280px] bg-white p-4 rounded-2xl border border-slate-200 group mx-6">
        <div class="relative aspect-square bg-slate-100 rounded-xl mb-4 overflow-hidden">
            <div
                class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/10 z-10 backdrop-blur-[2px]">
                <button
                    class="bg-white text-black px-4 py-2 rounded-lg font-bold text-sm shadow-xl active:scale-95 transition-all">Quick
                    View</button>
            </div>
            <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&q=80&w=400"
                class="w-full h-full object-contain">
        </div>
        <div class="flex justify-between items-start mb-1">
            <h4 class="font-bold text-slate-900">Nike Air Max</h4>
            <span class="font-bold text-indigo-600">$120</span>
        </div>
        <p class="text-xs text-slate-500 mb-4">Unisex Sneakers • 4 Colors</p>
        <button
            class="w-full py-2 bg-slate-900 text-white rounded-lg text-sm font-bold hover:bg-black transition-colors active:scale-95 transition-all">Add
            to Cart</button>
    </div>