React Tailwind Newsletter Component

Any website, blog, landing page, or ecommerce site is incomplete without a newsletter.

We add newsletters to our websites to capture email addresses of users who are interested in our products and want to know more about us. It's like direct or micro marketing.

Today, I am going to share a beautifully designed responsive newsletter component for your website.

Newsletter Component Structure

Newsletters have mainly three main components:

1. Main Title - for example, Codevertiser Magazine
2. Subtitle/description - A short description of your newsletter that compels users to sign up
3. Input component with submit button

Newsletter UI

This is how our newsletter component UI looks.

React Tailwind Newsletter Component Code

const Newsletter = () => {
  return (
    <>
      <hr />
      <section className="flex flex-col items-center justify-center py-16">
        <h3 className="font-heading text-center text-2xl font-semibold uppercase tracking-wider text-[#111111]">
          Flexy UI{' '}
          <span className="mt-2 inline-block text-[#4491FB] md:mt-3">
            Newsletter
          </span>
        </h3>
        <p className="mb-8 mt-2 max-w-[550px] text-center text-base text-[#111111]">
          Build better and faster UIs.
          <span className="block">
            Get the latest components and hooks directly in your inbox. No spam!
          </span>
        </p>
        <form className="gap-4 md:flex">
          <input
            type="email"
            id="email"
            className="text-dark block w-80 rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm focus:border-blue-500 focus:ring-blue-500"
            placeholder="yourname@email.com"
            required
          />
          <button
            className={`mt-4 w-full rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 disabled:bg-gray-400 md:mt-auto md:w-auto`}
          >
            Submit
          </button>
        </form>
      </section>
    </>
  )
}

export default Newsletter
Copy

Feel free to use it in your project.