Newsletter form tailwindcss

Newsletter form tailwindcss

In today's digital era, newsletters remain a powerful tool for engaging with audiences and sharing valuable content. Whether you're a blogger, business owner, or marketer, having an eye-catching newsletter signup form on your website can significantly boost your subscriber count. In this blog post, we'll explore how to create a stylish and functional newsletter form using Tailwind CSS

Why Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that offers a unique approach to styling web applications. With its extensive set of pre-designed utility classes, Tailwind allows developers to rapidly prototype and customize their designs without having to write custom CSS from scratch. This makes it an excellent choice for building modern and responsive user interfaces, including newsletter signup forms.

Powered by Froala Editor

<script src="https://cdn.tailwindcss.com"></script>                                <form
  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 mx-auto" 
>
  <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
        type="text"
        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"
        placeholder="Mail..."
      />
    </div>
    <button
      class="bg-violet-500 text-neutral-50 p-2 rounded-lg hover:bg-violet-400"
    >
      Subscribe
    </button>
  </div>
</form>

Socials

Recent Components

Pages

Ready to discuss your project requirements?

Get In Touch