Beautiful, Responsive React Newsletter Components with Tailwind CSS

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

We add a well-designed newsletter section 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.

Here, we’ll introduce 3 responsive newsletter component designs built with React and Tailwind CSS.

Variants of Newsletter Components:

1. Minimal Newsletter UI
2. Standout Newsletter UI
3. Gradient Newsletter UI

Newsletter Component Structure

Newsletters have mainly three main components:

1. Main Title - Catchy headline, e.g., "Subscribe to [Your Newsletter Name]"
2. Subtitle/description - A short description of your newsletter that compels users to sign up
3. Input component with submit button

React Newsletter Component Functionality

1. State Management: The email state tracks the input, while status monitors the button and message changes based on the submission state.
2. Dummy API Call: The handleSubmit function simulates an API call with a 2-second delay.
3. Dynamic Button UI: The button shows "Subscribing..." and disables itself during loading.
4. Feedback Messages: Success and error messages are shown based on the status after the API call attempt.

Minimal Tailwind Newsletter Component

The Minimal Newsletter UI offers a simple and clean design, ideal for projects that emphasize a minimalist aesthetic.

React Tailwind Minimal Newsletter Component Code

Copy
1import { useState } from 'react'
2
3const Newsletter = () => {
4  const [email, setEmail] = useState('')
5  const [status, setStatus] = useState<
6    'idle' | 'loading' | 'success' | 'error'
7  >('idle')
8
9  const handleSubmit = async (e: React.FormEvent) => {
10    e.preventDefault()
11    setStatus('loading')
12
13    try {
14      // Simulate an API call
15      await new Promise((resolve) => setTimeout(resolve, 2000))
16      setStatus('success')
17    } catch (error) {
18      setStatus('error')
19    }
20  }
21
22  return (
23    <>
24      <hr />
25      <section className="flex flex-col items-center justify-center py-16">
26        <h3 className="font-heading text-center text-2xl font-semibold uppercase tracking-wider text-[#111111]">
27          Flexy UI{' '}
28          <span className="mt-2 inline-block text-[#4491FB] md:mt-3">
29            Newsletter
30          </span>
31        </h3>
32        <p className="mb-8 mt-2 max-w-[550px] text-center text-base text-[#111111]">
33          Build better and faster UIs.
34          <span className="block">
35            Get the latest components and hooks directly in your inbox. No spam!
36          </span>
37        </p>
38        <form onSubmit={handleSubmit} className="gap-4 md:flex">
39          <input
40            type="email"
41            value={email}
42            onChange={(e) => setEmail(e.target.value)}
43            id="email"
44            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"
45            placeholder="yourname@email.com"
46            required
47          />
48          <button
49            type="submit"
50            disabled={status === 'loading'}
51            className={`mt-4 w-full rounded px-4 py-2 text-white focus:outline-none focus:ring-2 md:mt-auto md:w-auto ${
52              status === 'loading'
53                ? 'bg-gray-400'
54                : 'bg-blue-500 hover:bg-blue-600 focus:ring-blue-300'
55            }`}
56          >
57            {status === 'loading' ? 'Submitting...' : 'Submit'}
58          </button>
59        </form>
60        {status === 'success' && (
61          <p className="mt-4 text-green-500">
62            Thanks for subscribing! Please confirm your email.
63          </p>
64        )}
65        {status === 'error' && (
66          <p className="mt-4 text-red-500">
67            Something went wrong. Please try again.
68          </p>
69        )}
70      </section>
71    </>
72  )
73}
74
75export default Newsletter

Standout Newsletter Component

The Standout Newsletter UI offers a more visually engaging design with a background gradient, perfect for high-impact sections on modern websites.

Standout Tailwind CSS Newsletter Component Code

Copy
1import { useState } from 'react'
2
3const Newsletter = () => {
4  const [email, setEmail] = useState('')
5  const [status, setStatus] = useState<
6    'idle' | 'loading' | 'success' | 'error'
7  >('idle')
8
9  const handleSubmit = async (e: React.FormEvent) => {
10    e.preventDefault()
11    setStatus('loading')
12
13    try {
14      // Simulate an API call
15      await new Promise((resolve) => setTimeout(resolve, 2000))
16      setStatus('success')
17    } catch (error) {
18      setStatus('error')
19    }
20  }
21
22  return (
23    <div className="relative mx-auto my-12 max-w-5xl rounded-xl border bg-gray-800 p-7 md:grid md:grid-cols-2 md:rounded-l-xl md:rounded-r-none md:p-12">
24      <div className="max-w-lg">
25        <h2 className="mb-4 text-2xl font-bold text-gray-100 md:text-3xl">
26          Stay Updated with the Latest in Web Development
27        </h2>
28        <p className="text-md mb-6 font-medium leading-7 text-gray-300 md:text-lg">
29          Join our community of passionate developers! <br /> Receive monthly
30          updates on the latest tools, frameworks, and techniques that help you
31          level up your development stack.
32        </p>
33        <form
34          onSubmit={handleSubmit}
35          className="mt-4 flex flex-col gap-3 sm:flex-row"
36        >
37          <input
38            type="email"
39            value={email}
40            onChange={(e) => setEmail(e.target.value)}
41            placeholder="Enter your email"
42            className="w-full rounded-lg border border-gray-600 bg-gray-700 p-3 text-gray-200 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400"
43            required
44          />
45          <button
46            type="submit"
47            disabled={status === 'loading'}
48            className={`rounded-lg px-5 py-3 font-semibold text-white transition-colors ${
49              status === 'loading'
50                ? 'bg-gray-500'
51                : 'bg-blue-600 hover:bg-blue-700'
52            }`}
53          >
54            {status === 'loading' ? 'Subscribing...' : 'Subscribe'}
55          </button>
56        </form>
57        {status === 'success' && (
58          <p className="mt-4 text-green-500">
59            Thanks for subscribing! Please confirm your email.
60          </p>
61        )}
62        {status === 'error' && (
63          <p className="mt-4 text-red-500">
64            Something went wrong. Please try again.
65          </p>
66        )}
67      </div>
68      <div
69        className="absolute right-0 hidden h-full w-2/5 bg-gradient-to-t from-[#4969b8] to-[#7fa8e0] md:block"
70        style={{
71          clipPath: 'polygon(0 0, 10% 100%, 100% 100%, 100% 0)',
72        }}
73      ></div>
74    </div>
75  )
76}
77
78export default Newsletter

Gradient Newsletter Component

1. Gradient newsletter component is fully responsive, ensure it looks great on any device, from mobile phones to desktops.

2. Its clean design and gradient background make it visually appealing and stand out on your website.

Gradient Tailwind CSS Newsletter Component Code

Copy
1import { ChangeEvent, useState } from 'react'
2
3const Newsletter = () => {
4  const [email, setEmail] = useState('')
5  const [isLoading, setIsLoading] = useState(false)
6  const [successMessage, setSuccessMessage] = useState('')
7  const [errorMessage, setErrorMessage] = useState('')
8
9  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
10    setEmail(e.target.value)
11  }
12
13  const handleSubscribe = async () => {
14    setIsLoading(true)
15    setSuccessMessage('')
16    setErrorMessage('')
17
18    // Simulating an API call
19    setTimeout(() => {
20      setIsLoading(false)
21
22      // Simulate success or failure randomly
23      const isSuccess = Math.random() > 0.5
24      if (isSuccess) {
25        setSuccessMessage('Subscription successful! 🎉')
26      } else {
27        setErrorMessage('Subscription failed. Please try again.')
28      }
29    }, 2000)
30  }
31
32  return (
33    <div className="my-8">
34      <div
35        aria-label="Newsletter Subscription"
36        className="mx-auto flex flex-col items-center gap-4 rounded-3xl bg-gradient-to-r from-cyan-500 via-indigo-500 via-30% to-indigo-600 p-12"
37      >
38        <h3 className="text-center text-3xl font-bold text-white">
39          Codevertiser Magazine
40        </h3>
41        <p className="mb-4 w-full flex-row text-center font-medium text-gray-200 md:w-[60%] lg:w-[50%]">
42          Subscribe to get the custom React hooks, prebuilt UI components, and
43          exclusive developer resources delivered right to your inbox.
44        </p>
45
46        <div className="mt-4 flex w-full flex-col gap-3 rounded-xl bg-white p-3 md:w-[60%] md:flex-row md:items-center md:gap-4 md:p-1 lg:w-[40%]">
47          <input
48            type="email"
49            placeholder="Enter your email address"
50            className="w-full outline-none md:pl-4"
51            value={email}
52            onChange={handleChange}
53          />
54          <button
55            aria-label="Subscribe to Newsletter"
56            className={`rounded-lg px-8 py-2 text-sm font-medium text-white transition-colors duration-300 md:text-lg ${
57              isLoading
58                ? 'cursor-not-allowed bg-gray-300'
59                : 'bg-indigo-900 hover:bg-indigo-500'
60            }`}
61            onClick={handleSubscribe}
62            disabled={isLoading}
63          >
64            {isLoading ? 'Subscribing...' : 'Subscribe'}
65          </button>
66        </div>
67        {successMessage && (
68          <p className="mt-1 text-lg font-bold text-green-100">
69            {successMessage}
70          </p>
71        )}
72        {errorMessage && (
73          <p className="mt-1 text-lg font-bold text-red-800">{errorMessage}</p>
74        )}
75      </div>
76    </div>
77  )
78}
79
80export default Newsletter

Feel free to use either design in your project. These components are designed to be flexible and look great across different screen sizes, helping you grow your subscriber list effortlessly.