Website Footer Design Using Tailwind UI
Tailwind Component: A stylish and functional website footer design created using Tailwind UI. inspiration design by Jordan Hughes from Dribbble.
footer
Loading component...
245 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>
<div class="space-y-6 px-8 py-10 bg-gray-200 w-full">
<footer class="px-8 py-8 sm:px-24 sm:py-16 bg-white text-purple-900 rounded-lg max-w-7xl">
<div class="text-center pl-6 sm:pl-0 mb-12 sm:mb-24">
<div class="flex space-x-2 items-center sm:justify-center mb-6">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C13.4702 20 14.8478 19.6034 16.0316 18.9114L15.0237 17.1835C14.1359 17.7026 13.1027 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12V13C18 13.5523 17.5523 14 17 14C16.4477 14 16 13.5523 16 13V9H14.6458C13.9407 8.37764 13.0144 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C13.0465 16 13.9991 15.5982 14.7119 14.9404C15.2622 15.5886 16.0831 16 17 16C18.6569 16 20 14.6569 20 13V12ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10Z"
fill="rgb(49 46 129)">
</path>
</svg>
<h4 class="text-xl font-semibold">Company</h4>
</div>
<ul
class="list-none flex flex-col sm:flex-row sm:items-center items-start text-right justify-center gap-4 text-base font-medium text-purple-600">
<li><a href="#" class="hover:text-purple-800">Overview</a></li>
<li><a href="#" class="hover:text-purple-800">Features</a></li>
<li><a href="#" class="hover:text-purple-800">Pricing</a></li>
<li><a href="#" class="hover:text-purple-800">Careers</a></li>
<li><a href="#" class="hover:text-purple-800">Help</a></li>
<li><a href="#" class="hover:text-purple-800">Privacy</a></li>
</ul>
</div>
<div class="flex flex-col sm:flex-row justify-between sm:items-center space-y-4 sm:space-y-0">
<div class="bg-purple-200 rounded-full">
<div class="flex flex-warp justify-between md:flex-row">
<input type="email"
class="m-1 py-2 px-4 w-full md:w-72 rounded-full bg-purple-200 appearance-none border-none text-purple-800 placeholder:text-purple-900 text-sm font-medium focus:outline-none"
placeholder="Enter your email" aria-label="Enter your email">
<button
class="text-xs py-2 px-4 bg-purple-800 text-purple-100 rounded-full font-semibold lg:w-auto hover:text-purple-50 hover:bg-purple-900">
<svg class="sm:hidden w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M22 14H20V7.23792L12.0718 14.338L4 7.21594V19H14V21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V14ZM4.51146 5L12.0619 11.662L19.501 5H4.51146ZM19 22L15.4645 18.4645L16.8787 17.0503L19 19.1716L22.5355 15.636L23.9497 17.0503L19 22Z"
fill="#fff"></path>
</svg>
<span class="hidden sm:block">Subscribe</span>
</button>
</div>
</div>
<div class="text-sm">
© 2023 Company. All Rights Reserved.
</div>
</div>
</footer>
<footer class="px-8 py-8 sm:px-24 sm:py-16 bg-white text-purple-900 rounded-lg max-w-7xl">
<div class="flex flex-col sm:flex-row justify-between items-start space-y-4 sm:space-y-0 mb-16">
<div class="">
<h1 class="text-2xl font-semibold mb-2">Join our newsletter</h1>
<p class="text-sm text-indigo-600">We'll send you a nice letter once per week. No spam.</p>
</div>
<div class="bg-purple-200 rounded-full">
<div class="flex flex-warp justify-between md:flex-row">
<input type="email"
class="m-1 py-2 px-4 w-full md:w-72 rounded-full bg-purple-200 appearance-none border-none text-purple-800 placeholder:text-purple-900 text-sm font-medium focus:outline-none"
placeholder="Enter your email" aria-label="Enter your email">
<button
class="text-xs py-2 px-4 bg-purple-800 text-purple-100 rounded-full font-semibold lg:w-auto hover:text-purple-50 hover:bg-purple-900">
<svg class="sm:hidden w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M22 14H20V7.23792L12.0718 14.338L4 7.21594V19H14V21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V14ZM4.51146 5L12.0619 11.662L19.501 5H4.51146ZM19 22L15.4645 18.4645L16.8787 17.0503L19 19.1716L22.5355 15.636L23.9497 17.0503L19 22Z"
fill="#fff"></path>
</svg>
<span class="hidden sm:block">Subscribe</span>
</button>
</div>
</div>
</div>
<div class="pt-10 text-left">
<div class="flex flex-col sm:flex-row items-start justify-between">
<div class="mb-5">
<div class="flex space-x-2 items-center mb-8">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C13.4702 20 14.8478 19.6034 16.0316 18.9114L15.0237 17.1835C14.1359 17.7026 13.1027 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12V13C18 13.5523 17.5523 14 17 14C16.4477 14 16 13.5523 16 13V9H14.6458C13.9407 8.37764 13.0144 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C13.0465 16 13.9991 15.5982 14.7119 14.9404C15.2622 15.5886 16.0831 16 17 16C18.6569 16 20 14.6569 20 13V12ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10Z"
fill="rgb(49 46 129)">
</path>
</svg>
<h4 class="text-xl font-semibold">Company</h4>
</div>
<p class="text-sm font-medium text-purple-600 w-64">Design amazing digital experiences that create more
happy in the world.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-2 md:gap-16 ml-4 md:ml-12">
<div class="mb-5">
<h4 class="pb-4 font-semibold text-sm">Product</h4>
<ul class="text-purple-600 text-base">
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Overview</a></li>
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Features</a></li>
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Solutions</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Tutorials</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Pricing</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Releases</a></li>
</ul>
</div>
<div class=" mb-5">
<h4 class="pb-4 font-semibold text-sm">Company</h4>
<ul class="ext-purple-600 text-base">
<li class="pb-4"> <a href="#" class="hover:text-purple-800">About us</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Careers</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Press</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">News</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Medical kits</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Contact</a></li>
</ul>
</div>
<div class=" mb-5">
<h4 class="pb-4 font-semibold text-sm">Resources</h4>
<ul class="ext-purple-600 text-base">
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Blog</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Newsletter</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Event</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Help centre</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Tutorials</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Supports</a></li>
</div>
<div class=" mb-5">
<h4 class="pb-4 font-semibold text-sm">Social</h4>
<ul class="ext-purple-600 text-base">
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Twitter</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Linkedin</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Facebook</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Github</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">AngelList</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Dribbble</a></li>
</div>
<div class=" mb-5">
<h4 class="pb-4 font-semibold text-sm">Legal</h4>
<ul class="ext-purple-600 text-base">
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Terms</a></li>
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Privacy</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Cookies</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Licenses</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Settings</a></li>
<li class=" pb-4"> <a href="#" class="hover:text-purple-800">Contact</a></li>
</div>
</div>
</div>
</div>
<div class="flex flex-col sm:flex-row justify-between sm:items-center space-y-4 sm:space-y-0 pt-10">
<div class="text-sm">
© 2023 Company. All Rights Reserved.
</div>
<div class="gap-6">
<a href="#" class="mx-1 inline-block pt-1">
<svg class="w-6 h-6 text-purple-700 hover:text-purple-900 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M22.2125 5.65605C21.4491 5.99375 20.6395 6.21555 19.8106 6.31411C20.6839 5.79132 21.3374 4.9689 21.6493 4.00005C20.8287 4.48761 19.9305 4.83077 18.9938 5.01461C18.2031 4.17106 17.098 3.69303 15.9418 3.69434C13.6326 3.69434 11.7597 5.56661 11.7597 7.87683C11.7597 8.20458 11.7973 8.52242 11.8676 8.82909C8.39047 8.65404 5.31007 6.99005 3.24678 4.45941C2.87529 5.09767 2.68005 5.82318 2.68104 6.56167C2.68104 8.01259 3.4196 9.29324 4.54149 10.043C3.87737 10.022 3.22788 9.84264 2.64718 9.51973C2.64654 9.5373 2.64654 9.55487 2.64654 9.57148C2.64654 11.5984 4.08819 13.2892 6.00199 13.6731C5.6428 13.7703 5.27232 13.8194 4.90022 13.8191C4.62997 13.8191 4.36771 13.7942 4.11279 13.7453C4.64531 15.4065 6.18886 16.6159 8.0196 16.6491C6.53813 17.8118 4.70869 18.4426 2.82543 18.4399C2.49212 18.4402 2.15909 18.4205 1.82812 18.3811C3.74004 19.6102 5.96552 20.2625 8.23842 20.2601C15.9316 20.2601 20.138 13.8875 20.138 8.36111C20.138 8.1803 20.1336 7.99886 20.1256 7.81997C20.9443 7.22845 21.651 6.49567 22.2125 5.65605Z">
</path>
</svg>
</a>
<a href="#" class="mx-1 inline-block pt-1">
<svg class="w-6 h-6 text-purple-700 hover:text-purple-900 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z">
</path>
</svg>
</a>
<a href="#" class="mx-1 inline-block pt-1">
<svg class="w-6 h-6 text-purple-700 hover:text-purple-900 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M12.001 2C6.47813 2 2.00098 6.47715 2.00098 12C2.00098 16.9913 5.65783 21.1283 10.4385 21.8785V14.8906H7.89941V12H10.4385V9.79688C10.4385 7.29063 11.9314 5.90625 14.2156 5.90625C15.3097 5.90625 16.4541 6.10156 16.4541 6.10156V8.5625H15.1931C13.9509 8.5625 13.5635 9.33334 13.5635 10.1242V12H16.3369L15.8936 14.8906H13.5635V21.8785C18.3441 21.1283 22.001 16.9913 22.001 12C22.001 6.47715 17.5238 2 12.001 2Z">
</path>
</svg>
</a>
<a href="#" class="mx-1 inline-block pt-1">
<svg class="w-6 h-6 text-purple-700 hover:text-purple-900 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z">
</path>
</svg>
</a>
<a href="#" class="mx-1 inline-block pt-1">
<svg class="w-6 h-6 text-purple-700 hover:text-purple-900 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M9.90338 21.8387C5.539 21.8387 2.00098 18.3003 2.00098 13.9355C2.00098 10.2901 4.46846 7.05968 7.82477 6.30851C11.746 5.4309 13.5286 4.74194 14.9016 2C15.9002 3.93518 15.2254 5.70968 14.9029 6.67742C19.5998 5.54839 21.2732 3.39627 21.6763 3.12903C21.6763 7.08065 20.4448 9.58065 19.2572 11.1935C20.733 11.1382 21.2656 10.7097 22.001 10.6071C21.6763 12.0553 20.5 14.0968 17.67 15.4017C16.9827 19.066 13.7668 21.8387 9.90338 21.8387ZM13.6127 15.3871C13.6127 15.7097 13.5595 15.871 13.2095 15.871L10.0592 15.873L13.0203 12.6251C13.8799 11.7653 13.8799 11.3354 13.8799 10.2369C13.8799 9.90252 13.8322 9.52041 13.9277 9.18607C13.9754 9.04278 13.8799 8.99501 13.7367 9.04278C13.4023 9.1383 12.8292 9.1383 11.8741 9.1383H7.57579C7.33699 9.1383 7.24148 8.99501 7.33699 8.80396C7.33699 8.75619 7.33699 8.6129 7.24147 8.6129C6.62061 8.89949 6.47734 10.1891 6.52509 11.0011C6.52509 11.431 6.76389 11.6698 7.0982 11.6698H10.4891L7.00268 15.3953C6.76389 15.6819 6.52509 16.064 6.52509 16.5894V17.6402C6.52509 18.1179 6.81165 18.4045 7.33699 18.5H13.3248C13.8799 18.5 14.2578 18.2665 14.2578 17.6452V16.5161C14.2578 16.3076 14.2578 15.5484 13.6127 15.3871Z">
</path>
</svg>
</a>
<a href="#" class="mx-1 inline-block pt-1">
<svg class="w-6 h-6 text-purple-700 hover:text-purple-900 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M12 2C6.47939 2 2 6.47939 2 12C2 17.5206 6.47939 22 12 22C17.5098 22 22 17.5206 22 12C22 6.47939 17.5098 2 12 2ZM18.6052 6.60954C19.7983 8.06291 20.5141 9.91756 20.5358 11.9241C20.2538 11.8699 17.4338 11.295 14.5922 11.6529C14.5271 11.5119 14.4729 11.3601 14.4078 11.2083C14.2343 10.7961 14.0391 10.3731 13.8438 9.97181C16.9891 8.692 18.4208 6.84816 18.6052 6.60954ZM12 3.47506C14.1692 3.47506 16.154 4.28851 17.6616 5.62256C17.5098 5.83948 16.2191 7.56399 13.1822 8.70281C11.7831 6.13232 10.2321 4.0282 9.9935 3.70282C10.6334 3.55097 11.3059 3.47506 12 3.47506ZM8.36662 4.27766C8.59437 4.58134 10.1128 6.69631 11.5336 9.21256C7.5423 10.2755 4.01736 10.2538 3.63774 10.2538C4.19089 7.60738 5.98047 5.40564 8.36662 4.27766ZM3.45336 12.0109C3.45336 11.9241 3.45336 11.8373 3.45336 11.7506C3.82212 11.7614 7.96529 11.8156 12.2277 10.5358C12.4773 11.013 12.705 11.5011 12.9219 11.9891C12.8134 12.0217 12.6941 12.0542 12.5857 12.0868C8.18221 13.5076 5.83948 17.3904 5.64425 17.7158C4.2885 16.2083 3.45336 14.2017 3.45336 12.0109ZM12 20.5466C10.026 20.5466 8.20391 19.8742 6.76139 18.7462C6.91323 18.4317 8.64856 15.0911 13.4642 13.41C13.4859 13.3991 13.4967 13.3991 13.5184 13.3883C14.7223 16.5011 15.2104 19.1149 15.3406 19.8633C14.3102 20.308 13.1822 20.5466 12 20.5466ZM16.7614 19.0824C16.6746 18.5618 16.2191 16.0672 15.1019 12.9978C17.7809 12.5748 20.1236 13.269 20.4165 13.3666C20.0478 15.7419 18.6811 17.7917 16.7614 19.0824Z">
</path>
</svg>
</a>
</div>
</div>
</footer>
<footer class="px-8 py-8 sm:px-24 sm:py-16 bg-white text-purple-900 rounded-lg max-w-7xl">
<div class="flex flex-col sm:flex-row justify-between items-start space-y-4 sm:space-y-0">
<div class="flex space-x-2 items-center sm:justify-center mb-6">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C13.4702 20 14.8478 19.6034 16.0316 18.9114L15.0237 17.1835C14.1359 17.7026 13.1027 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12V13C18 13.5523 17.5523 14 17 14C16.4477 14 16 13.5523 16 13V9H14.6458C13.9407 8.37764 13.0144 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C13.0465 16 13.9991 15.5982 14.7119 14.9404C15.2622 15.5886 16.0831 16 17 16C18.6569 16 20 14.6569 20 13V12ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10Z"
fill="rgb(49 46 129)">
</path>
</svg>
<h4 class="text-xl font-semibold">Company</h4>
</div>
<div class="space-y-8 text-right">
<div class="bg-purple-200 rounded-full">
<div class="flex flex-warp justify-between md:flex-row">
<input type="email"
class="m-1 py-2 px-4 w-full md:w-72 rounded-full bg-purple-200 appearance-none border-none text-purple-800 placeholder:text-purple-900 text-sm font-medium focus:outline-none"
placeholder="Enter your email" aria-label="Enter your email">
<button
class="text-xs py-2 px-4 bg-purple-800 text-purple-100 rounded-full font-semibold lg:w-auto hover:text-purple-50 hover:bg-purple-900">
<svg class="sm:hidden w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M22 14H20V7.23792L12.0718 14.338L4 7.21594V19H14V21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V14ZM4.51146 5L12.0619 11.662L19.501 5H4.51146ZM19 22L15.4645 18.4645L16.8787 17.0503L19 19.1716L22.5355 15.636L23.9497 17.0503L19 22Z"
fill="#fff"></path>
</svg>
<span class="hidden sm:block">Subscribe</span>
</button>
</div>
</div>
<div class="text-sm">
© 2023 Company. All Rights Reserved.
</div>
</div>
</div>
</footer>
</div>