Tailwind Newsletter Component
With help of Tailwind Newsletter Component Stay updated with the latest insights, tips, and offers by subscribing to our newsletter.
All Images use in this website for showing purpose only, if you want to use in your business website please purchase it.
Tailwind NewsLetter Component with fixed background
Preview
Ready to elevate your business?
Let’s work together
Contact Us
business00196@gmail.com
Show Code
<div class="max-w-7xl my-8 mx-auto px-2 xl:px-0">
<div class="px-6 py-12 sm:px-12 sm:py-24 bg-fixed bg-cover rounded-3xl bg-[url(https://resonance.bestlooker.pro/images/full-width-images/section-bg-2.jpg)]">
<div class="grid grid-cols-1 gap-y-12 lg:grid-cols-2">
<div class="text-white">
<h4 class="text-3xl text-white sm:text-5xl leading-tight font-light">Ready to elevate your business?</h4>
<p class="mt-4 text-white">
Let's work together
</p>
<p class="mt-12 text-[1rem]">Contact Us</p>
<p class="mt-1">business00196@gmail.com</p>
</div>
<div>
<form class="flex flex-col justify-center h-full">
<input type="text" placeholder="Enter your email" class="border-b text-lg py-2 bg-transparent text-white w-full focus:outline-none" />
<div class="flex flex-col sm:flex-row gap-x-16 items-start sm:items-center">
<button class="bg-white mt-8 -rotate-[15deg] rounded-full min-w-24 h-24 w-24 p-4 text-black font-medium whitespace-wrap text-[1rem]">SEND NOW</button>
<div class="flex mt-6 gap-x-1 text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
<p class="text-sm w-[calc(100%-1.5rem)]">
By sending the email you agree to the Terms & Conditions and Privacy Policy.</p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>Preview
Join our newsletter!
Enter your email to receive our latest newsletter.
Don’t worry, we don’t spam
Show Code
<div class="relative my-12 overflow-hidden max-w-md mx-auto sm:rounded-xl bg-black px-6 sm:px-11 py-24 text-center lg:px-8">
<h3 class="mb-2 text-3xl font-semibold text-white">
Join our newsletter!
</h3>
<p class="mb-5 text-base text-white">
Enter your email to receive our latest newsletter.
</p>
<form>
<input
type="email"
placeholder="Your email address"
class="mb-4 h-[50px] w-full rounded-md border border-transparent bg-white/10 px-4 text-base font-normal text-gray-200 outline-none placeholder:text-white/60 focus:border-white focus-visible:shadow-none"
/>
<input type="submit" value="Subscribe Now" class="mb-4 h-[50px] w-full cursor-pointer rounded-md text-center text-sm font-medium text-white transition duration-300 ease-in-out hover:bg-[#0BB489] bg-gray-600" />
</form>
<p class="text-sm font-medium text-white">
Don't worry, we don't spam
</p>
<div>
<span class="absolute top-0 right-0">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="1.39737" cy="44.6026" r="1.39737" transform="rotate(-90 1.39737 44.6026)" fill="white" fillOpacity="0.44"></circle>
<circle cx="1.39737" cy="7.9913" r="1.39737" transform="rotate(-90 1.39737 7.9913)" fill="white" fillOpacity="0.44"></circle>
<circle cx="13.6943" cy="44.6026" r="1.39737" transform="rotate(-90 13.6943 44.6026)" fill="white" fillOpacity="0.44"></circle>
<circle cx="13.6943" cy="7.9913" r="1.39737" transform="rotate(-90 13.6943 7.9913)" fill="white" fillOpacity="0.44"></circle>
<circle cx="25.9911" cy="44.6026" r="1.39737" transform="rotate(-90 25.9911 44.6026)" fill="white" fillOpacity="0.44"></circle>
<circle cx="25.9911" cy="7.9913" r="1.39737" transform="rotate(-90 25.9911 7.9913)" fill="white" fillOpacity="0.44"></circle>
<circle cx="38.288" cy="44.6026" r="1.39737" transform="rotate(-90 38.288 44.6026)" fill="white" fillOpacity="0.44"></circle>
<circle cx="38.288" cy="7.9913" r="1.39737" transform="rotate(-90 38.288 7.9913)" fill="white" fillOpacity="0.44"></circle>
<circle cx="1.39737" cy="32.3058" r="1.39737" transform="rotate(-90 1.39737 32.3058)" fill="white" fillOpacity="0.44"></circle>
<circle cx="13.6943" cy="32.3058" r="1.39737" transform="rotate(-90 13.6943 32.3058)" fill="white" fillOpacity="0.44"></circle>
<circle cx="25.9911" cy="32.3058" r="1.39737" transform="rotate(-90 25.9911 32.3058)" fill="white" fillOpacity="0.44"></circle>
<circle cx="38.288" cy="32.3058" r="1.39737" transform="rotate(-90 38.288 32.3058)" fill="white" fillOpacity="0.44"></circle>
<circle cx="1.39737" cy="20.0086" r="1.39737" transform="rotate(-90 1.39737 20.0086)" fill="white" fillOpacity="0.44"></circle>
<circle cx="13.6943" cy="20.0086" r="1.39737" transform="rotate(-90 13.6943 20.0086)" fill="white" fillOpacity="0.44"></circle>
<circle cx="25.9911" cy="20.0086" r="1.39737" transform="rotate(-90 25.9911 20.0086)" fill="white" fillOpacity="0.44"></circle>
<circle cx="38.288" cy="20.0086" r="1.39737" transform="rotate(-90 38.288 20.0086)" fill="white" fillOpacity="0.44"></circle>
</svg>
</span>
<span class="absolute bottom-0 left-0">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="1.39737" cy="44.6026" r="1.39737" transform="rotate(-90 1.39737 44.6026)" fill="white" fillOpacity="0.44"></circle>
<circle cx="1.39737" cy="7.9913" r="1.39737" transform="rotate(-90 1.39737 7.9913)" fill="white" fillOpacity="0.44"></circle>
<circle cx="13.6943" cy="44.6026" r="1.39737" transform="rotate(-90 13.6943 44.6026)" fill="white" fillOpacity="0.44"></circle>
<circle cx="13.6943" cy="7.9913" r="1.39737" transform="rotate(-90 13.6943 7.9913)" fill="white" fillOpacity="0.44"></circle>
<circle cx="25.9911" cy="44.6026" r="1.39737" transform="rotate(-90 25.9911 44.6026)" fill="white" fillOpacity="0.44"></circle>
<circle cx="25.9911" cy="7.9913" r="1.39737" transform="rotate(-90 25.9911 7.9913)" fill="white" fillOpacity="0.44"></circle>
<circle cx="38.288" cy="44.6026" r="1.39737" transform="rotate(-90 38.288 44.6026)" fill="white" fillOpacity="0.44"></circle>
<circle cx="38.288" cy="7.9913" r="1.39737" transform="rotate(-90 38.288 7.9913)" fill="white" fillOpacity="0.44"></circle>
<circle cx="1.39737" cy="32.3058" r="1.39737" transform="rotate(-90 1.39737 32.3058)" fill="white" fillOpacity="0.44"></circle>
<circle cx="13.6943" cy="32.3058" r="1.39737" transform="rotate(-90 13.6943 32.3058)" fill="white" fillOpacity="0.44"></circle>
<circle cx="25.9911" cy="32.3058" r="1.39737" transform="rotate(-90 25.9911 32.3058)" fill="white" fillOpacity="0.44"></circle>
<circle cx="38.288" cy="32.3058" r="1.39737" transform="rotate(-90 38.288 32.3058)" fill="white" fillOpacity="0.44"></circle>
<circle cx="1.39737" cy="20.0086" r="1.39737" transform="rotate(-90 1.39737 20.0086)" fill="white" fillOpacity="0.44"></circle>
<circle cx="13.6943" cy="20.0086" r="1.39737" transform="rotate(-90 13.6943 20.0086)" fill="white" fillOpacity="0.44"></circle>
<circle cx="25.9911" cy="20.0086" r="1.39737" transform="rotate(-90 25.9911 20.0086)" fill="white" fillOpacity="0.44"></circle>
<circle cx="38.288" cy="20.0086" r="1.39737" transform="rotate(-90 38.288 20.0086)" fill="white" fillOpacity="0.44"></circle>
</svg>
</span>
</div>
</div>Newsletter Component design plays a vital role in ensuring that your email content is both visually appealing and easy to navigate. A well-designed newsletter not only grabs the reader’s attention but also encourages them to engage with your content, whether it’s reading an article, exploring a product, or taking advantage of a special offer. With the right design elements, you can create a compelling experience that keeps subscribers coming back for more.
A well-thought-out newsletter UI design is essential for capturing your audience’s attention and driving engagement. By focusing on layout, visuals, readability, and interactivity, you can create newsletters that not only look professional but also deliver a memorable experience that aligns with your brand goals.
Preview
Show Code
Want to learn animation? check out youtube channel web99
900+ Tailwind Modern UI
Stay in the loop with everything you need to know.