mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
35 lines
No EOL
1.2 KiB
HTML
35 lines
No EOL
1.2 KiB
HTML
<!-- From Uiverse.io by Uncannypotato69 - Tags: simple, purple, gradient, card, dark, tailwindcss -->
|
|
<div
|
|
class="h-[12em] w-[18em] border-2 border-[rgba(75,30,133,0.5)] rounded-[1.5em] bg-gradient-to-br from-[rgba(75,30,133,1)] to-[rgba(75,30,133,0.01)] text-white font-nunito p-[1em] flex justify-center items-left flex-col gap-[0.75em] backdrop-blur-[12px]"
|
|
>
|
|
<div>
|
|
<h1 class="text-[2em] font-medium">Heading</h1>
|
|
<p class="text-[0.85em]">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolorum
|
|
blanditiis pariatur sequi magni.
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
class="h-fit w-fit px-[1em] py-[0.25em] border-[1px] rounded-full flex justify-center items-center gap-[0.5em] overflow-hidden group hover:translate-y-[0.125em] duration-200 backdrop-blur-[12px]"
|
|
>
|
|
<p>Button</p>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="white"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1"
|
|
stroke="currentColor"
|
|
class="w-6 h-6 group-hover:translate-x-[10%] duration-300"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
|
|
|