Form by Javierrocadev

1<form
2  class="text-neutral-800 py-6 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"
3>
4  <div
5    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"
6  >
7    <span class="font-extrabold text-2xl text-violet-600"
8      >Get more updates...</span
9    >
10    <p class="text-neutral-700">
11      Sign up for our newsletter and you'll be the first to find out about new
12      features
13    </p>
14  </div>
15  <div class="flex gap-1">
16    <div
17      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"
18    >
19      <input
20        type="text"
21        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"
22        placeholder="Mail..."
23      />
24    </div>
25    <button
26      class="bg-violet-500 text-neutral-50 p-2 rounded-lg hover:bg-violet-400"
27    >
28      Subscribe
29    </button>
30  </div>
31</form>
32