mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
37 lines
No EOL
1.6 KiB
HTML
37 lines
No EOL
1.6 KiB
HTML
<!-- From Uiverse.io by Javierrocadev - Tags: card, light, hover effect, candle -->
|
|
<div
|
|
class="w-64 h-64 bg-neutral-800 group relative rounded-xl flex justify-center items-center overflow-hidden"
|
|
>
|
|
<div class="w-24 h-24 bottom-8 absolute bg-red-300">
|
|
<div
|
|
class="w-24 h-24 absolute bg-neutral-50 duration-500 shadow-2xl [box-shadow:0px_-75px_55px_-30px_#262626] group-hover:[box-shadow:0px_-75px_95px_0px_#FDE047]"
|
|
>
|
|
<div class="w-24 h-24 bg-neutral-50 shadow-inner shadow-yellow-200"></div>
|
|
<div
|
|
class="w-24 h-24 bg-neutral-50 absolute -bottom-12 rounded-full [transform:_rotateX(80deg)]"
|
|
></div>
|
|
<div
|
|
class="w-24 h-24 bg-yellow-400 border-4 border-yellow-300 absolute -top-12 rounded-full [transform:_rotateX(80deg)]"
|
|
></div>
|
|
</div>
|
|
<svg
|
|
class="group-hover:-skew-x-2 duration-500 absolute rounded-full shadow-yellow-200 -top-12 left-4 fill-yellow-300 w-16 h-16"
|
|
height="100"
|
|
preserveAspectRatio="xMidYMid meet"
|
|
viewBox="0 0 100 100"
|
|
width="100"
|
|
x="0"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
y="0"
|
|
>
|
|
<path
|
|
class=""
|
|
d="M59.5,20.5a3.9,3.9,0,0,0-2.5-2,4.3,4.3,0,0,0-3.3.5,11.9,11.9,0,0,0-3.2,3.5,26,26,0,0,0-2.3,4.4,76.2,76.2,0,0,0-3.3,10.8,120.4,120.4,0,0,0-2.4,14.2,11.4,11.4,0,0,1-3.8-4.2c-1.3-2.7-1.5-6.1-1.5-10.5a4,4,0,0,0-2.5-3.7,3.8,3.8,0,0,0-4.3.9,27.7,27.7,0,1,0,39.2,0,62.4,62.4,0,0,1-5.3-5.8A42.9,42.9,0,0,1,59.5,20.5ZM58.4,70.3a11.9,11.9,0,0,1-20.3-8.4s3.5,2,9.9,2c0-4,2-15.9,5-17.9a21.7,21.7,0,0,0,5.4,7.5,11.8,11.8,0,0,1,3.5,8.4A12,12,0,0,1,58.4,70.3Z"
|
|
fill-rule="evenodd"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|