Footer With Subscribe Form - Tailwind Component
This simple footer tailwind component with newsletter subscription input. it is use Tailwind CSS to create this beautiful footer tailwind component.
footer
Loading component...
39 lines
<h1 class="text-center font-bold py-10 text-3xl">Footer With Subscribe Form</h1>
<div class="container mx-auto px-5 md:px-0">
<footer class="text-gray-100 bg-gray-800">
<div class="max-w-5xl mx-auto py-5">
<h1 class="text-center font-semibold text-xl lg:text-4xl">Join the Brand Media mailing list</h1>
<p class="text-center px-20 py-1">Sign up to the newsletter and be the first one to know about new product or
special offers.</p>
<div class="flex justify-center mt-6">
<div class="flex-row">
<div class="bg-white rounded-lg">
<div class="flex flex-warp justify-between md:flex-row">
<input type="email"
class="m-1 p-3 md:w-96 appearance-none border-none text-gray-700 text-sm font-medium focus:outline-none focus:border-white focus:rounded focus:placeholder-transparent"
placeholder="Enter your email" aria-label="Enter your email">
<button
class="w-full text-sm m-1 p-2 text-sm bg-gray-800 rounded-lg font-semibold lg:w-auto hover:bg-gray-700">Subscribe</button>
</div>
</div>
<p class="text-sm ml-1 mt-2 font-light text-gray-300">We wan't spam. Pinky promise</p>
</div>
</div>
<hr class="h-px mt-6 bg-gray-500 border-none">
<div class="flex flex-col items-center justify-between mt-6 md:flex-row">
<div class="flex-row flex-1 text-center md:text-left mx-5">
<a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
<p class="">Brand - Lorem ipsum dolor sit amet consectetur adipisicing elit, soluta consequuntur architecto obcaecati remdicta repellendus.</p>
</div>
<div class="flex-1 mt-4 md:m-0">
<div class="md:ml-20">
<a href="#" class="px-4 md:pl-10 md:pr-4 text-sm text-gray-100 font-medium hover:text-gray-400">About</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Blog</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Contact</a>
</div>
</div>
</div>
</div>
</footer>
</div>