1<div class="mx-auto max-w-md rounded-lg bg-white p-8 shadow-md dark:bg-gray-800 m-3">
2  <div class="text-center">
3    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Subscribe to Our Newsletter</h2>
4    <p class="mt-2 text-gray-600 dark:text-gray-300">Stay updated with the latest news, trends, and special offers. Don't miss out on our exciting updates.</p>
5  </div>
6
7  <div class="mt-6">
8    <form class="space-y-4">
9      <div>
10        <label for="email" class="sr-only">Enter your email</label>

1<div class="relative isolate m-4 mx-auto max-w-2xl overflow-hidden rounded-sm border border-gray-200 bg-gradient-to-br from-indigo-50 to-purple-50 p-5 shadow-2xl dark:border-gray-700 dark:from-gray-900 dark:to-gray-800">
2  <div class="absolute inset-0 -z-10">
3    <div class="absolute top-1/2 left-1/2 h-64 w-64 -translate-x-1/2 -translate-y-1/2 animate-[pulse_8s_infinite] rounded-full bg-purple-300 opacity-20 blur-3xl dark:bg-purple-900"></div>
4    <div class="absolute top-0 right-0 h-32 w-32 animate-[float_6s_ease-in-out_infinite_reverse] rounded-full bg-blue-300 opacity-30 blur-xl dark:bg-blue-800"></div>
5    <div class="absolute bottom-0 left-0 h-24 w-24 animate-[float_8s_ease-in-out_infinite_2s] rounded-full bg-indigo-300 opacity-30 blur-lg dark:bg-indigo-800"></div>
6  </div>
7
8  <div class="text-center">
9    <div class="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 shadow-lg dark:from-purple-500 dark:to-indigo-500">
10      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

1<div class="relative isolate mx-auto max-w-2xl overflow-hidden rounded-xl border border-gray-200 bg-white p-5 font-sans shadow-[0_0_40px_-15px_rgba(124,58,237,0.5)] md:p-12 dark:border-gray-800 dark:bg-gray-900">
2  <div class="absolute inset-0 -z-10 opacity-20">
3    <div class="absolute inset-0 bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[length:24px_24px] dark:bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)]"></div>
4    <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(107,114,128,0.15)_0%,transparent_70%)] dark:bg-[radial-gradient(circle_at_center,rgba(99,102,241,0.15)_0%,transparent_70%)]"></div>
5  </div>
6
7  <div class="absolute -top-20 -left-20 h-64 w-64 animate-[float_15s_ease-in-out_infinite] rounded-full bg-purple-600/10"></div>
8  <div class="absolute -right-10 -bottom-10 h-80 w-80 animate-[float_18s_ease-in-out_infinite_reverse] rounded-full bg-blue-600/10"></div>
9
10  <div class="relative z-10 text-center">

1   <div class="relative flex items-center justify-center overflow-hidden bg-gradient-to-br from-purple-100 via-indigo-100 to-pink-100 dark:from-purple-900 dark:via-indigo-900 dark:to-pink-800 px-4 py-10">
2      <div class="absolute top-0 left-0 h-full w-full opacity-20">
3        <svg
4          class="h-full w-full"
5          xmlns="http://www.w3.org/2000/svg"
6          viewBox="0 0 1000 1000"
7          preserveAspectRatio="none"
8        >
9          <path fill="url(#grad)" d="M0,0V1000H1000V0Z" opacity="0.25"></path>
10          <defs>

1<div class="relative flex items-center justify-center overflow-hidden bg-gradient-to-br from-gray-900 via-purple-900 to-violet-800 px-4 py-10">
2   <div class="absolute inset-0 overflow-hidden opacity-40">
3    <div class="animate-float absolute -top-20 -left-20 h-64 w-64 rounded-full bg-cyan-400 opacity-20 mix-blend-screen blur-3xl filter"></div>
4    <div class="animate-float-delay absolute right-0 bottom-10 h-96 w-96 rounded-full bg-pink-500 opacity-20 mix-blend-screen blur-3xl filter"></div>
5  </div>
6
7  <div class="relative w-full max-w-2xl overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-10 shadow-2xl shadow-black/30 backdrop-blur-md">
8     <div class="absolute -top-1 -left-1 h-12 w-12 border-t-2 border-l-2 border-cyan-300"></div>
9    <div class="absolute -right-1 -bottom-1 h-12 w-12 border-r-2 border-b-2 border-pink-300"></div>
10

1<div class="relative flex items-center justify-center overflow-hidden bg-white px-4 py-10 dark:bg-black">
2  <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMCAwaDQwdjQwSDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTAgMGwyMCAyME0yMCAwTDAgMjAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+')] opacity-30"></div>
3
4  <div class="group relative w-full max-w-2xl rounded-xl border-2 border-transparent bg-gradient-to-br from-purple-600 to-pink-500 p-1 shadow-lg shadow-purple-500/20 dark:from-purple-800 dark:to-pink-700">
5    <div class="rounded-xl bg-white p-8 text-center dark:bg-black">
6      <div class="mb-8">
7        <svg class="mx-auto h-16 w-16 text-pink-400 drop-shadow-[0_0_8px_rgba(236,72,153,0.6)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
8          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
9        </svg>
10      </div>