mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
21 lines
1.2 KiB
HTML
21 lines
1.2 KiB
HTML
<!-- From Uiverse.io by carlosepcc - Tags: simple, card, dark, product, modern, price, liquid -->
|
|
<div class="card m-auto text-gray-300 w-[clamp(260px,80%,300px)] hover:brightness-90 transition-all cursor-pointer group bg-gradient-to-tl from-gray-900 to-gray-950 hover:from-gray-800 hover:to-gray-950 border-r-2 border-t-2 border-gray-900 m-4 rounded-lg overflow-hidden relative">
|
|
<div class="px-8 py-10">
|
|
<div class="bg-orange-500 w-10 h-10 rounded-full rounded-tl-none mb-4 group-hover:-translate-y-1 group-hover:shadow-xl group-hover:shadow-red-900 transition-all"></div>
|
|
<div class="uppercase font-bold text-xl">
|
|
CHAMONILLE
|
|
</div>
|
|
<div class="text-gray-300 uppercase tracking-widest">
|
|
NATURAL, OIL
|
|
</div>
|
|
<div class="text-gray-400 mt-8">
|
|
<p class="font-bold">39.00 MLC</p>
|
|
<p>Perfect everywhere</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="h-2 w-full bg-gradient-to-l via-yellow-500 group-hover:blur-xl blur-2xl m-auto rounded transition-all absolute bottom-0"></div>
|
|
<div class="h-0.5 group-hover:w-full bg-gradient-to-l via-yellow-950 group-hover:via-yellow-500 w-[70%] m-auto rounded transition-all"></div>
|
|
</div>
|
|
|