mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
14 lines
1.5 KiB
HTML
14 lines
1.5 KiB
HTML
<!-- From Uiverse.io by Javierrocadev - Tags: newsletter, form, light, blur filter, violet, rose -->
|
|
<form class="text-neutral-800 relative overflow-hidden flex flex-col justify-around w-96 h-44 border border-neutral-500 rounded-lg bg-neutral-50 p-3 px-6">
|
|
<div class="before:absolute before:w-32 before:h-20 before:right-2 before:bg-rose-300 before:-z-10 before:rounded-full before:blur-xl before:-top-12 z-10 after:absolute after:w-24 after:h-24 after:bg-purple-300 after:-z-10 after:rounded-full after:blur after:-top-12 after:-right-6">
|
|
<span class="font-extrabold text-2xl text-violet-600">Get more updates...</span>
|
|
<p class="text-neutral-700">Sign up for our newsletter and you'll be the first to find out about new features</p>
|
|
</div>
|
|
<div class="flex gap-1">
|
|
<div class="relative rounded-lg w-64 overflow-hidden before:absolute before:w-12 before:h-12 before:content[''] before:right-0 before:bg-violet-500 before:rounded-full before:blur-lg after:absolute after:z-10 after:w-20 after:h-20 after:content[''] after:bg-rose-300 after:right-12 after:top-3 after:rounded-full after:blur-lg">
|
|
<input placeholder="Mail..." class="relative bg-transparent ring-0 outline-none border border-neutral-500 text-neutral-900 placeholder-violet-700 text-sm rounded-lg focus:ring-violet-500 placeholder-opacity-60 focus:border-violet-500 block w-full p-2.5 checked:bg-emerald-500" type="text">
|
|
</div>
|
|
<button class="bg-violet-500 text-neutral-50 p-2 rounded-lg hover:bg-violet-400">Subscribe</button>
|
|
</div>
|
|
</form>
|
|
|