Tailwind Newsletter Components (249)

Newsletter from Saturn

Newsletter Signup Hero with Email Input and Ghost Illustration

A split-screen newsletter signup section with a bold heading, supporting subtext, and an email input paired with an orange Subscribe button on the left, and a rounded orange panel featuring a 3D ghost illustration on the right. Decorative thin circles and a small star accent add visual interest without functional controls.

<section class="relative py-20 md:py-24 overflow-hidden">
  <img class="absolute top-0 left-0" src="saturn-assets/images/newsletter/light-left-top-double.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
          <div class="relative z-10 max-w-lg mx-auto">
            <h4 class="font-heading text-4xl sm:text-5xl lg:text-6xl text-gray-900 font-bold mb-6">Sign up for our newsletter</h4>
            <div class="md:flex mb-16">
              <div class="mb-6 md:mb-0 md:mr-8 pt-2 text-gray-600">
                <svg width="84" height="10" viewBox="0 0 84 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 4.5C0.585786 4.5 0.25 4.83579 0.25 5.25C0.25 5.66421 0.585786 6 1 6L1 4.5ZM84 5.25001L76.5 0.919879L76.5 9.58013L84 5.25001ZM1 6L77.25 6.00001L77.25 4.50001L1 4.5L1 6Z" fill="#1E2238"></path>
                </svg>
              </div>
              <div class="max-w-xs">
                <p class="text-lg font-semibold text-gray-400">Stay in the loop with everything you need to know.</p>
              </div>
            </div>
            <div class="sm:flex items-center">
              <input class="w-full mb-3 sm:mb-0 sm:mr-4 py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="email" placeholder="pat@saturn.dev">
              <button class="relative group inline-block flex-shrink-0 w-full sm:w-auto py-3 px-5 text-sm font-semibold text-orange-50 bg-orange-900 rounded-md overflow-hidden" type="submit">
                <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                <div class="relative flex items-center justify-center">
                  <span class="mr-4">Subscribe</span>
                  <svg width="8" height="11" viewBox="0 0 8 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.82994 5.04001L2.58994 0.80001C2.49698 0.706281 2.38638 0.631887 2.26452 0.581118C2.14266 0.530349 2.01195 0.504211 1.87994 0.504211C1.74793 0.504211 1.61723 0.530349 1.49537 0.581118C1.37351 0.631887 1.26291 0.706281 1.16994 0.80001C0.983692 0.987372 0.87915 1.24082 0.87915 1.50501C0.87915 1.7692 0.983692 2.02265 1.16994 2.21001L4.70994 5.75001L1.16994 9.29001C0.983692 9.47737 0.87915 9.73082 0.87915 9.99501C0.87915 10.2592 0.983692 10.5126 1.16994 10.7C1.26338 10.7927 1.3742 10.866 1.49604 10.9158C1.61787 10.9655 1.74834 10.9908 1.87994 10.99C2.01155 10.9908 2.14201 10.9655 2.26385 10.9158C2.38569 10.866 2.4965 10.7927 2.58994 10.7L6.82994 6.46001C6.92367 6.36705 6.99806 6.25645 7.04883 6.13459C7.0996 6.01273 7.12574 5.88202 7.12574 5.75001C7.12574 5.618 7.0996 5.48729 7.04883 5.36543C6.99806 5.24357 6.92367 5.13297 6.82994 5.04001Z" fill="currentColor"></path>
                  </svg>
                </div>
              </button>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="relative pl-20 lg:pl-16 xl:pl-0 max-w-lg mx-auto">
            <img class="absolute w-125 h-125 object-contain bottom-0 left-0 -mb-32 sm:-mb-0 -ml-8 xs:-ml-20 md:-ml-40 lg:-ml-24 xl:-ml-52" src="saturn-assets/images/newsletter/circle-star-bg.png" alt="">
            <img class="relative block w-full xl:max-w-sm lg:ml-auto" src="saturn-assets/images/newsletter/image-yellow-ghost.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Newsletter from DarkPro

Tailwind CSS

DarkPro

Newsletter Signup Banner with Inline Email Input

A dark, purple-gradient promotional banner with a large heading, short supporting text, and an inline input field paired with an action button for newsletter subscription. The content is arranged in a split layout with text on the left and the input group on the right.

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
    <div class="container px-4 mx-auto">
        <div class="relative">
            <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-800 via-purple-400 to-purple-800 rounded-2xl filter blur-3xl"></div>
            <div class="relative p-1 border border-white border-opacity-20 rounded-2xl">
                <div class="p-12 bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 rounded-xl">
                    <div class="flex flex-wrap items-center -mx-4">
                        <div class="w-full md:w-1/2 px-4">
                            <div class="mb-5 lg:mb-0">
                                <h3 class="mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Sign up to our newsletter</h3>
                                <p class="text-lg leading-relaxed text-neutral-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            </div>
                        </div>
                        <div class="w-full md:w-1/2 px-4">
                            <form action="#">
                                    <div class="group flex md:max-w-md mx-auto p-1 border border-white border-opacity-20 border border-neutral-700 hover:border-neutral-600 transition-all duration-200 transition-all rounded-md">
                                    <input class="block w-full px-4 py-3 text-sm text-neutral-300 placeholder-neutral-400 font-semibold bg-neutral-800 border border-neutral-700 group-hover:border-neutral-600 focus:border-neutral-600 transition-all duration-200 transition-all rounded-l focus:outline-none focus:border-white transition-colors duration-200" placeholder="Search">
                                    <button class="block py-3 px-2 rounded-r bg-neutral-800 border border-l-0 border-neutral-700 border border-neutral-700 group-hover:border-neutral-600 hover:bg-neutral-900 hover:bg-opacity-10 px-5 py-3 text-sm font-semibold text-white transition-all duration-200">
                                    Action
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Newsletter from Flaro

Tailwind CSS

Flaro

Centered Newsletter Signup Form with Purple Subscribe Button

A centered newsletter subscription section with an envelope icon, bold heading, supporting text, name and email inputs, and a purple Subscribe Now button. A small privacy note appears beneath the button.

<section class="py-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="text-center max-w-xl mx-auto">
      <div class="mb-6 relative mx-auto w-16 h-16 bg-indigo-600 rounded-full">
        <img class="absolute top-0 left-0 rounded-full" src="flaro-assets/images/applications/blur.svg" alt="">
        <div class="absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2">
          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.00098 13.3335L18.152 22.1008C19.2716 22.8473 20.7303 22.8473 21.85 22.1008L35.001 13.3335M8.33431 31.6668H31.6676C33.5086 31.6668 35.001 30.1744 35.001 28.3335V11.6668C35.001 9.82588 33.5086 8.3335 31.6676 8.3335H8.33431C6.49336 8.3335 5.00098 9.82588 5.00098 11.6668V28.3335C5.00098 30.1744 6.49336 31.6668 8.33431 31.6668Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
      </div>
      <h2 class="mb-3 text-6xl md:text-7xl text-center font-bold font-heading tracking-px-n leading-tight">Join Our Newsletter</h2>
      <p class="mb-11 font-medium text-gray-600 leading-relaxed">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condimentum vitae vel purus.</p>
      <form class="mb-9">
        <div class="mb-5">
          <input class="px-4 py-3 w-full text-gray-500 font-medium text-center placeholder-gray-500 outline-none border border-gray-300 rounded-lg focus:ring focus:ring-indigo-300" id="newsletterInput1-1" type="text" placeholder="First &amp; last name">
        </div>
        <div class="mb-5">
          <input class="px-4 py-3 w-full text-gray-500 font-medium text-center placeholder-gray-500 outline-none border border-gray-300 rounded-lg focus:ring focus:ring-indigo-300" id="newsletterInput1-2" type="text" placeholder="Email address">
        </div>
        <button class="py-4 px-6 w-full text-white font-semibold border border-indigo-700 rounded-xl shadow-4xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Subscribe Now</button>
      </form>
      <div class="flex flex-wrap justify-center items-center -m-1.5">
        <div class="w-auto p-1.5">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.00033 10.0002V11.3336M4.00033 14.0002H12.0003C12.7367 14.0002 13.3337 13.4033 13.3337 12.6669V8.66691C13.3337 7.93053 12.7367 7.33358 12.0003 7.33358H4.00033C3.26395 7.33358 2.66699 7.93053 2.66699 8.66691V12.6669C2.66699 13.4033 3.26395 14.0002 4.00033 14.0002ZM10.667 7.33358V4.66691C10.667 3.19415 9.47308 2.00024 8.00033 2.00024C6.52757 2.00024 5.33366 3.19415 5.33366 4.66691V7.33358H10.667Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round"></path>
          </svg>
        </div>
        <div class="w-auto p-1.5">
          <p class="font-sans text-sm text-gray-600">We never share your information to any third party</p>
        </div>
      </div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Newsletter from Gradia

Tailwind CSS

Gradia

Dark newsletter signup form with name and email fields

A centered newsletter subscription section on a black background with an envelope icon, heading, supporting text, two text inputs for name and email, and a gradient SUBSCRIBE NOW button with a privacy note below. The layout is a vertical stack of form elements.

<section class="py-28 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-lg mx-auto text-center mb-14"><img class="mx-auto mb-8" src="gradia-assets/images/newsletter/email.svg" alt="">
      <h2 class="mb-5 font-heading font-semibold text-6xl sm:text-7xl text-white" >Join our newsletter</h2>
      <p class="text-gray-400 text-lg" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
    </div>
    <div class="flex flex-wrap max-w-xl mx-auto -m-2.5">
      <div class="w-full p-2.5">
        <input class="w-full px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 focus:border-gray-700 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 rounded" type="text" placeholder="Your name">
      </div>
      <div class="w-full p-2.5">
        <input class="w-full px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 focus:border-gray-700 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 rounded" type="text" placeholder="Your email address">
      </div>
      <div class="w-full p-2.5">
        <div class="group relative">
          <div class="absolute top-0 left-0 w-full h-full bg-gradient-green opacity-0 group-hover:opacity-50 rounded transition ease-out duration-300"></div>
          <button class="p-1 w-full font-heading font-semibold text-xs text-gray-900 uppercase tracking-px overflow-hidden rounded">
            <div class="relative p-5 px-11 bg-gradient-green overflow-hidden rounded">
              <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
              <p class="relative z-10" >Subscribe now</p>
            </div>
          </button>
        </div>
      </div>
      <div class="w-full p-2.5">
        <p class="text-sm text-gray-500 text-center" >We never share your information to any third party</p>
      </div>
    </div>
  </div>
</section>

Newsletter from Solstice

Tailwind CSS

Solstice

Newsletter Subscribe Section with Study Session Illustration

A split-screen newsletter signup section with a "Newsletter" badge, a large "Subscribe" heading, supporting text, an email input, and an orange subscribe button. The left side shows an illustrative app mockup of a study session with lesson cards and images.

<section class="py-24">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="relative w-full max-w-xl mx-auto" style="height:600px;">
          <div class="hidden md:block lg:hidden xl:block absolute inset-0 rounded-full bg-orange-50"></div>
          <div class="hidden sm:block absolute rounded-full left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-orange-100" style="width:450px;height:450px;"></div>
          <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full sm:w-96 h-96">
            <div class="bg-white rounded-2xl pl-4 h-full flex flex-col">
              <div class="py-4">
                <div class="relative">
                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                    <rect width="32" height="32" rx="8" fill="#FF7100"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M28 14L28 9C28 8.44772 27.5523 8 27 8L24 8C23.4477 8 23 8.44772 23 9L23 13C23 16.3137 20.3137 19 17 19L13 19C12.4477 19 12 19.4477 12 20L12 23C12 23.5523 12.4477 24 13 24L18 24C23.5228 24 28 19.5228 28 14Z" fill="white"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18L4 23C4 23.5523 4.44772 24 5 24L8 24C8.55228 24 9 23.5523 9 23L9 19C9 15.6863 11.6863 13 15 13L19 13C19.5523 13 20 12.5523 20 12L20 9C20 8.44771 19.5523 8 19 8L14 8C8.47715 8 4 12.4772 4 18Z" fill="white"></path>
                  </svg>
                  <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <div class="flex items-center gap-2">
                      <h2 class="font-medium whitespace-nowrap">Study Session</h2>
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M8 11.5667C8.60015 11.5667 9.08666 11.0802 9.08666 10.48C9.08666 9.87986 8.60015 9.39334 8 9.39334C7.39985 9.39334 6.91333 9.87986 6.91333 10.48C6.91333 11.0802 7.39985 11.5667 8 11.5667Z" fill="#B8B8B8"></path>
                        <path d="M11.2534 6.80001H11.7289L12.1247 6.84948C12.985 6.95702 13.4426 7.2132 13.7161 7.60692C14.0112 8.03176 14.1667 8.71789 14.1667 9.86001V11.1C14.1667 12.4491 13.9529 13.1568 13.5548 13.5548C13.1568 13.9528 12.4491 14.1667 11.1 14.1667H4.90004C3.55097 14.1667 2.8433 13.9528 2.44526 13.5548C2.04722 13.1568 1.83337 12.4491 1.83337 11.1V9.86001C1.83337 8.71789 1.98893 8.03176 2.28403 7.60692C2.55751 7.2132 3.01507 6.95702 3.87539 6.84948L4.31337 6.79473V6.79334H4.40004V6.80001H4.90004H11.1H11.1004H11.1007H11.101H11.1013H11.1016H11.1019H11.1022H11.1025H11.1028H11.1032H11.1035H11.1038H11.1041H11.1044H11.1047H11.105H11.1053H11.1056H11.106H11.1063H11.1066H11.1069H11.1072H11.1075H11.1078H11.1081H11.1084H11.1087H11.109H11.1093H11.1097H11.11H11.1103H11.1106H11.1109H11.1112H11.1115H11.1118H11.1121H11.1124H11.1127H11.113H11.1133H11.1137H11.114H11.1143H11.1146H11.1149H11.1152H11.1155H11.1158H11.1161H11.1164H11.1167H11.117H11.1173H11.1176H11.1179H11.1182H11.1185H11.1188H11.1191H11.1194H11.1198H11.1201H11.1204H11.1207H11.121H11.1213H11.1216H11.1219H11.1222H11.1225H11.1228H11.1231H11.1234H11.1237H11.124H11.1243H11.1246H11.1249H11.1252H11.1255H11.1258H11.1261H11.1264H11.1267H11.127H11.1273H11.1276H11.1279H11.1282H11.1285H11.1288H11.1291H11.1294H11.1297H11.13H11.1303H11.1306H11.1309H11.1312H11.1315H11.1318H11.1321H11.1324H11.1327H11.133H11.1333H11.1336H11.1339H11.1342H11.1345H11.1348H11.1351H11.1354H11.1357H11.136H11.1363H11.1366H11.1369H11.1372H11.1375H11.1378H11.1381H11.1384H11.1387H11.139H11.1393H11.1396H11.1399H11.1402H11.1405H11.1408H11.1411H11.1414H11.1417H11.142H11.1423H11.1426H11.1429H11.1432H11.1435H11.1438H11.1441H11.1443H11.1446H11.1449H11.1452H11.1455H11.1458H11.1461H11.1464H11.1467H11.147H11.1473H11.1476H11.1479H11.1482H11.1485H11.1488H11.1491H11.1494H11.1497H11.15H11.1503H11.1506H11.1509H11.1512H11.1514H11.1517H11.152H11.1523H11.1526H11.1529H11.1532H11.1535H11.1538H11.1541H11.1544H11.1547H11.155H11.1553H11.1556H11.1559H11.1562H11.1565H11.1568H11.157H11.1573H11.1576H11.1579H11.1582H11.1585H11.1588H11.1591H11.1594H11.1597H11.16H11.1603H11.1606H11.1609H11.1612H11.1615H11.1618H11.162H11.1623H11.1626H11.1629H11.1632H11.1635H11.1638H11.1641H11.1644H11.1647H11.165H11.1653H11.1656H11.1659H11.1662H11.1664H11.1667H11.167H11.1673H11.1676H11.1679H11.1682H11.1685H11.1688H11.1691H11.1694H11.1697H11.17H11.1703H11.1706H11.1708H11.1711H11.1714H11.1717H11.172H11.1723H11.1726H11.1729H11.1732H11.1735H11.1738H11.1741H11.1744H11.1747H11.1749H11.1752H11.1755H11.1758H11.1761H11.1764H11.1767H11.177H11.1773H11.1776H11.1779H11.1782H11.1785H11.1788H11.1791H11.1793H11.1796H11.1799H11.1802H11.1805H11.1808H11.1811H11.1814H11.1817H11.182H11.1823H11.1826H11.1829H11.1832H11.1834H11.1837H11.184H11.1843H11.1846H11.1849H11.1852H11.1855H11.1858H11.1861H11.1864H11.1867H11.187H11.1873H11.1876H11.1878H11.1881H11.1884H11.1887H11.189H11.1893H11.1896H11.1899H11.1902H11.1905H11.1908H11.1911H11.1914H11.1917H11.192H11.1922H11.1925H11.1928H11.1931H11.1934H11.1937H11.194H11.1943H11.1946H11.1949H11.1952H11.1955H11.1958H11.1961H11.1964H11.1967H11.197H11.1972H11.1975H11.1978H11.1981H11.1984H11.1987H11.199H11.1993H11.1996H11.1999H11.2002H11.2005H11.2008H11.2011H11.2014H11.2017H11.202H11.2023H11.2026H11.2029H11.2031H11.2034H11.2037H11.204H11.2043H11.2046H11.2049H11.2052H11.2055H11.2058H11.2061H11.2064H11.2067H11.207H11.2073H11.2076H11.2079H11.2082H11.2085H11.2088H11.2091H11.2094H11.2097H11.21H11.2103H11.2106H11.2108H11.2111H11.2114H11.2117H11.212H11.2123H11.2126H11.2129H11.2132H11.2135H11.2138H11.2141H11.2144H11.2147H11.215H11.2153H11.2156H11.2159H11.2162H11.2165H11.2168H11.2171H11.2174H11.2177H11.218H11.2183H11.2186H11.2189H11.2192H11.2195H11.2198H11.2201H11.2204H11.2207H11.221H11.2213H11.2216H11.2219H11.2222H11.2225H11.2228H11.2231H11.2234H11.2237H11.224H11.2243H11.2246H11.2249H11.2252H11.2255H11.2258H11.2261H11.2264H11.2267H11.227H11.2273H11.2276H11.2279H11.2282H11.2285H11.2288H11.2291H11.2294H11.2297H11.23H11.2303H11.2306H11.2309H11.2312H11.2315H11.2318H11.2321H11.2324H11.2327H11.2331H11.2334H11.2337H11.234H11.2343H11.2346H11.2349H11.2352H11.2355H11.2358H11.2361H11.2364H11.2367H11.237H11.2373H11.2376H11.2379H11.2382H11.2385H11.2388H11.2392H11.2395H11.2398H11.2401H11.2404H11.2407H11.241H11.2413H11.2416H11.2419H11.2422H11.2425H11.2428H11.2431H11.2434H11.2438H11.2441H11.2444H11.2447H11.245H11.2453H11.2456H11.2459H11.2462H11.2465H11.2468H11.2472H11.2475H11.2478H11.2481H11.2484H11.2487H11.249H11.2493H11.2496H11.2499H11.2503H11.2506H11.2509H11.2512H11.2515H11.2518H11.2521H11.2524H11.2527H11.2531H11.2534ZM5.48671 10.48C5.48671 11.8617 6.60949 12.9933 8.00004 12.9933C9.38952 12.9933 10.5134 11.8695 10.5134 10.48C10.5134 9.0972 9.38285 7.96668 8.00004 7.96668C6.61831 7.96668 5.48671 9.08946 5.48671 10.48Z" fill="#B8B8B8" stroke="#B8B8B8"></path>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div class="relative flex-1 overflow-hidden">
                <img class="absolute bottom-0 right-0 rounded-br-2xl rounded-tl-2xl w-full h-full object-cover" src="solstice-assets/images/newsletter/background-picture.png" alt="">
                <div class="absolute right-0 bottom-6">
                  <div class="flex flex-col gap-6 items-end">
                    <div class="flex transform translate-x-12">
                      <div class="hidden sm:block relative" style="width:128px;height:100px;">
                        <img class="rounded-bl-xl rounded-tl-xl" src="solstice-assets/images/newsletter/picture1.png" alt="">
                        <div class="absolute inset-0">
                          <svg class="rounded-tl-xl" xmlns="http://www.w3.org/2000/svg" width="128" height="100" viewBox="0 0 128 100" fill="none">
                            <g clip-path="url(#clip0_216_21273)">
                              <path d="M138 75.9459V54.1892C138 54.0848 137.915 54 137.811 54H122.705C122.601 54 122.516 54.0848 122.516 54.1892V71.6892C122.516 83.1826 111.183 94.516 99.6892 94.516H82.1892C82.0848 94.516 82 94.6008 82 94.7052V109.811C82 109.915 82.0848 110 82.1892 110H103.946C122.753 110 138 94.7534 138 75.9459Z" fill="#FFA632"></path>
                              <path d="M-10 24.0541V45.8108C-10 45.9152 -9.9153 46 -9.81081 46H5.29481C5.39924 46 5.484 45.9152 5.484 45.8108V28.3108C5.484 16.8174 16.8174 5.484 28.3108 5.484H45.8108C45.9152 5.484 46 5.39924 46 5.29481V-9.81081C46 -9.91524 45.9152 -10 45.8108 -10H24.0541C5.24657 -10 -10 5.24657 -10 24.0541Z" fill="#FFA632"></path>
                            </g>
                            <defs><clipPath id="clip0_216_21273"><rect width="128" height="100" fill="white"></rect></clipPath></defs>
                          </svg>
                        </div>
                      </div>
                      <div class="rounded-l-2xl sm:rounded-l-none bg-white p-4">
                        <h2 class="text-sm font-bold font-heading mb-1">Study Method with Mark</h2>
                        <div class="h-2 w-56 bg-gray-50 rounded mb-3"></div>
                        <div class="inline-block px-2 py-1 border border-orange-100 bg-orange-50 rounded-md text-orange-500 text-xs font-medium">Producvitity</div>
                      </div>
                    </div>
                    <div class="flex">
                      <div class="hidden sm:block relative" style="width:128px;height:100px;">
                        <img class="rounded-bl-xl rounded-tl-xl" src="solstice-assets/images/newsletter/picture2.png" alt="">
                        <div class="absolute inset-0">
                          <svg class="rounded-tl-xl" xmlns="http://www.w3.org/2000/svg" width="128" height="100" viewBox="0 0 128 100" fill="none">
                            <g clip-path="url(#clip0_216_21290)">
                              <path d="M138 75.9459V54.1892C138 54.0848 137.915 54 137.811 54H122.705C122.601 54 122.516 54.0848 122.516 54.1892V71.6892C122.516 83.1826 111.183 94.516 99.6892 94.516H82.1892C82.0848 94.516 82 94.6008 82 94.7052V109.811C82 109.915 82.0848 110 82.1892 110H103.946C122.753 110 138 94.7534 138 75.9459Z" fill="#530031"></path>
                              <path d="M-10 24.0541V45.8108C-10 45.9152 -9.9153 46 -9.81081 46H5.29481C5.39924 46 5.484 45.9152 5.484 45.8108V28.3108C5.484 16.8174 16.8174 5.484 28.3108 5.484H45.8108C45.9152 5.484 46 5.39924 46 5.29481V-9.81081C46 -9.91524 45.9152 -10 45.8108 -10H24.0541C5.24657 -10 -10 5.24657 -10 24.0541Z" fill="#530031"></path>
                            </g>
                            <defs><clipPath id="clip0_216_21290"><rect width="128" height="100" fill="white"></rect></clipPath></defs>
                          </svg>
                        </div>
                      </div>
                      <div class="rounded-l-2xl sm:rounded-l-none bg-white p-4">
                        <h2 class="text-sm font-bold font-heading mb-1">Journaling</h2>
                        <div class="h-2 w-36 bg-gray-50 rounded mb-3"></div>
                        <div class="inline-block px-2 py-1 border border-purple-100 bg-purple-50 rounded-md text-purple-400 text-xs font-medium">Wellness</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="flex flex-col items-start justify-center h-full lg:px-8 max-w-md mx-auto">
          <form action="">
            <div class="border border-orange-100 rounded-md bg-orange-50 px-2 py-1 inline-flex items-center gap-2 mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                <path d="M8.62293 3.37707C8.567 3.32115 8.50813 3.21714 8.50077 3.02581C8.62835 3.19081 8.77541 3.3237 8.91729 3.42581C8.95382 3.45211 8.99065 3.47685 9.02752 3.5H9.015C8.79742 3.5 8.68271 3.43685 8.62293 3.37707ZM10.485 3.5H10.469C10.508 3.47551 10.547 3.44928 10.5856 3.42134C10.7259 3.31979 10.8723 3.18774 10.9993 3.02426C10.9922 3.21658 10.9331 3.321 10.8771 3.37707C10.8173 3.43685 10.7026 3.5 10.485 3.5Z" fill="#FF7100" stroke="#FF7100"></path>
                <path d="M9.015 4.75C8.04 4.75 7.25 3.96 7.25 2.985V1.5C7.25 1.225 7.025 1 6.75 1H3.5C2.12 1 1 2.115 1 3.49V6.975C1 8.355 2.12 9.475 3.5 9.475H4.25C4.39 9.475 4.57 9.565 4.65 9.675L5.4 10.67C5.73 11.11 6.27 11.11 6.6 10.67L7.35 9.675C7.445 9.55 7.595 9.475 7.75 9.475H8.505C9.885 9.475 11 8.36 11 6.98V5.25C11 4.975 10.775 4.75 10.5 4.75H9.015ZM4 6C3.72 6 3.5 5.775 3.5 5.5C3.5 5.225 3.72 5 4 5C4.275 5 4.5 5.225 4.5 5.5C4.5 5.775 4.28 6 4 6ZM6 6C5.72 6 5.5 5.775 5.5 5.5C5.5 5.225 5.72 5 6 5C6.275 5 6.5 5.225 6.5 5.5C6.5 5.775 6.28 6 6 6Z" fill="#FF7100"></path>
              </svg>
              <span class="text-orange-500 text-sm font-medium">Newsletter</span>
            </div>
            <h2 class="text-5xl font-bold font-heading mb-6">Subscribe</h2>
            <p class="text-gray-500 mb-10">Fuel your curiosity by joining a vibrant community of learners.</p>
            <input class="w-full rounded-full p-4 outline-none border border-orange-100 shadow placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200 mb-4" type="text" placeholder="Email address">
            <button class="py-4 px-6 h-14 rounded-full bg-orange-500 w-full border border-orange-600 shadow hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200 flex items-center justify-center gap-2" type="submit">
              <span class="text-white font-bold font-heading">Subscribe</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M4.99996 10H15.4166M15.4166 10L10.4166 5M15.4166 10L10.4166 15" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Newsletter from Zanrly

Tailwind CSS

Zanrly

Side-by-side CTA cards for careers and newsletter subscription

Two rounded promotional cards placed side by side: a white card with a centered 'Start your journey with us' heading and a blue 'Join our Team' button, and a blue card with a centered 'Subscribe and receive updates' heading, an email input, and a white 'Sign In' button. The layout presents two distinct calls to action with eyebrow labels above each heading.

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 p-4">
        <div class="py-32 px-8 text-center h-full bg-white overflow-hidden rounded-3xl">
          <div class="max-w-md mx-auto">
            <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Careers</span>
            <h2 class="font-heading mb-8 text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Start your journey with us.</h2>
            <div class="flex flex-wrap justify-center -m-2">
              <div class="w-full md:w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Join our Team</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="py-32 px-8 text-center h-full bg-blue-500 rounded-3xl">
          <div class="max-w-md mx-auto">
            <span class="inline-block mb-2 text-sm text-white font-bold uppercase tracking-widest">Applications</span>
            <h2 class="font-heading mb-8 text-4xl md:text-5xl text-white font-black tracking-tight">Subscribe and receive updates</h2>
            <div class="max-w-sm mx-auto">
              <div class="flex flex-wrap -m-2">
                <div class="w-full md:flex-1 p-2">
                  <input class="px-6 py-3.5 w-full text-lg text-white font-bold bg-blue-400 outline-none focus:ring-4 focus:ring-blue-200 placeholder-white rounded-full" id="newsletterLightReverseInput1-1" type="text" placeholder="Email address">
                </div>
                <div class="w-full md:w-auto p-2">
                  <div class="flex flex-wrap justify-center -m-2">
                    <div class="w-full md:w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-gray-900 font-bold bg-white hover:bg-gray-100 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Sign In</a></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Newsletter from Nightsable

Tailwind CSS

Nightsable

Dark Newsletter Signup Hero with Email Form and Photo

A split-screen newsletter signup section with a dark left panel containing a lime eyebrow label, large headline, supporting text, email input, and a lime Subscribe button. The right side displays a full-height lifestyle photograph of a person seated on steps.

<section class="bg-gradient-radial-dark overflow-hidden">
  <div class="flex flex-wrap md:-m-8">
    <div class="w-full md:w-1/2 md:p-8">
      <div class="flex flex-col justify-center h-full">
        <div class="py-20 px-4 md:max-w-lg mx-auto">
          <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
          <h2 class="font-heading mb-6 text-5xl text-white tracking-5xl">Industry insights you wan`t delete. Delivered to your inbox weekly</h2>
          <p class="mb-12 text-gray-300">Join 10,000 founders, get early access to Nightsable features, and learn how to squeeze every drop of revenue</p>
          <div class="mb-6 md:max-w-sm border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="px-6 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="E-mail">
          </div>
          <a class="inline-block px-8 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Subscribe</a>
        </div>
      </div>
    </div>
    <div class="w-full md:w-1/2 md:p-8">
      <div class="h-full">
        <img class="h-full mx-auto md:mr-0 object-cover rounded-tl-5xl rounded-bl-5xl" src="nightsable-assets/images/newsletter/man.png" alt="">
      </div>
    </div>
  </div>
</section>

Newsletter from Zeus

Tailwind CSS

Zeus

Newsletter Signup Banner with Email Form

A dark navy promotional banner with a bold heading, supporting text, and an inline email input paired with a light blue Sign up button arranged horizontally. It functions as a compact newsletter subscription call-to-action section.

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="bg-gray-900 rounded-xl px-24">
      <div class="flex flex-wrap items-center py-10 lg:py-20 -px-4">
        <div class="w-full md:w-3/5 px-4 mb-6 md:mb-0">
          <div class="mb-5 lg:mb-0">
            <h3 class="mb-4 text-3xl font-semibold font-heading text-white">Sign up to our newsletter</h3>
            <p class="text-xl text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="w-full md:w-2/5 px-4">
          <form action="#">
            <div class="relative ml-auto flex flex-wrap lg:flex-nowrap">
              <input class="relative w-full mb-4 lg:mb-0 lg:mr-4 py-3 pl-4 text-sm text-white bg-transparent border border-gray-400 rounded" type="text" placeholder="e.g hello@shuffle.dev">
              <span class="absolute top-0 left-0 ml-4 -mt-2 px-1 inline-block bg-gray-900 text-gray-500 text-xs">Your email address</span>
              <button class="w-full lg:w-auto py-4 px-6 text-sm text-white font-medium leading-normal bg-blue-400 hover:bg-blue-300 rounded transition duration-200">Sign&nbsp;up</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Newsletter from Wrexa

Tailwind CSS

Wrexa

Centered Newsletter Signup Form with Email Input

A minimal light-background section with a numbered label, large centered heading, and a horizontal row containing an email input and purple 'Sign Me' button. It functions as a newsletter subscription form.

<section class="py-24 sm:pt-32 sm:pb-64 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-24">
      <span class="font-heading text-xl">03</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Newsletter</span>
    </div>
    <div class="text-center">
      <h1 class="font-heading text-4xl sm:text-6xl lg:text-7xl mb-24">
        <span class="block">Sign up for</span>
        <span>email newsletters</span>
      </h1>
      <div class="max-w-xl mx-auto lg:max-w-2xl xl:max-w-4xl">
        <form action="#" method="post">
          <div class="flex flex-wrap items-center justify-center -mx-4">
            <div class="w-full sm:w-2/3 px-4 mb-4 sm:mb-0">
              <div class="relative px-10 py-3 bg-transparent border border-gray-400 rounded-lg">
                <input class="block mt-3 bg-transparent outline-none w-full" type="email" placeholder="mat@hello.dev" value="">
                <label class="absolute top-0 left-0 ml-10 mt-3 text-xs font-normal text-gray-400" for="">Your email</label>
              </div>
            </div>
            <div class="w-full sm:w-auto px-4">
              <button class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" type="submit">Sign Me</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Newsletter from Zospace

Tailwind CSS

Zospace

Dark Newsletter Subscribe Banner with Email Input

A dark promotional banner with a blue corner accent, a "Subscribe now" heading, and a pill-shaped email input with a blue Subscribe button beneath. Decorative sparkle shapes and a faint circle sit on the right side, and a short line of supporting text appears below the form.

<section class="py-20 2xl:py-40 bg-gray-800">
  <div class="container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <div class="relative pt-16 px-6 lg:px-24 pb-20 bg-gray-600 rounded-3xl overflow-hidden">
        <img class="absolute top-0 left-0" src="zospace-assets/lines/blue-half-circle.svg" alt="">
        <img class="hidden lg:block absolute top-0 right-0 mt-6 mr-12" src="zospace-assets/images/stars.svg" alt="">
        <img class="hidden lg:block absolute top-0 right-0 w-96 h-96 -mt-14 -mr-14" src="zospace-assets/lines/circle.svg" alt="">
        <div class="relative">
          <span class="text-base lg:text-lg text-white font-bold">More news</span>
          <h3 class="mt-6 mb-12 text-5xl lg:text-6xl text-white font-bold font-heading">Subscribe now</h3>
          <div class="sm:max-w-md mb-8 sm:flex sm:items-center sm:bg-white sm:rounded-full">
            <span class="hidden sm:inline-block pl-2 sm:pl-6 lg:pl-10">
              <svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="18.5" cy="18.5" r="9.5" fill="#1F40FF" fill-opacity="0.15"></circle><circle cx="18.5" cy="18.5" r="18.5" fill="#1F40FF" fill-opacity="0.06"></circle><circle cx="18.5" cy="18.5" r="2.5" fill="#282C36"></circle></svg>
            </span>
            <input class="w-full sm:w-auto mb-4 sm:mb-0 pl-8 sm:pl-4 py-5 rounded-full placeholder-gray-900 font-bold focus:outline-none" type="email" placeholder="Drop your Email">
            <button class="w-full sm:w-auto ml-auto px-10 py-5 text-white font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200">Subscribe</button>
          </div>
          <p class="text-gray-200">
            <span>The brown fox jumps over</span>
            <span class="text-white">the lazy dog.</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

Newsletter from Flex

Tailwind CSS

Flex

Centered newsletter signup section with email input and subscribe button

A centered light section with a bold heading, subtitle, email input field, green Subscribe button, and privacy policy note. Decorative purple and blue dot grids frame the corners, and the form is arranged in a single horizontal row beneath the text.

<section class="relative py-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <img class="absolute top-6 left-6 w-24 md:w-auto" src="flex-ui-assets/elements/dots3-violet.svg">
  <img class="absolute bottom-6 right-6 w-24 md:w-auto" src="flex-ui-assets/elements/dots3-blue.svg">
  <div class="container relative z-10 px-4 mx-auto">
    <div class="mx-auto max-w-xl text-center">
      <h3 class="mb-4 text-3xl md:text-4xl leading-tight text-coolGray-900 font-bold tracking-tighter">Sign up for our newsletter</h3>
      <p class="mb-8 text-lg md:text-xl text-coolGray-500 font-medium">Stay in the loop with everything you need to know.</p>
      <div class="mx-auto md:max-w-md text-left">
        <div class="flex flex-wrap mb-1">
          <div class="w-full md:flex-1 mb-3 md:mb-0 md:mr-6">
            <input class="w-full py-3 px-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Enter your email">
          </div>
          <div class="w-full md:w-auto"><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Subscribe</a></div>
        </div>
        <span class="text-xs text-coolGray-500 font-medium">
          <span>We care about your data in our</span>
          <a class="text-green-500 hover:text-green-600" href="#">privacy policy</a>
        </span>
      </div>
    </div>
  </div>
</section>

Newsletter from Uinel

Tailwind CSS

Uinel

Centered newsletter signup with inline email field

A light-background newsletter section with a small eyebrow label, a large 'Stay updated' heading, supporting text, and a horizontal row containing a labeled email input and a blue 'Get started' call-to-action button.

<section class="font-medium bg-white py-24 2xl:py-44">
  <div class="container px-4 mx-auto">
    <span class="uppercase tracking-widest text-xs leading-4 mb-9 block text-center text-gray-300">Newsletter</span>
    <h2 class="font-heading text-9xl md:text-10xl xl:text-11xl leading-tight mb-14 xl:mb-16 text-center">Stay updated</h2>
    <h3 class="font-heading text-xl xl:text-2xl text-center leading-10 mb-20 max-w-lg mx-auto">Phasellus eget pretium mi, vestibulum lobortis neque.</h3>
    <div class="md:flex md:items-center md:justify-center">
      <p class="md:mr-9 font-normal text-lg text-darkBlueGray-400 mb-3 md:mb-0">Drop your email:</p>
      <input class="bg-blueGray-50 md:mr-9 mb-3 md:mb-0 text-xl rounded-2xl h-16 text-darkBlueGray-400 md:max-w-xs lg:max-w-lg w-full px-8 border border-blue-500 outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" type="text">
      <a class="block py-5 px-10 w-full md:w-auto text-xl leading-6 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Get started</a>
    </div>
  </div>
</section>

Newsletter from Yofte

Tailwind CSS

Yofte

Newsletter Signup Card with Email Input and Join Button

A centered blue promotional card with the Yofte logo, a bold heading, supporting text, and a single email input paired with a dark JOIN button. It functions as a newsletter subscription call to action with decorative pill shapes in the background.

<section class="py-20 bg-gray-100 overflow-x-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative max-w-4xl mx-auto">
      <div class="absolute inset-0 bg-blue-200 my-12 -ml-12 -mr-12"></div>
      <div class="relative pt-20 pb-32 px-8 bg-blue-300 text-center">
        <a class="inline-block mb-14" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo-white.svg" alt="">
        </a>
        <h2 class="mb-5 text-4xl md:text-5xl text-white font-bold font-heading">Join Our Newsletter</h2>
        <p class="mb-6 text-blue-100">Sign me up for Yofte newsletters to get exclusive perks.</p>
        <img class="mb-12 inline-block" src="yofte-assets/elements/quote.svg" alt="">
        <div class="relative max-w-xl mx-auto bg-white rounded-lg">
          <img class="absolute top-0 right-0 h-40 -mt-12 -mr-20" src="yofte-assets/elements/quote-light.png" alt="">
          <div class="relative lg:max-w-xl lg:mx-auto bg-white rounded-lg">
            <div class="relative flex flex-wrap items-center justify-between">
              <div class="relative flex-1">
                <span class="absolute top-0 left-0 ml-8 mt-4 font-semibold font-heading text-xs text-gray-400">Drop your e-mail</span>
                <input class="inline-block w-full pt-8 pb-4 px-8 placeholder-gray-900 border-0 focus:ring-transparent focus:outline-none rounded-md" type="text" placeholder="steven@example.dev">
              </div>
              <a class="inline-block w-auto bg-blue-800 hover:bg-blue-900 text-white font-bold font-heading py-6 px-8 rounded-md uppercase text-center" href="#">Join</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Newsletter from Shopal

Tailwind CSS

Shopal

Newsletter Sign-up Banner with Email Input and Subscribe Button

A centered newsletter sign-up section with a bold heading, supporting text, a single input field labeled 'Search now...', and a lime green Subscribe button. Decorative blue side panels with diagonal lime stripes and orange wavy lines frame the content on a white background.

<section class="relative bg-indigo-500 overflow-hidden">
  <img class="hidden md:block absolute top-1/2 right-0 2xl:mr-32 w-40 lg:w-52 xl:w-auto transform -translate-y-1/2 img-fluid z-10" src="shopal-assets/background/orange-waves-large.svg" alt="">
  <img class="hidden lg:block absolute bottom-0 left-0 mb-10 ml-6 img-fluid" src="shopal-assets/background/dots-blue-vertical.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="relative max-w-6xl py-24 md:py-32 px-4 mx-auto bg-white">
      <img class="hidden sm:block absolute top-0 left-0 h-full transform -translate-x-1/2 img-fluid" src="shopal-assets/background/green-lines.svg" alt="">
      <div class="sm:max-w-sm lg:max-w-lg xl:max-w-xl mx-auto text-center">
        <h3 class="text-3xl md:text-4xl font-black mb-6">Sign-up for our Newsletter</h3>
        <p class="text-base md:text-lg font-bold mb-6">Receive our latest updates about our products and promotions.</p>
        <div class="flex flex-wrap items-center justify-center -mx-3">
          <div class="w-full lg:w-2/3 px-3 mb-3 lg:mb-0">
            <input class="h-full w-full px-5 py-3 placeholder-black text-black font-bold border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="Search now...">
          </div>
          <div class="w-full lg:w-auto px-3">
            <a class="group relative inline-block h-12 w-full lg:w-32 -mb-2 bg-blueGray-900 rounded-md" href="#">
              <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                  <span class="text-base font-black text-black">Subscribe</span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Newsletter from Nigodo

Tailwind CSS

Nigodo

Centered newsletter signup with email input and Subscribe button

A centered newsletter signup section with a small pink eyebrow label, a bold heading, a supporting line, and an inline email field paired with a dark navy Subscribe button. A short privacy policy note sits beneath the form.

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="text-lg font-extrabold text-pink-500">Newsletter</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-4">Sign up for our newsletter</h1>
      <p class="text-xl font-extrabold leading-8 mb-10">Stay in the loop with everything you need to know.</p>
    </div>
    <div class="max-w-lg mx-auto">
      <div class="flex flex-wrap -mx-2 justify-center">
        <div class="flex-grow w-full md:w-auto px-2 mb-2">
          <input class="inline-block w-full p-4 text-lg font-extrabold placeholder-indigo-900 shadow border-2 border-indigo-900 rounded outline-none" type="email" placeholder="Enter your email">
        </div>
        <div class="w-full md:w-auto px-2 mb-2"><a class="inline-flex items-center justify-center w-full md:w-auto h-full py-4 px-5 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 rounded transition duration-200" href="#">Subscribe</a></div>
        <div class="w-full px-2">
          <p class="text-xs font-extrabold">We care about your data in our privacy policy</p>
        </div>
      </div>
    </div>
  </div>
</section>

Newsletter from Atis

Tailwind CSS

Atis

Centered Hero with Email Signup Form

A light, centered hero section with a multicolor logo mark, a bold two-line headline, short gray supporting text, and an inline email input paired with a purple Sign Up button. It serves as a marketing introduction with a single lead-capture call to action.

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="max-w-xl mx-auto text-center">
        <a class="mb-6 inline-block text-3xl font-bold leading-none" href="#">
          <img class="h-12" src="atis-assets/logo/atis/atis-color-sign.svg" alt="" width="auto">
        </a>
        <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading">So much more than a business analytics tool</h2>
        <p class="mb-8 text-gray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        <form class="mx-auto" action="">
          <div class="max-w-md mx-auto flex flex-wrap items-center">
            <input class="flex-grow py-3 px-4 mr-4 text-xs rounded leading-loose" type="email" placeholder="example@shuffle.dev">
            <button class="w-auto py-2 px-6 rounded-t-xl rounded-l-xl bg-purple-600 hover:bg-purple-700 text-white font-bold leading-loose transition duration-200">Sign Up</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="skew skew-bottom mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-bottom ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
    </svg>
  </div>
</section>

Newsletter from BoldUI

Tailwind CSS

BoldUI

Dark Newsletter Signup Section with Email Input and Photo

A dark full-width newsletter signup section with a bold serif-style heading, supporting text, and a pill-shaped email input with a yellow Go button. A blob-shaped portrait photo on the right adds a visual accent against the black background.

<section class="py-20 bg-black overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="flex flex-wrap justify-center items-center">
      <div class="z-10 w-full md:w-1/2">
        <div class="max-w-md">
          <h2 class="mb-2 text-4xl text-white font-heading">Sign up to our newsletter</h2>
          <p class="mb-10 text-xl text-gray-500">Take a big step forward in growing your business with this great tool.</p>
        </div>
        <div class="flex px-8 py-4 bg-black rounded-full border border-white">
          <input class="w-full bg-transparent text-white placeholder-white outline-none" type="email" placeholder="Type your e-mail">
          <button class="flex items-center text-yellow-300 hover:text-yellow-400">
            <span class="mr-2">Go</span>
            <svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3H0V5H12.01V8L16 4L12.01 0V3Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 md:-ml-64">
        <img class="absolute top-0 left-0" src="boldui-assets/elements/shadow-blue-full.svg" alt="">
        <div class="clip-path-2 transform rotate-45">
          <img class="h-full w-full transform -rotate-45 object-cover" src="boldui-assets/images/photo-women.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Newsletter from Acros

Tailwind CSS

Acros

Teal Newsletter Signup Banner with Email Input

A full-width teal banner with a serif heading, supporting text, and a horizontal row containing an email input field and a white Sign up button. The content is split into a left text block and a right form area.

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="pt-12 pb-14 px-8 sm:px-24 bg-green-500 rounded-md">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
          <h2 class="max-w-xs font-heading text-3xl sm:text-4xl text-white mb-4">Sign up to our newsletter</h2>
          <p class="text-lg text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <form action="">
            <div class="md:flex lg:max-w-md ml-auto">
              <input class="block flex-grow-1 w-full py-4 px-6 mb-4 md:mb-0 sm:mr-4 font-heading text-green-50 bg-green-600 placeholder-green-100 outline-none rounded-sm" type="email" placeholder="Type your e-mail">
              <button class="inline-block flex-shrink-0 w-full md:w-auto py-4 px-6 text-center font-heading font-medium text-base bg-white hover:bg-gray-50 rounded-sm transition duration-200" type="submit">Sign up</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Newsletter from Bendis

Tailwind CSS

Bendis

Newsletter Signup Banner with Email Input

A horizontal newsletter subscription banner on a blue background, with a bold heading and supporting text on the left and an email input paired with a yellow Sign Up button on the right. The light card-like panel contains the form and promotional copy in a single row.

<section class="py-24 bg-blue-800">
  <div class="container px-4 mx-auto">
    <div class="bg-blue-50 p-8 lg:px-16 lg:py-20">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-3/5 px-4 mb-6 md:mb-0">
          <h3 class="mb-2 text-2xl font-bold font-heading text-blue-800">Sign up to our newsletter</h3>
          <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="w-full md:w-2/5 px-4">
          <form action="#">
            <div class="flex flex-wrap lg:flex-nowrap">
              <input class="w-full mb-4 lg:mb-0 py-5 pl-4 bg-white text-sm text-gray-500 bg-transparent border border-blue-300" type="text" placeholder="Type your e-mail">
              <button class="w-full lg:w-auto py-5 px-6 text-sm text-blue-800 uppercase font-bold bg-yellow-500 hover:bg-yellow-400 transition duration-200">Sign&nbsp;up</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Newsletter from Metis

Tailwind CSS

Metis

Centered Hero with Email Signup Form

A centered hero section with a two-line bold heading, a muted subheading, and an inline email input paired with a blue Sign Up button. It is a simple light-background landing section for collecting email addresses.

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto text-center">
      <h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading">
        <span>Lorem ipsum</span>
        <span class="text-blue-600">dolor sit</span>
        <span>amet, consectetur adipiscing.</span>
      </h2>
      <p class="mb-8 text-blueGray-400">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
      <div class="flex flex-wrap max-w-lg mx-auto">
        <div class="flex w-full md:w-2/3 px-3 mb-3 md:mb-0 md:mr-6 bg-blueGray-100 rounded">
          <svg class="h-6 w-6 my-auto text-blueGray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
          </svg>
          <input class="w-full pl-3 py-4 text-xs text-blueGray-400 font-semibold leading-none bg-blueGray-100 outline-none" type="text" placeholder="Type your e-mail">
        </div>
        <button class="w-full md:w-auto py-4 px-8 text-xs text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" type="submit">Sign Up</button>
      </div>
    </div>
  </div>
</section>

Newsletters are the bread and butter of any business. Our Tailwind components newsletter will allow you to build your mailing base effectively.

Choose from many variations of the Tailwind components newsletter. The variants shown here are available in various UI libraries in the Shuffle editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Tailwind website template. Each library is designed by a professional designer and coded by our team of developers.

Get access to all sections of the Tailwind components newsletter, code and our editor. Try the demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Newsletter Components

Framework

UI Library

Components

Newsletter from Saturn

Newsletter Signup Hero with Email Input and Ghost Illustration

Newsletter from DarkPro

Newsletter Signup Banner with Inline Email Input

Newsletter from Flaro

Centered Newsletter Signup Form with Purple Subscribe Button

Your next website starts here

Newsletter from Gradia

Dark newsletter signup form with name and email fields

Newsletter from Solstice

Newsletter Subscribe Section with Study Session Illustration

Newsletter from Zanrly

Side-by-side CTA cards for careers and newsletter subscription

Newsletter from Nightsable

Dark Newsletter Signup Hero with Email Form and Photo

Newsletter from Zeus

Newsletter Signup Banner with Email Form

Newsletter from Wrexa

Centered Newsletter Signup Form with Email Input

Newsletter from Zospace

Dark Newsletter Subscribe Banner with Email Input

Newsletter from Flex

Centered newsletter signup section with email input and subscribe button

Newsletter from Uinel

Centered newsletter signup with inline email field

Newsletter from Yofte

Newsletter Signup Card with Email Input and Join Button

Newsletter from Shopal

Newsletter Sign-up Banner with Email Input and Subscribe Button

Newsletter from Nigodo

Centered newsletter signup with email input and Subscribe button

Newsletter from Atis

Centered Hero with Email Signup Form

Newsletter from BoldUI

Dark Newsletter Signup Section with Email Input and Photo

Newsletter from Acros

Teal Newsletter Signup Banner with Email Input

Newsletter from Bendis

Newsletter Signup Banner with Email Input

Newsletter from Metis

Centered Hero with Email Signup Form

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support