Email Subscription Footer Using Tailwind UI
A Tailwind-designed email subscription footer that elegantly combines form and function, encouraging user engagement and seamlessly integrating into the overall website aesthetics.
footer
Loading component...
168 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<!-- inspired design by https://us.typology.com/ -->
<div class="py-12">
<footer class="w-full relative z-1 bg-[#f4f4f2]">
<div class="px-4 bg-white md:px-20 ">
<div class="flex flex-col py-10 md:container md:py-20 md:gap-5 md:grid grid-template-cols-custom">
<div class="flex items-center order-2 px-4 md:order-1 md:px-0 md:col-span-2">
<h3 class="text-xl font-medium leading-7 md:leading-9 md:text-3xl">We investigate the right
ingredients for each skin typology. Our formulations are concise, concentrated, and made in France.</h3>
</div>
<div
class="flex items-center justify-center order-1 px-4 mb-8 md:px-0 md:order-2 md:col-start-4 md:col-span-1 md:justify-start md:mb-0">
<div class="mr-6 md:mr-8">
<a href="">
<img
src="https://us.typology.com/assets/static/en-b-corp-logo.5248179.86ff08c03a201d435a8e72e2f69fd784.svg"
width="97">
</a>
</div>
<img src="https://us.typology.com/assets/static/peta-logo.ed91d25.7ac4d76b706d71bd3280f0c81784c9e0.svg"
width="157">
</div>
</div>
</div>
<div class="container px-8 py-10 md:py-15 md:px-20">
<div class="grid grid-cols-1 md:col-gap-5 grid-template-cols-custom">
<div class="grid grid-cols-1 col-span-2 gap-0 space-y-5 md:gap-5 md:grid-cols-2 md:space-y-0">
<div>
<div class="relative">
<p class="text-base font-medium leading-6 md:uppercase md:text-sm md:leading-5 md:tracking-02">About</p>
<svg width="12" height="7" viewBox="0 0 12 7" xmlns="http://www.w3.org/2000/svg"
class="absolute transition duration-300 fill-current md:hidden right-1 top-2 linear">
<path
d="M9.60002 0L5.5 4.10001L1.40003 6.31809e-06L2.95639e-05 1.40001L5.5 7.00001L11.1 1.5L9.60002 0Z">
</path>
</svg>
</div>
<div class="hidden mt-3 md:block">
<ul class="space-y-1 font-mono text-sm leading-6 tracking-02 md:block md:max-w-64">
<li><a href="#" class="hover:underline">Our story</a></li>
<li><a href="#" class="hover:underline">The Black for Good movement</a></li>
<li><a href="#" class="hover:underline">Formulation charter</a></li>
<li><a href="#" class="hover:underline">Packaging philosophy</a></li>
<li><a href="#" class="hover:underline">Customer reviews</a></li>
<li><a href="#" class="hover:underline">Jobs</a></li>
<li><a href="#" class="hover:underline">Affiliate Program</a></li>
</ul>
</div>
</div>
<div>
<div class="relative">
<p class="text-base font-medium leading-6 md:uppercase md:text-sm md:leading-5 md:tracking-02">Help</p>
<svg width="12" height="7" viewBox="0 0 12 7" xmlns="http://www.w3.org/2000/svg"
class="absolute transition duration-300 fill-current md:hidden right-1 top-2 linear">
<path
d="M9.60002 0L5.5 4.10001L1.40003 6.31809e-06L2.95639e-05 1.40001L5.5 7.00001L11.1 1.5L9.60002 0Z">
</path>
</svg>
</div>
<div class="hidden mt-3 md:block">
<ul class="space-y-1 font-mono text-sm leading-6 tracking-02 md:block md:max-w-64">
<li><a href="#" class="hover:underline">Frequently asked questions</a></li>
<li><a href="#" class="hover:underline">Shipping and returns</a></li>
<li><a href="#" class="hover:underline">Terms of sales</a></li>
<li><a href="#" class="hover:underline">Privacy policy</a></li>
<li><a href="#" class="hover:underline">Get in touch</a></li>
<li><a href="#" class="hover:underline">Press</a></li>
</ul>
</div>
</div>
</div>
<div class="mt-8 md:mt-0 md:col-start-4">
<div class="relative">
<button
class="relative flex items-center w-full leading-5 text-left bg-white border border-gray-500 cursor-pointer h-14 px-11 bg-flag text-13 tracking-02">
USA
<svg width="12" height="7" viewBox="0 0 12 7" xmlns="http://www.w3.org/2000/svg"
class="absolute right-0 mr-6 transform -translate-y-1/2 fill-current top-1/2">
<path
d="M9.60002 0L5.5 4.10001L1.40003 6.31809e-06L2.95639e-05 1.40001L5.5 7.00001L11.1 1.5L9.60002 0Z">
</path>
</svg>
</button>
<div class="absolute z-20 w-full bg-white border border-b-0 border-gray-500 bottom-full"
style="display:none;">
<ul class="py-3">
<li tabindex="0" class="py-3 pl-12 pr-6 text-sm leading-none uppercase cursor-pointer bg-flag">
Global
</li>
<li tabindex="1" class="py-3 pl-12 pr-6 text-sm leading-none uppercase cursor-pointer bg-flag">
UK
</li>
<li tabindex="2" class="py-3 pl-12 pr-6 text-sm leading-none uppercase cursor-pointer bg-flag">
France
</li>
<li tabindex="3" class="py-3 pl-12 pr-6 text-sm leading-none uppercase cursor-pointer bg-flag">
Belgium
</li>
<li tabindex="4" class="py-3 pl-12 pr-6 text-sm leading-none uppercase cursor-pointer bg-flag">
Germany
</li>
<li tabindex="5" class="py-3 pl-12 pr-6 text-sm leading-none uppercase cursor-pointer bg-flag">
Austria
</li>
</ul>
</div>
</div>
<p class="mt-8 text-base font-medium leading-6 md:mt-6 md:text-20 md:leading-7">
Receive our latest news by email
</p>
<form id="email_signup_footer" action="#">
<div class="font-normal">
<div class="px-4 py-4 text-sm leading-relaxed success_message" style="display:none;">
<p>Thank you for subscribing to our newsletter.</p>
</div>
<div class="mb-4 leading-snug text-red-700 uppercase text-10 error_message" style="display:none;">
</div>
</div>
<div class="relative klaviyo_form_actions"><input type="email" name="email" id="k_id_email"
placeholder="Enter email"
class="w-full pt-px pl-4 pr-12 text-sm placeholder-gray-700 bg-transparent bg-white border border-gray-500 h-14">
<button type="submit" class="absolute top-0 right-0 flex items-center justify-end w-12 h-full pr-5">
<svg width="13" height="12" viewBox="0 0 13 12" xmlns="http://www.w3.org/2000/svg" class="fill-current">
<path d="M0 4.8H8.5L5.5 1.7L7.2 0L13 6L7.2 12L5.5 10.3L8.5 7.2H0V4.8Z"></path>
</svg>
</button>
</div>
<p class="mt-3 leading-5 text-gray-700 text-13 tracking-02 klaviyo_form_actions">
By continuing, you accept our terms and conditions and our
<a href="#" class="underline">
privacy policy.
</a>
</p>
</form>
<div class="flex flex-col items-center mt-8 md:mt-6 md:flex-row">
<div class="flex justify-center order-2 h-6 space-x-3 md:justify-start md:order-1">
<a href="#" class="items-center block text-sm font-medium leading-none uppercase">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
<path
d="M11.9968 8.53233C9.79333 8.53233 7.99515 10.3305 7.99515 12.534C7.99515 14.7374 9.79333 16.5356 11.9968 16.5356C14.2002 16.5356 15.9984 14.7374 15.9984 12.534C15.9984 10.3305 14.2002 8.53233 11.9968 8.53233ZM23.9987 12.534C23.9987 10.8769 24.0137 9.23479 23.9206 7.5807C23.8275 5.65944 23.3893 3.95432 21.9843 2.5494C20.5764 1.14147 18.8743 0.706185 16.953 0.613124C15.2959 0.520063 13.6539 0.535073 11.9998 0.535073C10.3427 0.535073 8.70061 0.520063 7.04652 0.613124C5.12526 0.706185 3.42014 1.14447 2.01522 2.5494C0.607291 3.95732 0.172005 5.65944 0.0789442 7.5807C-0.014117 9.23779 0.000892919 10.8799 0.000892919 12.534C0.000892919 14.188 -0.014117 15.8331 0.0789442 17.4872C0.172005 19.4085 0.610293 21.1136 2.01522 22.5185C3.42314 23.9264 5.12526 24.3617 7.04652 24.4548C8.70361 24.5478 10.3457 24.5328 11.9998 24.5328C13.6569 24.5328 15.2989 24.5478 16.953 24.4548C18.8743 24.3617 20.5794 23.9234 21.9843 22.5185C23.3923 21.1106 23.8275 19.4085 23.9206 17.4872C24.0167 15.8331 23.9987 14.191 23.9987 12.534ZM11.9968 18.691C8.58954 18.691 5.83973 15.9412 5.83973 12.534C5.83973 9.12672 8.58954 6.37691 11.9968 6.37691C15.404 6.37691 18.1538 9.12672 18.1538 12.534C18.1538 15.9412 15.404 18.691 11.9968 18.691ZM18.406 7.56269C17.6105 7.56269 16.968 6.92027 16.968 6.12474C16.968 5.32922 17.6105 4.6868 18.406 4.6868C19.2015 4.6868 19.8439 5.32922 19.8439 6.12474C19.8442 6.31365 19.8071 6.50074 19.735 6.6753C19.6628 6.84987 19.5569 7.00848 19.4233 7.14205C19.2897 7.27563 19.1311 7.38154 18.9565 7.45372C18.782 7.5259 18.5949 7.56293 18.406 7.56269Z">
</path>
</svg>
</a>
<a href="#" class="items-center block text-sm font-medium leading-none uppercase">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
<path
d="M19.3214 6.09637C19.1695 6.01788 19.0217 5.93183 18.8784 5.83855C18.4618 5.56314 18.0799 5.23862 17.7408 4.87199C16.8923 3.90121 16.5754 2.91637 16.4587 2.22684H16.4634C16.3659 1.65449 16.4062 1.28418 16.4123 1.28418H12.5479V16.227C12.5479 16.4276 12.5479 16.6259 12.5395 16.8218C12.5395 16.8462 12.5372 16.8687 12.5358 16.895C12.5358 16.9057 12.5358 16.917 12.5334 16.9282C12.5334 16.9311 12.5334 16.9339 12.5334 16.9367C12.4927 17.4728 12.3208 17.9907 12.0329 18.4449C11.7451 18.899 11.35 19.2754 10.8825 19.5411C10.3952 19.8183 9.84414 19.9637 9.28357 19.9629C7.4831 19.9629 6.02388 18.4948 6.02388 16.6817C6.02388 14.8686 7.4831 13.4004 9.28357 13.4004C9.62439 13.4001 9.96311 13.4537 10.2872 13.5593L10.2918 9.62465C9.30811 9.49758 8.30872 9.57576 7.35671 9.85426C6.4047 10.1328 5.52074 10.6055 4.7606 11.2428C4.09454 11.8215 3.53457 12.512 3.10591 13.2832C2.94279 13.5645 2.32732 14.6946 2.25279 16.5289C2.20591 17.57 2.51857 18.6486 2.66763 19.0943V19.1037C2.76138 19.3662 3.12466 20.262 3.71669 21.0171C4.19409 21.6229 4.75811 22.155 5.3906 22.5964V22.587L5.39997 22.5964C7.27076 23.8676 9.34497 23.7842 9.34497 23.7842C9.70404 23.7696 10.9068 23.7842 12.2728 23.1368C13.7878 22.4192 14.6503 21.35 14.6503 21.35C15.2013 20.7111 15.6394 19.983 15.9459 19.197C16.2956 18.2778 16.4123 17.1753 16.4123 16.7346V8.80715C16.4592 8.83527 17.0836 9.24824 17.0836 9.24824C17.0836 9.24824 17.9831 9.8248 19.3865 10.2003C20.3934 10.4675 21.75 10.5237 21.75 10.5237V6.68746C21.2747 6.73902 20.3095 6.58902 19.3214 6.09637Z">
</path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>