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:
- Minimal Newsletter UI
- Standout Newsletter UI
Newsletter Component Structure
Newsletters have mainly three main components:
- Main Title - Catchy headline, e.g., "Subscribe to [Your Newsletter Name]"
- Subtitle/description - A short description of your newsletter that compels users to sign up
- Input component with submit button
React Newsletter Component Functionality
- State Management: The
email
state tracks the input, whilestatus
monitors the button and message changes based on the submission state. - Dummy API Call: The
handleSubmit
function simulates an API call with a 2-second delay. - Dynamic Button UI: The button shows "Subscribing..." and disables itself during loading.
- 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
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
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.