Tailwind footer UI Design
Enhance your website SEO and user experience with a well-structured Tailwind footer UI design. Get free responsive tailwind footer ui design.
All Images use in this website for showing purpose only, if you want to use in your business website please purchase it.
Preview
Contact
82 Sanfransisco, New light street.
Stay in the loop with everything you need to know.
Bikes
Pages
legal titles
© 2024-2028 Motorad, Inc. All rights reserved.
Show Code
<div class="py-10 px-4 lg:px-0">
<div class="container relative flex flex-col justify-between gap-10 lg:flex-row lg:gap-14">
<div>
<a href="/" class="mb-8 inline-flex">
<img src="https://designcools.com/wp-content/uploads/2024/10/x1Yellow.jpg" alt="footer section design" loading="lazy" class="w-28" />
</a>
<div class="flex gap-3 text-white">
<a href="/" class="h-8 w-8 flex items-center justify-center rounded-full border-2 border-white bg-[#27D045] transition hover:scale-110" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 256 256">
<path
d="M152.58,145.23l23,11.48A24,24,0,0,1,152,176a72.08,72.08,0,0,1-72-72A24,24,0,0,1,99.29,80.46l11.48,23L101,118a8,8,0,0,0-.73,7.51,56.47,56.47,0,0,0,30.15,30.15A8,8,0,0,0,138,155ZM232,128A104,104,0,0,1,79.12,219.82L45.07,231.17a16,16,0,0,1-20.24-20.24l11.35-34.05A104,104,0,1,1,232,128Zm-40,24a8,8,0,0,0-4.42-7.16l-32-16a8,8,0,0,0-8,.5l-14.69,9.8a40.55,40.55,0,0,1-16-16l9.8-14.69a8,8,0,0,0,.5-8l-16-32A8,8,0,0,0,104,64a40,40,0,0,0-40,40,88.1,88.1,0,0,0,88,88A40,40,0,0,0,192,152Z"
></path>
</svg>
</a>
<a href="/" class="h-8 w-8 flex items-center justify-center rounded-full border-2 border-white bg-[#0866FE] transition hover:scale-110" target="_blank">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.00197 1.49951C4.85982 1.49951 1.50195 4.85737 1.50195 8.99951C1.50195 12.743 4.24459 15.8457 7.83009 16.4084V11.1675H5.92578V8.99951H7.83009V7.34717C7.83009 5.46748 8.94977 4.4292 10.6629 4.4292C11.4835 4.4292 12.3418 4.57568 12.3418 4.57568V6.42139H11.396C10.4644 6.42139 10.1738 6.99952 10.1738 7.59266V8.99951H12.2539L11.9214 11.1675H10.1738V16.4084C13.7593 15.8457 16.502 12.743 16.502 8.99951C16.502 4.85737 13.1441 1.49951 9.00197 1.49951Z"
fill="currentColor"
></path>
</svg>
<span class="sr-only">facebook</span>
</a>
<a href="/" class="h-8 w-8 flex items-center justify-center rounded-full border-2 border-white bg-[#FD0000] transition hover:scale-110" target="_blank">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.18195 2.99951C9.58253 3.00172 10.5847 3.01141 11.6496 3.05406L12.0272 3.07052C13.0993 3.12128 14.1705 3.208 14.7018 3.35614C15.4105 3.55522 15.9675 4.13614 16.1558 4.8725C16.4555 6.04182 16.493 8.32406 16.4977 8.87636L16.4984 8.99081V8.99884C16.4984 8.99884 16.4984 9.00161 16.4984 9.00694L16.4977 9.12139C16.493 9.67369 16.4555 11.9559 16.1558 13.1253C15.9649 13.8643 15.4079 14.4453 14.7018 14.6416C14.1705 14.7897 13.0993 14.8764 12.0272 14.9272L11.6496 14.9436C10.5847 14.9863 9.58253 14.996 9.18195 14.9982L9.00615 14.9988H8.99835C8.99835 14.9988 8.99572 14.9988 8.99055 14.9988L8.8149 14.9982C7.9671 14.9936 4.42231 14.9553 3.29491 14.6416C2.58622 14.4425 2.02921 13.8616 1.84093 13.1253C1.54117 11.9559 1.5037 9.67369 1.49902 9.12139V8.87636C1.5037 8.32406 1.54117 6.04182 1.84093 4.8725C2.03182 4.13341 2.58883 3.5525 3.29491 3.35614C4.42231 3.04243 7.9671 3.00418 8.8149 2.99951H9.18195ZM7.49836 6.37387V11.6238L11.9984 8.99884L7.49836 6.37387Z"
fill="currentColor"
></path>
</svg>
<span class="sr-only">youtube</span>
</a>
<a href="/" class="h-8 w-8 flex items-center justify-center rounded-full border-2 border-white bg-[#1D9BF0] transition hover:scale-110" target="_blank">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.6594 4.2413C16.0868 4.49458 15.4796 4.66093 14.858 4.73485C15.5129 4.34276 16.0031 3.72594 16.237 2.9993C15.6215 3.36497 14.9479 3.62234 14.2454 3.76022C13.6523 3.12756 12.8235 2.76904 11.9564 2.77002C10.2245 2.77002 8.81978 4.17422 8.81978 5.90689C8.81978 6.1527 8.84798 6.39108 8.9007 6.62108C6.29286 6.4898 3.98256 5.2418 2.43509 3.34382C2.15647 3.82252 2.01004 4.36665 2.01078 4.92052C2.01078 6.00871 2.5647 6.9692 3.40612 7.53152C2.90803 7.51577 2.42091 7.38125 1.98539 7.13906C1.98491 7.15224 1.98491 7.16542 1.98491 7.17788C1.98491 8.69807 3.06615 9.96617 4.5015 10.2541C4.2321 10.327 3.95424 10.3638 3.67517 10.3636C3.47248 10.3636 3.27579 10.3449 3.0846 10.3082C3.48399 11.5541 4.64165 12.4612 6.0147 12.4861C4.9036 13.3581 3.53152 13.8312 2.11908 13.8292C1.86909 13.8294 1.61932 13.8146 1.37109 13.7851C2.80503 14.7069 4.47414 15.1961 6.17882 15.1943C11.9487 15.1943 15.1035 10.4149 15.1035 6.2701C15.1035 6.13449 15.1002 5.99841 15.0942 5.86424C15.7082 5.4206 16.2383 4.87102 16.6594 4.2413Z"
fill="currentColor"
></path>
</svg>
<span class="sr-only">twitter</span>
</a>
</div>
</div>
<div class="flex flex-col gap-8 gap-y-10 md:flex-row">
<div class="w-full grow md:max-w-lg">
<h3 class="mb-6 text-gray uppercase font-medium">
Contact
</h3>
<div class="space-y-5">
<div class="flex gap-2.5">
<span class="">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#000000" viewBox="0 0 256 256">
<path
d="M221.59,160.3l-47.24-21.17a14,14,0,0,0-13.28,1.22,4.81,4.81,0,0,0-.56.42l-24.69,21a1.88,1.88,0,0,1-1.68.06c-15.87-7.66-32.31-24-40-39.65a1.91,1.91,0,0,1,0-1.68l21.07-25a6.13,6.13,0,0,0,.42-.58,14,14,0,0,0,1.12-13.27L95.73,34.49a14,14,0,0,0-14.56-8.38A54.24,54.24,0,0,0,34,80c0,78.3,63.7,142,142,142a54.25,54.25,0,0,0,53.89-47.17A14,14,0,0,0,221.59,160.3ZM176,210C104.32,210,46,151.68,46,80A42.23,42.23,0,0,1,82.67,38h.23a2,2,0,0,1,1.84,1.31l21.1,47.11a2,2,0,0,1,0,1.67L84.73,113.15a4.73,4.73,0,0,0-.43.57,14,14,0,0,0-.91,13.73c8.87,18.16,27.17,36.32,45.53,45.19a14,14,0,0,0,13.77-1c.19-.13.38-.27.56-.42l24.68-21a1.92,1.92,0,0,1,1.6-.1l47.25,21.17a2,2,0,0,1,1.21,2A42.24,42.24,0,0,1,176,210Z"
></path>
</svg>
</span>
<a href="/" class="font-light">+1 708-359-5968</a>
</div>
<div class="flex gap-2.5">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#000000" viewBox="0 0 256 256">
<path
d="M128,66a38,38,0,1,0,38,38A38,38,0,0,0,128,66Zm0,64a26,26,0,1,1,26-26A26,26,0,0,1,128,130Zm0-112a86.1,86.1,0,0,0-86,86c0,30.91,14.34,63.74,41.47,94.94a252.32,252.32,0,0,0,41.09,38,6,6,0,0,0,6.88,0,252.32,252.32,0,0,0,41.09-38c27.13-31.2,41.47-64,41.47-94.94A86.1,86.1,0,0,0,128,18Zm0,206.51C113,212.93,54,163.62,54,104a74,74,0,0,1,148,0C202,163.62,143,212.93,128,224.51Z"
></path>
</svg>
</span>
<p class="font-light">
82 Sanfransisco, New light street.
</p>
</div>
</div>
</div>
<div class="w-full grow md:max-w-lg">
<h3 class="mb-4 leading-6 text-gray-700">
Stay in the loop with everything you need to know.
</h3>
<div class="flex flex-col items-start gap-2.5 gap-y-4 sm:flex-row sm:items-baseline">
<input type="text" placeholder="Enter email address" class="w-full border-b border-b-gray-200 font-light py-2 outline-none" />
<button type="button" class="group inline-flex gap-5 whitespace-nowrap border-b border-black pb-1.5 text-base/5 font-medium outline-none">
<span>SUBSCRIBE</span>
<span class="transition-all group-hover:-mr-1.5 group-hover:ml-1.5">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 8L22 12L18 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M2 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="container grid grid-cols-2 gap-2.5 gap-y-10 py-10 font-medium sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 lg:py-14">
<div>
<h2 class="mb-5 uppercase text-black">Bikes</h2>
<div class="flex flex-col font-light items-start gap-2 xl:gap-3.5">
<a href="/">Mountain bike</a>
<a href="/">Road</a>
<a href="/">Gravel</a>
<a href="/">Trekking</a>
<a href="/">Women</a>
</div>
</div>
<div>
<h2 class="mb-5 uppercase text-black">Gear</h2>
<div class="flex flex-col font-light items-start gap-2 xl:gap-3.5">
<a href="/">Helmets</a>
<a href="/">Clothing</a>
<a href="/">Gloves</a>
<a href="/">Shoes</a>
<a href="/">Backpacks</a>
<a href="/">Bags</a>
</div>
</div>
<div>
<h2 class="mb-5 uppercase text-black">Equipment</h2>
<div class="flex flex-col font-light items-start gap-2 xl:gap-3.5">
<a href="/">Lights</a>
<a href="/">Bike locks</a>
<a href="/">Pedals & cleats</a>
<a href="/">Grips & bar ends</a>
<a href="/">Kickstands</a>
<a href="/">Saddle</a>
</div>
</div>
<div>
<h2 class="mb-5 uppercase text-black">Pages</h2>
<div class="flex flex-col font-light items-start gap-2 xl:gap-3.5">
<a href="https://designcools.com/">Home</a>
<a href="https://designcools.com/about-tailwind-components/">About Us</a>
<a href="https://designcools.com/tailwind-ui-components-design/"> Components</a>
<a href="https://designcools.com/tailwind-css/">Blog</a>
</div>
</div>
<div>
<h2 class="mb-5 uppercase text-black">legal titles</h2>
<div class="flex flex-col font-light items-start gap-2 xl:gap-3.5">
<a href="https://designcools.com/tailwind-ui-components-contact/">Contact Us</a>
<a href="/">Returns</a>
<a href="https://designcools.com/tailwind-ui-design-component-privacy-policy/">Privacy Policy</a>
<a href="https://designcools.com/tailwind-components-terms-conditions/">Terms & Conditions</a>
</div>
</div>
</div>
<div class="container mx-auto flex w-full flex-col items-center justify-between gap-3">
<p class="order-2 text-center md:order-1 md:text-left">© 2024-<span>2028</span> Motorad, Inc. All rights reserved.</p>
<div class="order-1 flex gap-6 md:order-2"><a class="transition hover:underline" href="/">Privacy Policy</a><a class="transition hover:underline" href="/">Terms & Conditions</a></div>
</div>
</div>Preview
Show Code
<footer class="max-w-7xl py-24 mx-auto px-4 xl:px-0">
<div class="grid grid-cols-1 gap-y-6 sm:gap-y-0 sm:grid-cols-2">
<div>
<ul>
<li class="flex gap-x-4 items-center mb-4"><span class="text-sm">(01)</span><a class="text-2xl uppercase" href="/">Home</a></li>
<li class="flex gap-x-4 items-center mb-4"><span class="text-sm">(02)</span><a class="text-2xl uppercase" href="/">about</a></li>
<li class="flex gap-x-4 items-center mb-4"><span class="text-sm">(03)</span><a class="text-2xl uppercase" href="/">project</a></li>
<li class="flex gap-x-4 items-center mb-4"><span class="text-sm">(04)</span><a class="text-2xl uppercase" href="/">service</a></li>
<li class="flex gap-x-4 items-center mb-4"><span class="text-sm">(05)</span><a class="text-2xl uppercase" href="/">journal</a></li>
<li class="flex gap-x-4 items-center mb-4"><span class="text-sm">(06)</span><a class="text-2xl uppercase" href="/">contact</a></li>
</ul>
</div>
<div>
<h4 class="text-center sm:text-left text-7xl sm:text-8xl md:text-9xl lg:text-[10rem] xl:text-[13rem] leading-none font-bold">IQUBE</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 mt-12 gap-y-6 sm:gap-y-0 gap-x-0 sm:gap-x-6">
<div>
<label class="uppercase text-gray-700 tracking-wider text-sm">Email</label>
<p class="mt-1 text-base break-all">business00196@gmail.com</p>
<label class="uppercase text-gray-700 flex mt-10 tracking-wider text-sm">social</label>
<ul class="text-base mt-3">
<li><a href="/">Twitter</a></li>
<li><a href="/">Facbook</a></li>
<li><a href="/">LinkedIn</a></li>
</ul>
</div>
<div>
<label class="uppercase text-gray-700 tracking-wider text-sm">phone</label>
<p class="mt-1 text-base">+91 934783479</p>
<label class="uppercase text-gray-700 flex mt-10 tracking-wider text-sm">business details</label>
<p class="mt-3 text-base">VAT: NL866034080C09</p>
<p class="mt-1 text-base">LOCATION: UAE</p>
</div>
</div>
</div>
</div>
<div class="pt-8 mt-12 border-t flex-col sm:flex-row flex gap-y-2 sm:gap-y-0 justify-between items-center">
<p class="text-sm">©24 IQUBE All rights reserved</p>
<div class="text-sm flex flex-col sm:flex-row gap-y-2 sm:gap-y-0 items-center gap-x-6">
<a href="/">Terms & Conditions</a>
<a href="/">Privacy policy</a>
</div>
</div>
</footer>Preview
Our Location
Prefer doing things in person? We don’t but we have to list our addresses here for legal reasons.
Show Code
<div class="mx-auto max-w-7xl px-4 sxl:px-0">
<div class="grid grid-cols-1 gap-x-10 gap-y-12 sm:gap-y-24 lg:grid-cols-2">
<div class="lg:order-last">
<form>
<h2 class="font-display text-2xl sm:text-4xl font-medium text-neutral-950">Let’s Connect</h2>
<div class="isolate mt-6 -space-y-px rounded-xl bg-white/50">
<div class="group relative z-0 transition-all focus-within:z-10">
<input
autocomplete="name"
placeholder=" "
class="peer block w-full border border-neutral-300 bg-transparent px-6 pb-4 pt-12 text-base/6 text-neutral-950 ring-4 ring-transparent transition focus:border-neutral-950 focus:outline-none focus:ring-neutral-950/5 group-first:rounded-t-xl group-last:rounded-b-xl"
type="text"
name="name"
/>
<label
class="pointer-events-none absolute left-6 top-1/2 -mt-3 origin-left text-base/6 text-neutral-500 transition-all duration-200 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:font-semibold peer-focus:text-neutral-950 peer-[:not(:placeholder-shown)]:-translate-y-4 peer-[:not(:placeholder-shown)]:scale-75 peer-[:not(:placeholder-shown)]:font-semibold peer-[:not(:placeholder-shown)]:text-neutral-950"
>
Name
</label>
</div>
<div class="group relative z-0 transition-all focus-within:z-10">
<input
autocomplete="email"
placeholder=" "
class="peer block w-full border border-neutral-300 bg-transparent px-6 pb-4 pt-12 text-base/6 text-neutral-950 ring-4 ring-transparent transition focus:border-neutral-950 focus:outline-none focus:ring-neutral-950/5 group-first:rounded-t-xl group-last:rounded-b-xl"
type="email"
name="email"
/>
<label
class="pointer-events-none absolute left-6 top-1/2 -mt-3 origin-left text-base/6 text-neutral-500 transition-all duration-200 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:font-semibold peer-focus:text-neutral-950 peer-[:not(:placeholder-shown)]:-translate-y-4 peer-[:not(:placeholder-shown)]:scale-75 peer-[:not(:placeholder-shown)]:font-semibold peer-[:not(:placeholder-shown)]:text-neutral-950"
>
Email
</label>
</div>
<div class="group relative z-0 transition-all focus-within:z-10">
<input
placeholder=" "
class="peer block w-full border border-neutral-300 bg-transparent px-6 pb-4 pt-12 text-base/6 text-neutral-950 ring-4 ring-transparent transition focus:border-neutral-950 focus:outline-none focus:ring-neutral-950/5 group-first:rounded-t-xl group-last:rounded-b-xl"
type="text"
name="message"
/>
<label
class="pointer-events-none absolute left-6 top-1/2 -mt-3 origin-left text-base/6 text-neutral-500 transition-all duration-200 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:font-semibold peer-focus:text-neutral-950 peer-[:not(:placeholder-shown)]:-translate-y-4 peer-[:not(:placeholder-shown)]:scale-75 peer-[:not(:placeholder-shown)]:font-semibold peer-[:not(:placeholder-shown)]:text-neutral-950"
>
Message
</label>
</div>
</div>
<button class="mt-10 inline-flex rounded-full px-9 py-3 text-sm font-medium transition bg-neutral-950 text-white hover:bg-neutral-800" type="submit"><span class="relative top-px">Send Now</span></button>
</form>
</div>
<div class="flex flex-col justify-center">
<h2 class="font-display text-xl font-semibold text-neutral-950">Our Location</h2>
<p class="mt-6 text-base text-neutral-600">Prefer doing things in person? We don’t but we have to list our addresses here for legal reasons.</p>
<div class="mt-10 pt-10 relative before:absolute after:absolute before:bg-neutral-950 after:bg-neutral-950/10 before:left-0 before:top-0 before:h-px before:w-6 after:left-8 after:right-0 after:top-0 after:h-px">
<div class="mt-6 grid grid-cols-1 text-xl gap-8 sm:grid-cols-2">
<div>
<label class="font-semibold text-neutral-950">Email us:</label>
<p><a href="/" class="text-[1rem] text-neutral-600 hover:text-neutral-950">business00196@gmail.com</a></p>
</div>
<div>
<label class="font-semibold text-neutral-950">Call</label>
<p><a href="/" class="text-[1rem] text-neutral-600 hover:text-neutral-950">98348743899</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="mt-10 pt-10 relative mx-auto">
<h2 class="text-center font-display text-base font-semibold text-neutral-950">Follow us</h2>
<ul class="flex justify-center gap-x-10 text-neutral-950 mt-6">
<li>
<a aria-label="Facebook" href="https://facebook.com">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 fill-current">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12Z"
></path>
</svg>
</a>
</li>
<li>
<a aria-label="Instagram" href="https://instagram.com">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 fill-current">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465.668.25 1.272.644 1.772 1.153.509.5.902 1.104 1.153 1.772.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.903 4.903 0 0 1-1.153 1.772c-.5.509-1.104.902-1.772 1.153-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.903 4.903 0 0 1-1.772-1.153 4.902 4.902 0 0 1-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 0 1 1.153-1.772A4.902 4.902 0 0 1 5.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63Zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.096 3.096 0 0 0-.748-1.15 3.098 3.098 0 0 0-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058ZM12 6.865a5.135 5.135 0 1 1 0 10.27 5.135 5.135 0 0 1 0-10.27Zm0 1.802a3.333 3.333 0 1 0 0 6.666 3.333 3.333 0 0 0 0-6.666Zm5.338-3.205a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z"
></path>
</svg>
</a>
</li>
<li>
<a aria-label="GitHub" href="https://github.com">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 fill-current">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z"
></path>
</svg>
</a>
</li>
<li>
<a aria-label="Dribbble" href="https://dribbble.com">
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 fill-current">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2Zm6.605 4.61a8.502 8.502 0 0 1 1.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.42 25.42 0 0 0-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362ZM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.688 8.688 0 0 1 12 3.475Zm-3.633.803a53.889 53.889 0 0 1 3.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 0 1 4.729-5.975ZM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.523 8.523 0 0 1-2.191-5.705ZM12 20.547a8.482 8.482 0 0 1-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.32 35.32 0 0 1 1.823 6.475 8.402 8.402 0 0 1-3.341.684Zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 0 1-3.655 5.715Z"
></path>
</svg>
</a>
</li>
</ul>
</div>
</div>Preview
Show Code
<footer class="bg-[#212121] mt-24 pt-24 pb-6 relative">
<div class="absolute w-full text-black flex justify-center -top-[4rem] sm:-top-[9rem]">
<h4 class="text-[5rem] sm:text-[10rem] font-bold">
IQUBE
</h4>
</div>
<div class="max-w-7xl text-[1rem] mx-auto grid grid-cols-12 gap-x-4 gap-y-12 sm:gap-y-0 lg:gap-x-8 px-4 xl:px-0 ">
<div class="col-span-12 sm:col-span-4 pr-0 sm:pr-8">
<h4 class="text-3xl mb-6 text-white">
IQUBE
</h4>
<p class="text-[#b3b3b3] leading-relaxed">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
<div class="col-span-12 sm:col-span-2">
<label class="text-white text-lg font-medium inline-flex mb-4">About Us</label>
<ul class="flex text-[#b3b3b3] flex-col gap-3">
<li><a href="/">All Bikes</a></li>
<li><a href="/">Accessories</a></li>
<li><a href="/">Story</a></li>
<li><a href="/">Assurance</a></li>
<li><a href="/">Contact Us</a></li>
</ul>
</div>
<div class="col-span-12 sm:col-span-2">
<label class="text-white text-lg font-medium inline-flex mb-4">Range</label>
<ul class="flex text-[#b3b3b3] flex-col gap-3">
<li><a href="/">X-Factor</a></li>
<li><a href="/">Desire</a></li>
</ul>
</div>
<div class="col-span-12 sm:col-span-2">
<label class="text-white text-lg font-medium inline-flex mb-4">Assurance</label>
<ul class="flex text-[#b3b3b3] flex-col gap-3">
<li><a href="/">Warranty</a></li>
<li><a href="/">Insurance</a></li>
<li><a href="/">EMI</a></li>
<li><a href="/">Know Your E-cycle</a></li>
<li><a href="/">Find Stor</a></li>
</ul>
</div>
<div class="col-span-2">
<label class="text-white text-lg font-medium inline-flex mb-4">Help</label>
<ul class="flex text-[#b3b3b3] flex-col gap-3">
<li><a href="/">Support</a></li>
<li><a href="/">Contact</a></li>
<li><a href="/">Return</a></li>
</ul>
</div>
</div>
<div class="max-w-7xl border-b border-gray-600 border-t py-8 my-8 mx-auto text-[1rem] gap-y-6 sm:gap-y-2 grid grid-cols-12 px-4 xl:px-0">
<div class="col-span-12 sm:col-span-5 lg:col-span-7 flex items-center">
<h5 class="text-2xl sm:text-3xl text-white">
Stay in the loop
</h5>
</div>
<div class="col-span-12 sm:col-span-7 lg:col-span-5">
<div class="bg-transparent sm:bg-white rounded-full py-2 px-0 sm:px-3 flex-col sm:flex-row flex items-center">
<input type="email" placeholder="Email" class="p-3 mb-4 sm:mb-0 rounded-md sm:rounded-none w-full focus:outline-none" />
<button class="whitespace-nowrap w-full sm:w-auto text-lg bg-[#0071e3] py-2 px-6 rounded-md justify-center sm:rounded-full text-white flex items-center gap-x-4">
Send Now
</button>
</div>
</div>
</div>
<div class="max-w-7xl text-[1rem] text-[#b3b3b3] mx-auto justify-between px-4 xl:px-0 flex-col sm:flex-row gap-8 sm:gap-2 flex items-center">
<p>
Copyright © Better off 2024
</p>
<div>
<ul class="flex gap-x-6 gap-y-4 items-center">
<li><a href="/">Privacy Policy</a></li>
<li><a href="/">Terms & Conditions</a></li>
</ul>
</div>
</div>
</footer>Preview
9358934598
Contact
business00196@gmail.com
Phillips (Headquater Mumbai)
Company
PHILLIPS
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptatibus eos perspiciatis esse. Quae distinctio ad debitis tempora velit at temporibus pariatur, odio vitae quasi, hic eaque vel a reiciendis.
Copyright © 2024. All Right Reserved.
Show Code
<div class="max-w-7xl pt-24 pb-12 mx-auto px-4 xl:px-0">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 lg:grid-cols-3">
<div class="">
<p class="">9358934598</p>
<p class="text-[#697565] font-bold text-[1rem]">Contact</p>
</div>
<div class="">
<p class="">business00196@gmail.com</p>
<p class="text-[#697565] font-bold text-[1rem]">Email</p>
</div>
<div class="">
<p class="">Phillips (Headquater Mumbai)</p>
<p class="text-[#697565] font-bold text-[1rem]">Company</p>
</div>
</div>
<div class="text-[4.2rem] sm:text-[9rem] md:text-[11rem] mt-8 lg:mt-0 lg:text-[14rem] xl:text-[19.5rem] text-center leading-none font-bold">
PHILLIPS
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 mt-6 gap-y-4">
<p class="text-lg">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptatibus eos perspiciatis esse. Quae distinctio ad debitis tempora velit at temporibus pariatur, odio vitae quasi, hic eaque vel a reiciendis.
</p>
<div class="flex items-center md:items-end justify-center sm:justify-end gap-3">
<button aria-label="facbook-code" class="flex items-center justify-center rounded-lg h-16 w-16 border">
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" 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,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"></path></svg>
</button>
<button aria-label="twitter-code" class="flex items-center justify-center rounded-lg h-16 w-16 border">
<svg xmlns="http://www.w3.org/2000/svg" width="2.3rem" height="2.3rem" fill="currentColor" viewBox="0 0 256 256"><path d="M214.75,211.71l-62.6-98.38,61.77-67.95a8,8,0,0,0-11.84-10.76L143.24,99.34,102.75,35.71A8,8,0,0,0,96,32H48a8,8,0,0,0-6.75,12.3l62.6,98.37-61.77,68a8,8,0,1,0,11.84,10.76l58.84-64.72,40.49,63.63A8,8,0,0,0,160,224h48a8,8,0,0,0,6.75-12.29ZM164.39,208,62.57,48h29L193.43,208Z"></path></svg>
</button>
<button aria-label="insta-code" class="flex items-center justify-center rounded-lg h-16 w-16 border">
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" fill="currentColor" viewBox="0 0 256 256"><path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"></path></svg>
</button>
<button aria-label="dribble-code" class="flex items-center justify-center rounded-lg h-16 w-16 border">
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" 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,24Zm87.65,96.18Q211.83,120,208,120a168.58,168.58,0,0,0-43.94,5.84A166.52,166.52,0,0,0,150.61,96a168.32,168.32,0,0,0,38.2-31.55A87.78,87.78,0,0,1,215.65,120.18ZM176.28,54.46A151.75,151.75,0,0,1,142,82.52a169.22,169.22,0,0,0-38.63-39,88,88,0,0,1,73,10.94ZM85.65,50.88a153.13,153.13,0,0,1,42,39.18A151.82,151.82,0,0,1,64,104a154.19,154.19,0,0,1-20.28-1.35A88.39,88.39,0,0,1,85.65,50.88ZM40,128a87.73,87.73,0,0,1,.53-9.64A168.85,168.85,0,0,0,64,120a167.84,167.84,0,0,0,72.52-16.4,150.82,150.82,0,0,1,12.31,27.13,167.11,167.11,0,0,0-24.59,11.6,169.22,169.22,0,0,0-55.07,51.06A87.8,87.8,0,0,1,40,128Zm42,75a152.91,152.91,0,0,1,50.24-46.79,148.81,148.81,0,0,1,20.95-10,152.48,152.48,0,0,1,3.73,33.47,152.93,152.93,0,0,1-3.49,32.56A87.92,87.92,0,0,1,82,203Zm89.06,1.73a170,170,0,0,0,1.86-25,168.69,168.69,0,0,0-4.45-38.47A152.31,152.31,0,0,1,208,136q3.8,0,7.61.19A88.13,88.13,0,0,1,171.06,204.72Z"></path></svg>
</button>
</div>
</div>
<div class="mt-16">
<ul class="flex flex-col sm:flex-row justify-between text-lg gap-4 md:gap-6">
<li><a href="/">Lighting</a></li>
<li><a href="/">Health</a></li>
<li><a href="/">Sound & vision</a></li>
<li><a href="/">Product</a></li>
<li><a href="/">Automative</a></li>
<li><a href="/">Promotions</a></li>
</ul>
</div>
<div class="border-t mt-8 text-sm pt-8">
Copyright © Phillips 2024. All Right Reserved.
</div>
</div>Preview
Show Code
<footer class="bg-black text-white pt-16 pb-8">
<div class="max-w-7xl mx-auto px-4 xl:px-0">
<div class="grid grid-cols-1">
<h3 class="text-center text-4xl text-white">Better Off</h3>
<div class="mt-12">
<div class="mb-1 text-2xl text-center">Subscribe us</div>
<p class="text-center text-lg">Stay in the loop with everything you need to know.</p>
<form class="max-w-lg mx-auto mt-8">
<div class="bg-transparent sm:bg-white rounded-full py-2 pl-0 sm:pl-3 pr-0 sm:pr-2 flex-col sm:flex-row flex items-center">
<input type="email" placeholder="Enter Email" class="text-lg p-2 mb-4 sm:mb-0 text-black rounded-md sm:rounded-none w-full focus:outline-none" />
<button class="whitespace-nowrap w-full sm:w-auto text-lg bg-[#0071e3] py-2 px-6 rounded-md justify-center sm:rounded-full text-white flex items-center gap-x-4">
Send Now
</button>
</div>
</form>
</div>
</div>
<div class="flex justify-between items-center border-t border-gray-700 pt-8 sm:pt-12 mt-8 sm:mt-12">
<ul class="flex flex-col sm:flex-row items-start sm:items-center gap-x-6">
<li>Home</li>
<li>Pricing</li>
<li>Portfolio</li>
<li>Service</li>
<li>Contact</li>
</ul>
<ul class="flex flex-col sm:flex-row items-center gap-y-4 gap-x-6">
<li class="flex items-center">
<button aria-label="facebook-cta" class="h-6 w-6 text-white">
<svg xmlns="http://www.w3.org/2000/svg" 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,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"></path></svg>
</button>
</li>
<li class="flex items-center">
<button aria-label="insta-cta" class="h-6 w-6 text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"></path></svg>
</button>
</li>
<li class="flex items-center">
<button aria-label="dribble-cta" class="h-6 w-6 text-white">
<svg xmlns="http://www.w3.org/2000/svg" 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,24Zm87.65,96.18Q211.83,120,208,120a168.58,168.58,0,0,0-43.94,5.84A166.52,166.52,0,0,0,150.61,96a168.32,168.32,0,0,0,38.2-31.55A87.78,87.78,0,0,1,215.65,120.18ZM176.28,54.46A151.75,151.75,0,0,1,142,82.52a169.22,169.22,0,0,0-38.63-39,88,88,0,0,1,73,10.94ZM85.65,50.88a153.13,153.13,0,0,1,42,39.18A151.82,151.82,0,0,1,64,104a154.19,154.19,0,0,1-20.28-1.35A88.39,88.39,0,0,1,85.65,50.88ZM40,128a87.73,87.73,0,0,1,.53-9.64A168.85,168.85,0,0,0,64,120a167.84,167.84,0,0,0,72.52-16.4,150.82,150.82,0,0,1,12.31,27.13,167.11,167.11,0,0,0-24.59,11.6,169.22,169.22,0,0,0-55.07,51.06A87.8,87.8,0,0,1,40,128Zm42,75a152.91,152.91,0,0,1,50.24-46.79,148.81,148.81,0,0,1,20.95-10,152.48,152.48,0,0,1,3.73,33.47,152.93,152.93,0,0,1-3.49,32.56A87.92,87.92,0,0,1,82,203Zm89.06,1.73a170,170,0,0,0,1.86-25,168.69,168.69,0,0,0-4.45-38.47A152.31,152.31,0,0,1,208,136q3.8,0,7.61.19A88.13,88.13,0,0,1,171.06,204.72Z"></path></svg>
</button>
</li>
<li class="flex items-center">
<button aria-label="twitter-cta" class="h-6 w-6 text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><path d="M214.75,211.71l-62.6-98.38,61.77-67.95a8,8,0,0,0-11.84-10.76L143.24,99.34,102.75,35.71A8,8,0,0,0,96,32H48a8,8,0,0,0-6.75,12.3l62.6,98.37-61.77,68a8,8,0,1,0,11.84,10.76l58.84-64.72,40.49,63.63A8,8,0,0,0,160,224h48a8,8,0,0,0,6.75-12.29ZM164.39,208,62.57,48h29L193.43,208Z"></path></svg>
</button>
</li>
</ul>
</div>
</div>
<div class="mx-auto mt-10 text-white text-center px-4 lg:px-0">
Copyright © 2024. All Right Reserved | Tailwind footer ui design
</div>
</footer>Preview
Show Code
<footer class="bg-black text-white pt-12 pb-8">
<div class="max-w-7xl mx-auto px-4 xl:px-0">
<div class="grid grid-cols-12">
<div class="col-span-12 sm:col-span-4 lg:col-span-6">
<h3 class="text-2xl">Better Off</h3>
</div>
<div class="col-span-12 sm:col-span-8 lg:col-span-6">
<p class="mb-8">Subscribe To Our Newsletter:</p>
<form class="flex py-2 items-center border-b border-gray-600">
<input class="outline-none bg-transparent w-full" placeholder="Type your email here" />
<button aria-label="arrow-right" class="h-10 flex items-center justify-center w-10">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
<path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
</svg>
</button>
</form>
</div>
</div>
<h3 class="text-2xl sm:text-4xl xl:text-6xl mt-12 leading-normal xl:leading-tight">Improving Marketing Futures Through Creative Designs.</h3>
<div class="flex justify-between items-center border-t border-gray-700 pt-6 sm:pt-12 mt-6 sm:mt-12">
<ul class="flex flex-col sm:flex-row items-start sm:items-center gap-x-8">
<li>Home</li>
<li>Pricing</li>
<li>Portfolio</li>
<li>Service</li>
<li>Contact</li>
</ul>
<ul class="flex flex-col sm:flex-row gap-y-3 items-center gap-x-4">
<li class="flex items-center">
<button aria-label="facebook-btn" class="h-6 w-6 text-white">
<svg xmlns="http://www.w3.org/2000/svg" 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,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"
></path>
</svg>
</button>
</li>
<li class="flex items-center">
<button aria-label="insta-btn" class="h-6 w-6 text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
<path
d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"
></path>
</svg>
</button>
</li>
<li class="flex items-center">
<button aria-label="dribble-btn" class="h-6 w-6 text-white">
<svg xmlns="http://www.w3.org/2000/svg" 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,24Zm87.65,96.18Q211.83,120,208,120a168.58,168.58,0,0,0-43.94,5.84A166.52,166.52,0,0,0,150.61,96a168.32,168.32,0,0,0,38.2-31.55A87.78,87.78,0,0,1,215.65,120.18ZM176.28,54.46A151.75,151.75,0,0,1,142,82.52a169.22,169.22,0,0,0-38.63-39,88,88,0,0,1,73,10.94ZM85.65,50.88a153.13,153.13,0,0,1,42,39.18A151.82,151.82,0,0,1,64,104a154.19,154.19,0,0,1-20.28-1.35A88.39,88.39,0,0,1,85.65,50.88ZM40,128a87.73,87.73,0,0,1,.53-9.64A168.85,168.85,0,0,0,64,120a167.84,167.84,0,0,0,72.52-16.4,150.82,150.82,0,0,1,12.31,27.13,167.11,167.11,0,0,0-24.59,11.6,169.22,169.22,0,0,0-55.07,51.06A87.8,87.8,0,0,1,40,128Zm42,75a152.91,152.91,0,0,1,50.24-46.79,148.81,148.81,0,0,1,20.95-10,152.48,152.48,0,0,1,3.73,33.47,152.93,152.93,0,0,1-3.49,32.56A87.92,87.92,0,0,1,82,203Zm89.06,1.73a170,170,0,0,0,1.86-25,168.69,168.69,0,0,0-4.45-38.47A152.31,152.31,0,0,1,208,136q3.8,0,7.61.19A88.13,88.13,0,0,1,171.06,204.72Z"
></path>
</svg>
</button>
</li>
<li class="flex items-center">
<button aria-label="twitter-btn" class="h-6 w-6 text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
<path
d="M214.75,211.71l-62.6-98.38,61.77-67.95a8,8,0,0,0-11.84-10.76L143.24,99.34,102.75,35.71A8,8,0,0,0,96,32H48a8,8,0,0,0-6.75,12.3l62.6,98.37-61.77,68a8,8,0,1,0,11.84,10.76l58.84-64.72,40.49,63.63A8,8,0,0,0,160,224h48a8,8,0,0,0,6.75-12.29ZM164.39,208,62.57,48h29L193.43,208Z"
></path>
</svg>
</button>
</li>
</ul>
</div>
</div>
<div class="mx-auto mt-16 text-white text-center px-4 lg:px-0">
Copyright © 2024
</div>
</footer>
Preview
Show Code
<footer class="mx-auto max-w-7xl px-4 py-12 xl:px-0">
<div class="grid grid-cols-1 gap-x-12 gap-y-8 sm:gap-y-12 md:grid-cols-4">
<div class="pr-0 md:col-span-2 lg:pr-36">
<label class="leading-wide text-2xl sm:text-3xl">Subscribe to our newsletter to stay in touch with the latest.</label>
<form class="mt-8">
<div class="flex items-center rounded-full border bg-transparent px-2 py-1">
<input type="email" placeholder="Enter Email" class="w-full rounded-full p-2 text-lg text-black focus:outline-none" />
<button aria-label="email-icon" class="flex h-10 w-10 min-w-10 items-center justify-center rounded-full bg-black text-white">
<svg xmlns="http://www.w3.org/2000/svg" height="1rem" width="1rem" fill="currentColor" viewBox="0 0 256 256">
<path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"></path>
</svg>
</button>
</div>
</form>
<ul class="mt-8 flex items-center gap-x-3">
<li>
<button aria-label="facebook" class="h-12 w-12 rounded-full border p-3">
<svg xmlns="http://www.w3.org/2000/svg" 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,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"></path>
</svg>
</button>
</li>
<li>
<button aria-label="insta" class="h-12 w-12 rounded-full border p-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
<path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"></path>
</svg>
</button>
</li>
<li>
<button aria-label="dribble" class="h-12 w-12 rounded-full border p-3">
<svg xmlns="http://www.w3.org/2000/svg" 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,24Zm87.65,96.18Q211.83,120,208,120a168.58,168.58,0,0,0-43.94,5.84A166.52,166.52,0,0,0,150.61,96a168.32,168.32,0,0,0,38.2-31.55A87.78,87.78,0,0,1,215.65,120.18ZM176.28,54.46A151.75,151.75,0,0,1,142,82.52a169.22,169.22,0,0,0-38.63-39,88,88,0,0,1,73,10.94ZM85.65,50.88a153.13,153.13,0,0,1,42,39.18A151.82,151.82,0,0,1,64,104a154.19,154.19,0,0,1-20.28-1.35A88.39,88.39,0,0,1,85.65,50.88ZM40,128a87.73,87.73,0,0,1,.53-9.64A168.85,168.85,0,0,0,64,120a167.84,167.84,0,0,0,72.52-16.4,150.82,150.82,0,0,1,12.31,27.13,167.11,167.11,0,0,0-24.59,11.6,169.22,169.22,0,0,0-55.07,51.06A87.8,87.8,0,0,1,40,128Zm42,75a152.91,152.91,0,0,1,50.24-46.79,148.81,148.81,0,0,1,20.95-10,152.48,152.48,0,0,1,3.73,33.47,152.93,152.93,0,0,1-3.49,32.56A87.92,87.92,0,0,1,82,203Zm89.06,1.73a170,170,0,0,0,1.86-25,168.69,168.69,0,0,0-4.45-38.47A152.31,152.31,0,0,1,208,136q3.8,0,7.61.19A88.13,88.13,0,0,1,171.06,204.72Z"></path>
</svg>
</button>
</li>
<li>
<button aria-label="twitter" class="h-12 w-12 rounded-full border p-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
<path d="M214.75,211.71l-62.6-98.38,61.77-67.95a8,8,0,0,0-11.84-10.76L143.24,99.34,102.75,35.71A8,8,0,0,0,96,32H48a8,8,0,0,0-6.75,12.3l62.6,98.37-61.77,68a8,8,0,1,0,11.84,10.76l58.84-64.72,40.49,63.63A8,8,0,0,0,160,224h48a8,8,0,0,0,6.75-12.29ZM164.39,208,62.57,48h29L193.43,208Z"></path>
</svg>
</button>
</li>
</ul>
</div>
<div>
<label class="text-lg font-medium">Our Services</label>
<ul class="mt-4 text-[1rem]">
<li class="mt-2">
<a href="/"> Projects </a>
</li>
<li class="mt-2">
<a href="/"> Our Process </a>
</li>
<li class="mt-2">
<a href="/"> Open Source </a>
</li>
<li class="mt-2">
<a href="/"> Referral Progrem </a>
</li>
<li class="mt-2">
<a href="/"> Blogs </a>
</li>
<li class="mt-2">
<a href="/"> Contact </a>
</li>
</ul>
</div>
<div>
<label class="text-sm uppercase">Drop us a line</label>
<p class="mb-6 mt-2 break-all text-[1rem] font-medium">business00196@gmail.com</p>
<label class="text-sm uppercase">Call us</label>
<p class="mt-2 text-[1rem] font-medium">+91 9348348289</p>
</div>
</div>
<div class="mt-8 border-t pt-8">
<p class="text-sm">Copyright © 2024. All rights reserved • Privacy Policy</p>
</div>
</footer>
Preview
Show Code
<footer class="max-w-7xl mx-auto px-4 py-12 xl:px-0">
<div class="mb-8 h-16">
<img class="h-full" src="https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_300/https://designcools.com/wp-content/uploads/2024/10/preview-KMdvyG18u-transformed-e1730702367932-300x264.png" alt="footer-ui-design" />
</div>
<div class="grid grid-cols-12 gap-y-8 gap-x-6 lg:gap-x-12">
<div class="col-span-12 sm:col-span-6 md:col-span-5 pr-0 xl:pr-36">
<label class="text-2xl lg:text-4xl">We would love to hear from you</label>
<p class="text-[1rem] mt-6">
Feel free to reach out if you want to collaborate with us, or simply have a chat.
</p>
<div class="text-[1rem] mt-8">
<label class="flex items-center gap-x-4">
Become a client
<span class="border rounded-full p-2">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 256 256">
<path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
</svg>
</span>
</label>
</div>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-3">
<label class="font-medium text-lg">Our address</label>
<p class="text-[1rem] mt-2">Mennica Legacy Tower</p>
<p class="text-[1rem]">Prosta Str. 20,</p>
<p class="text-[1rem]">00-850 Warsaw, Poland</p>
<p class="text-[1rem] mt-4">VAT: 5252837088</p>
<p class="text-[1rem]">Unikorns Sp. z o. o.</p>
<p class="text-[1rem]">Registered in Warsaw, Poland</p>
</div>
<div class="col-span-12 sm:col-span-4 md:col-span-2">
<label class="font-medium text-lg">Follow us</label>
<ul class="text-[1rem]">
<li>
<a href="/" aria-label="menu" class="flex items-center justify-between gap-x-2 mt-2">
Facebook
<svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 256 256">
<path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path>
</svg>
</a>
</li>
<li>
<a href="/" aria-label="menu" class="flex items-center justify-between gap-x-2 mt-2">
Behance
<svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 256 256">
<path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path>
</svg>
</a>
</li>
<li>
<a href="/" aria-label="menu" class="flex items-center justify-between gap-x-2 mt-2">
Dribble
<svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 256 256">
<path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path>
</svg>
</a>
</li>
<li>
<a href="/" aria-label="menu" class="flex items-center justify-between gap-x-2 mt-2">
Instagram
<svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 256 256">
<path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path>
</svg>
</a>
</li>
<li>
<a href="/" aria-label="menu" class="flex items-center justify-between gap-x-2 mt-2">
LinkedIn
<svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 256 256">
<path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path>
</svg>
</a>
</li>
</ul>
</div>
<div class="col-span-12 sm:col-span-4 md:col-span-2 flex justify-start sm:justify-end">
<ul class="text-[1rem]">
<li class="mb-1"><a href="/">Home</a></li>
<li class="mb-1"><a href="/">Showcase</a></li>
<li class="mb-1"><a href="/">Expertise</a></li>
<li class="mb-1"><a href="/">About</a></li>
<li class="mb-1"><a href="/">Feed</a></li>
<li class="mb-1"><a href="/">Contact</a></li>
</ul>
</div>
<div class="col-span-12">
<p class="font-medium">
Don’t like the forms? Drop us a line via email.
</p>
<p class="mt-1 font-medium flex items-center gap-x-2">
business00196@gmail.com
<svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 256 256">
<path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path>
</svg>
</p>
</div>
</div>
<div class="mt-8 border-t pt-8">
<p class="text-sm">Copyright © 2024. All rights reserved • Privacy Policy</p>
</div>
</footer>
Preview
Join our mailing list for
updates from our artist!
RENSOR
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci neque voluptatum sed ipsa aut, veniam reiciendis beatae praesentium alias quasi, fugiat magni. Tenetur quaerat illo animi a facilis ut numquam?
Copyright © 2024, All Right Reserved.
Show Code
<div class="pt-28 pb-10 bg-fixed bg-cover bg-[url(https://resonance.bestlooker.pro/images/demo-brutalist/section-bg-1.jpg)]">
<div class="max-w-7xl mx-auto px-4 xl:px-0">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 lg:col-span-6">
<h4 class="text-white text-2xl sm:text-4xl">Join our mailing list for</h4>
<h4 class="text-white text-2xl sm:text-4xl mt-2">updates from our artist!</h4>
</div>
<div class="col-span-12 lg:col-span-6 flex items-end w-full">
<div class="flex flex-col sm:flex-row items-end gap-y-4 gap-x-6 w-full">
<input type="text" placeholder="Enter your email" class="text-white border-b py-2 bg-transparent w-full focus:outline-none" />
<button class="bg-white w-full py-2 text-black sm:h-32 sm:w-32 sm:min-w-32 sm:p-8 sm:rounded-full text-lg sm:-rotate-12 whitespace-wrap">SEND NOW</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-12 mt-24 gap-12">
<div class="sm:col-span-6 lg:col-span-4 xl:col-span-5 text-[1rem]">
<h4 class="text-white text-3xl font-medium">RENSOR</h4>
<p class="text-white mt-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci neque voluptatum sed ipsa aut, veniam reiciendis beatae praesentium alias quasi, fugiat magni. Tenetur quaerat illo animi a facilis ut numquam?
</p>
</div>
<div class="sm:col-span-3 lg:col-span-2">
<label class="text-white">Sitemap</label>
<ul class="mt-3 font-light text-zinc-400">
<li><a href="/" class="font-bold text-white">Overview</a></li>
<li><a href="/">Work</a></li>
<li><a href="/">Feed</a></li>
</ul>
</div>
<div class="sm:col-span-3 lg:col-span-2">
<label class="text-white">Legal</label>
<ul class="mt-3 font-light text-zinc-400">
<li><a href="/">Terms</a></li>
<li><a href="/">Privacy</a></li>
</ul>
</div>
<div class="sm:col-span-12 lg:col-span-4 xl:col-span-3">
<label class="text-white">Social Links</label>
<div class="mt-4 flex items-end gap-x-2">
<button aria-label="facebook" class="text-white flex items-center justify-center rounded-lg h-12 w-12 bg-[rgba(255,255,255,0.2)]">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" 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,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"
></path>
</svg>
</button>
<button aria-label="twitter" class="text-white flex items-center justify-center rounded-lg h-12 w-12 bg-[rgba(255,255,255,0.2)]">
<svg xmlns="http://www.w3.org/2000/svg" width="1.3rem" height="1.3rem" fill="currentColor" viewBox="0 0 256 256">
<path
d="M214.75,211.71l-62.6-98.38,61.77-67.95a8,8,0,0,0-11.84-10.76L143.24,99.34,102.75,35.71A8,8,0,0,0,96,32H48a8,8,0,0,0-6.75,12.3l62.6,98.37-61.77,68a8,8,0,1,0,11.84,10.76l58.84-64.72,40.49,63.63A8,8,0,0,0,160,224h48a8,8,0,0,0,6.75-12.29ZM164.39,208,62.57,48h29L193.43,208Z"
></path>
</svg>
</button>
<button aria-label="instagram" class="text-white flex items-center justify-center rounded-lg h-12 w-12 bg-[rgba(255,255,255,0.2)]">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="currentColor" viewBox="0 0 256 256">
<path
d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"
></path>
</svg>
</button>
<button aria-label="dribble" class="text-white flex items-center justify-center rounded-lg h-12 w-12 bg-[rgba(255,255,255,0.2)]">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" 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,24Zm87.65,96.18Q211.83,120,208,120a168.58,168.58,0,0,0-43.94,5.84A166.52,166.52,0,0,0,150.61,96a168.32,168.32,0,0,0,38.2-31.55A87.78,87.78,0,0,1,215.65,120.18ZM176.28,54.46A151.75,151.75,0,0,1,142,82.52a169.22,169.22,0,0,0-38.63-39,88,88,0,0,1,73,10.94ZM85.65,50.88a153.13,153.13,0,0,1,42,39.18A151.82,151.82,0,0,1,64,104a154.19,154.19,0,0,1-20.28-1.35A88.39,88.39,0,0,1,85.65,50.88ZM40,128a87.73,87.73,0,0,1,.53-9.64A168.85,168.85,0,0,0,64,120a167.84,167.84,0,0,0,72.52-16.4,150.82,150.82,0,0,1,12.31,27.13,167.11,167.11,0,0,0-24.59,11.6,169.22,169.22,0,0,0-55.07,51.06A87.8,87.8,0,0,1,40,128Zm42,75a152.91,152.91,0,0,1,50.24-46.79,148.81,148.81,0,0,1,20.95-10,152.48,152.48,0,0,1,3.73,33.47,152.93,152.93,0,0,1-3.49,32.56A87.92,87.92,0,0,1,82,203Zm89.06,1.73a170,170,0,0,0,1.86-25,168.69,168.69,0,0,0-4.45-38.47A152.31,152.31,0,0,1,208,136q3.8,0,7.61.19A88.13,88.13,0,0,1,171.06,204.72Z"
></path>
</svg>
</button>
</div>
</div>
</div>
<div class="mx-auto mt-24 text-white text-center px-4 lg:px-0">
Copyright © 2024, All Right Reserved.
</div>
</div>
</div>