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 two responsive newsletter component designs built with React and Tailwind CSS.

Variants of Newsletter Components:

  1. Minimal Newsletter UI
  2. Standout 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.

Tailwind Minimal Newsletter UI

React Tailwind Minimal Newsletter Component Code

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.

Tailwind Standout Newsletter UI

Standout Tailwind CSS Newsletter Component Code

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

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.


Flexy UI Newsletter

Build better and faster UIs.Get the latest components and hooks directly in your inbox. No spam!