Footers
Footer style 1
<!-- footer start -->
<footer class="bg-gray-900 text-gray-300">
<div class="container xl:max-w-6xl mx-auto px-4 pt-16 pb-5 lg:pb-16">
<div class="flex flex-wrap flex-row -mx-4">
<!-- left widget -->
<div class="flex-shrink max-w-full w-full lg:w-1/3 px-4 mb-7 lg:mb-0">
<!-- Footer Content -->
<div class="leading-relaxed">
<h4 class="font-semibold text-xl mb-6 text-gray-100">About Us</h4>
<p class="mb-3">Tailwind template designer, we build web templates, themes and other goodies, putting a lot of love in every pixel and design.</p>
<address class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block ltr:mr-1 rtl:ml-1" width="1.2rem" height="1.2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M256,48c-79.5,0-144,61.39-144,137,0,87,96,224.87,131.25,272.49a15.77,15.77,0,0,0,25.5,0C304,409.89,400,272.07,400,185,400,109.39,335.5,48,256,48Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path><circle fill="currentColor" cx="256" cy="192" r="48" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></circle></svg>
Amphitheatre, Mountain View,<br>
San Francisco, CA 9321, United States
</address>
<p class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block ltr:mr-1 rtl:ml-1" width="1.2rem" height="1.2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M451,374c-15.88-16-54.34-39.35-73-48.76C353.7,313,351.7,312,332.6,326.19c-12.74,9.47-21.21,17.93-36.12,14.75s-47.31-21.11-75.68-49.39-47.34-61.62-50.53-76.48,5.41-23.23,14.79-36c13.22-18,12.22-21,.92-45.3-8.81-18.9-32.84-57-48.9-72.8C119.9,44,119.9,47,108.83,51.6A160.15,160.15,0,0,0,83,65.37C67,76,58.12,84.83,51.91,98.1s-9,44.38,23.07,102.64,54.57,88.05,101.14,134.49S258.5,406.64,310.85,436c64.76,36.27,89.6,29.2,102.91,23s22.18-15,32.83-31a159.09,159.09,0,0,0,13.8-25.8C465,391.17,468,391.17,451,374Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"></path></svg>
+(123) 456-7890</p>
<p class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block ltr:mr-1 rtl:ml-1" width="1.2rem" height="1.2rem" viewBox="0 0 512 512"><rect fill="currentColor" x="48" y="96" width="416" height="320" rx="40" ry="40" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></rect><polyline fill="currentColor" points="112 160 256 272 400 160" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></polyline></svg>
support@example.com</p>
</div>
</div>
<!-- center widget -->
<div class="flex-shrink max-w-full w-full lg:w-1/3 px-4 mb-7 lg:mb-0">
<!-- Footer Content -->
<div class="leading-relaxed">
<h4 class="font-semibold text-xl mb-6 text-gray-100">Popular Links</h4>
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full w-1/2 px-4">
<ul class="space-y-2">
<li><a class="hover:text-gray-100" href="#">About us</a></li>
<li><a class="hover:text-gray-100" href="#">Contact us</a></li>
<li><a class="hover:text-gray-100" href="#">Privacy policy</a></li>
<li><a class="hover:text-gray-100" href="#">Term of use</a></li>
<li><a class="hover:text-gray-100" href="#">GDPR</a></li>
<li><a class="hover:text-gray-100" href="#">Career</a></li>
</ul>
</div>
<div class="flex-shrink max-w-full w-1/2 px-4">
<ul class="space-y-2">
<li><a class="hover:text-gray-100" href="#">Latest post</a></li>
<li><a class="hover:text-gray-100" href="#">Popular post</a></li>
<li><a class="hover:text-gray-100" href="#">Blogs</a></li>
<li><a class="hover:text-gray-100" href="#">Events</a></li>
<li><a class="hover:text-gray-100" href="#">Fax</a></li>
<li><a class="hover:text-gray-100" href="#">Category</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- right widget -->
<div class="flex-shrink max-w-full w-full lg:w-1/3 px-4 mb-7 lg:mb-0">
<!-- Footer Content -->
<div class="leading-relaxed">
<h4 class="font-semibold text-xl mb-6 text-gray-100">Newsletter</h4>
<p class="mb-6">Subscribe to our mailing list to receives daily updates direct to your inbox!</p>
<!--form-->
<div class="mx-auto mb-7">
<form id="subscribe" class="relative" action="#">
<!-- input group -->
<div class="flex flex-wrap items-stretch w-full relative">
<input type="email" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-3 px-5 ltr:rounded-l-md rtl:rounded-r-md text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" name="email" required="" placeholder="Enter you email address" aria-label="subcribe newsletter">
<div class="flex -mr-px">
<button class="flex items-center py-3 px-5 -ml-1 ltr:rounded-r-md rtl:rounded-l-md leading-5 text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0" type="submit">Subscribe</button>
</div>
</div>
</form>
</div><!--end form-->
<ul class="space-x-3">
<!--facebook-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://facebook.com" title="Facebook">
<!-- <i class="fab fa-facebook fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"></path></svg>
</a>
</li>
<!--twitter-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://twitter.com" title="Twitter">
<!-- <i class="fab fa-twitter fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"></path></svg>
</a>
</li>
<!--youtube-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://youtube.com" title="Youtube">
<!-- <i class="fab fa-youtube fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M508.64,148.79c0-45-33.1-81.2-74-81.2C379.24,65,322.74,64,265,64H247c-57.6,0-114.2,1-169.6,3.6-40.8,0-73.9,36.4-73.9,81.4C1,184.59-.06,220.19,0,255.79q-.15,53.4,3.4,106.9c0,45,33.1,81.5,73.9,81.5,58.2,2.7,117.9,3.9,178.6,3.8q91.2.3,178.6-3.8c40.9,0,74-36.5,74-81.5,2.4-35.7,3.5-71.3,3.4-107Q512.24,202.29,508.64,148.79ZM207,353.89V157.39l145,98.2Z"></path></svg>
</a>
</li>
<!--VKontakte-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://vk.com" title="VKontakte">
<!-- <i class="fab fa-vk fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M484.7,132c3.56-11.28,0-19.48-15.75-19.48H416.58c-13.21,0-19.31,7.18-22.87,14.86,0,0-26.94,65.6-64.56,108.13-12.2,12.3-17.79,16.4-24.4,16.4-3.56,0-8.14-4.1-8.14-15.37V131.47c0-13.32-4.06-19.47-15.25-19.47H199c-8.14,0-13.22,6.15-13.22,12.3,0,12.81,18.81,15.89,20.84,51.76V254c0,16.91-3,20-9.66,20-17.79,0-61-66.11-86.92-141.44C105,117.64,99.88,112,86.66,112H33.79C18.54,112,16,119.17,16,126.86c0,13.84,17.79,83.53,82.86,175.77,43.21,63,104.72,96.86,160.13,96.86,33.56,0,37.62-7.69,37.62-20.5V331.33c0-15.37,3.05-17.93,13.73-17.93,7.62,0,21.35,4.09,52.36,34.33C398.28,383.6,404.38,400,424.21,400h52.36c15.25,0,22.37-7.69,18.3-22.55-4.57-14.86-21.86-36.38-44.23-62-12.2-14.34-30.5-30.23-36.09-37.92-7.62-10.25-5.59-14.35,0-23.57-.51,0,63.55-91.22,70.15-122" style="fill-rule:evenodd"></path></svg>
</a>
</li>
<!--Linkedin-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://linkedin.com" title="Linkedin">
<!-- <i class="fab fa-linkedin fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"></path></svg>
</a>
</li>
<!--instagram-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://instagram.com" title="Instagram">
<!-- <i class="fab fa-instagram fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M349.33,69.33a93.62,93.62,0,0,1,93.34,93.34V349.33a93.62,93.62,0,0,1-93.34,93.34H162.67a93.62,93.62,0,0,1-93.34-93.34V162.67a93.62,93.62,0,0,1,93.34-93.34H349.33m0-37.33H162.67C90.8,32,32,90.8,32,162.67V349.33C32,421.2,90.8,480,162.67,480H349.33C421.2,480,480,421.2,480,349.33V162.67C480,90.8,421.2,32,349.33,32Z"></path><path fill="currentColor" d="M377.33,162.67a28,28,0,1,1,28-28A27.94,27.94,0,0,1,377.33,162.67Z"></path><path fill="currentColor" d="M256,181.33A74.67,74.67,0,1,1,181.33,256,74.75,74.75,0,0,1,256,181.33M256,144A112,112,0,1,0,368,256,112,112,0,0,0,256,144Z"></path></svg>
</a>
</li><!--end instagram-->
</ul>
</div><!-- End Footer Content -->
</div><!-- end right widget -->
</div>
</div>
<!-- copyright -->
<div class="container xl:max-w-6xl mx-auto px-4">
<div class="flex flex-wrap lg:flex-row -mx-4 border-t border-blue-200 border-opacity-10 py-9">
<div class="w-full text-center">
<p>Copyright © Your Company | All rights reserved.</p>
</div>
</div>
</div>
</footer><!-- end footer -->
Footer style 2
<!-- Footer start -->
<footer class="bg-gray-900 text-gray-300">
<!--Footer content-->
<div id="footer-content" class="relative pt-16 pb-12">
<div class="container xl:max-w-6xl mx-auto px-4">
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/4">
<div class="flex items-center mb-2">
<span class="text-3xl leading-normal mb-2 font-bold text-gray-100 mt-2">TailPro</span>
<!-- <img src="src/img-min/logo.png" alt="LOGO"> -->
</div>
<p>Multipurpose Tailwind Template.</p>
<ul class="space-x-3 mt-6 mb-6 Lg:mb-0">
<!--facebook-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://facebook.com" title="Facebook">
<!-- <i class="fab fa-facebook fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"></path></svg>
</a>
</li>
<!--twitter-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://twitter.com" title="Twitter">
<!-- <i class="fab fa-twitter fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"></path></svg>
</a>
</li>
<!--youtube-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://youtube.com" title="Youtube">
<!-- <i class="fab fa-youtube fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M508.64,148.79c0-45-33.1-81.2-74-81.2C379.24,65,322.74,64,265,64H247c-57.6,0-114.2,1-169.6,3.6-40.8,0-73.9,36.4-73.9,81.4C1,184.59-.06,220.19,0,255.79q-.15,53.4,3.4,106.9c0,45,33.1,81.5,73.9,81.5,58.2,2.7,117.9,3.9,178.6,3.8q91.2.3,178.6-3.8c40.9,0,74-36.5,74-81.5,2.4-35.7,3.5-71.3,3.4-107Q512.24,202.29,508.64,148.79ZM207,353.89V157.39l145,98.2Z"></path></svg>
</a>
</li>
<!--instagram-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://instagram.com" title="Instagram">
<!-- <i class="fab fa-instagram fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M349.33,69.33a93.62,93.62,0,0,1,93.34,93.34V349.33a93.62,93.62,0,0,1-93.34,93.34H162.67a93.62,93.62,0,0,1-93.34-93.34V162.67a93.62,93.62,0,0,1,93.34-93.34H349.33m0-37.33H162.67C90.8,32,32,90.8,32,162.67V349.33C32,421.2,90.8,480,162.67,480H349.33C421.2,480,480,421.2,480,349.33V162.67C480,90.8,421.2,32,349.33,32Z"></path><path fill="currentColor" d="M377.33,162.67a28,28,0,1,1,28-28A27.94,27.94,0,0,1,377.33,162.67Z"></path><path fill="currentColor" d="M256,181.33A74.67,74.67,0,1,1,181.33,256,74.75,74.75,0,0,1,256,181.33M256,144A112,112,0,1,0,368,256,112,112,0,0,0,256,144Z"></path></svg>
</a>
</li><!--end instagram-->
</ul>
</div>
<div class="flex-shrink max-w-full px-4 w-full lg:w-3/4">
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full px-4 w-1/2 lg:w-1/4 mb-6 lg:mb-0">
<h4 class="text-base leading-normal mb-3 uppercase">Product</h4>
<ul>
<li class="py-2 hover:text-white"><a href="#">Landing</a></li>
<li class="py-2 hover:text-white"><a href="#">Pages</a></li>
<li class="py-2 hover:text-white"><a href="#">Sections</a></li>
<li class="py-2 hover:text-white"><a href="#">Sign Up</a></li>
<li class="py-2 hover:text-white"><a href="#">Login</a></li>
</ul>
</div>
<div class="flex-shrink max-w-full px-4 w-1/2 lg:w-1/4 mb-6 lg:mb-0">
<h4 class="text-base leading-normal mb-3 uppercase">Support</h4>
<ul>
<li class="py-2 hover:text-white"><a href="#">Documentation</a></li>
<li class="py-2 hover:text-white"><a href="#">Changelog</a></li>
<li class="py-2 hover:text-white"><a href="#">Tools</a></li>
<li class="py-2 hover:text-white"><a href="#">Icons</a></li>
</ul>
</div>
<div class="flex-shrink max-w-full px-4 w-1/2 lg:w-1/4 mb-6 lg:mb-0">
<h4 class="text-base leading-normal mb-3 uppercase">Includes</h4>
<ul>
<li class="py-2 hover:text-white"><a href="#">Utilities</a></li>
<li class="py-2 hover:text-white"><a href="#">Components</a></li>
<li class="py-2 hover:text-white"><a href="#">Example code</a></li>
<li class="py-2 hover:text-white"><a href="#">Updates</a></li>
</ul>
</div>
<div class="flex-shrink max-w-full px-4 w-1/2 lg:w-1/4 mb-6 lg:mb-0">
<h4 class="text-base leading-normal mb-3 uppercase">Legal</h4>
<ul>
<li class="py-2 hover:text-white"><a href="#">Privacy Policy</a></li>
<li class="py-2 hover:text-white"><a href="#">Terms of Use</a></li>
<li class="py-2 hover:text-white"><a href="#">License</a></li>
<li class="py-2 hover:text-white"><a href="#">GDPR</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Start footer copyright-->
<div class="footer-dark">
<div class="container py-6 border-t border-gray-200 border-opacity-10">
<div class="row">
<div class="col-12 col-md text-center">
<p class="d-block my-3">Copyright © Your Company | All rights reserved.</p>
</div>
</div>
</div>
</div><!--End footer copyright-->
</footer>
<!-- end footer -->
Footer style 3
<!-- Footer start -->
<footer class="bg-gray-900 text-gray-300">
<!-- footer content -->
<div id="footer-content" class="relative">
<div class="container xl:max-w-6xl mx-auto px-4 py-8 border-t border-gray-200 border-opacity-10">
<!-- row -->
<div class="flex flex-wrap flex-row -mx-4">
<!-- copyright text -->
<div class="flex-shrink max-w-full px-4 w-full md:w-2/3 text-center md:ltr:text-left md:rtl:text-right mb-6 md:mb-0">
<p>© Your Company Name | All Rights Reserved.</p>
</div>
<!-- social icon -->
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 self-center">
<ul class="space-x-3 text-center md:ltr:text-right md:rtl:text-left">
<!--facebook-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://facebook.com" title="Facebook">
<!-- <i class="fab fa-facebook fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 512 512"><path fill="currentColor" d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"></path></svg>
</a>
</li>
<!--twitter-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://twitter.com" title="Twitter">
<!-- <i class="fab fa-twitter fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 512 512"><path fill="currentColor" d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"></path></svg>
</a>
</li>
<!--youtube-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://youtube.com" title="Youtube">
<!-- <i class="fab fa-youtube fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 512 512"><path fill="currentColor" d="M508.64,148.79c0-45-33.1-81.2-74-81.2C379.24,65,322.74,64,265,64H247c-57.6,0-114.2,1-169.6,3.6-40.8,0-73.9,36.4-73.9,81.4C1,184.59-.06,220.19,0,255.79q-.15,53.4,3.4,106.9c0,45,33.1,81.5,73.9,81.5,58.2,2.7,117.9,3.9,178.6,3.8q91.2.3,178.6-3.8c40.9,0,74-36.5,74-81.5,2.4-35.7,3.5-71.3,3.4-107Q512.24,202.29,508.64,148.79ZM207,353.89V157.39l145,98.2Z"></path></svg>
</a>
</li>
<!--VKontakte-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://vk.com" title="VKontakte">
<!-- <i class="fab fa-vk fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 512 512"><path fill="currentColor" d="M484.7,132c3.56-11.28,0-19.48-15.75-19.48H416.58c-13.21,0-19.31,7.18-22.87,14.86,0,0-26.94,65.6-64.56,108.13-12.2,12.3-17.79,16.4-24.4,16.4-3.56,0-8.14-4.1-8.14-15.37V131.47c0-13.32-4.06-19.47-15.25-19.47H199c-8.14,0-13.22,6.15-13.22,12.3,0,12.81,18.81,15.89,20.84,51.76V254c0,16.91-3,20-9.66,20-17.79,0-61-66.11-86.92-141.44C105,117.64,99.88,112,86.66,112H33.79C18.54,112,16,119.17,16,126.86c0,13.84,17.79,83.53,82.86,175.77,43.21,63,104.72,96.86,160.13,96.86,33.56,0,37.62-7.69,37.62-20.5V331.33c0-15.37,3.05-17.93,13.73-17.93,7.62,0,21.35,4.09,52.36,34.33C398.28,383.6,404.38,400,424.21,400h52.36c15.25,0,22.37-7.69,18.3-22.55-4.57-14.86-21.86-36.38-44.23-62-12.2-14.34-30.5-30.23-36.09-37.92-7.62-10.25-5.59-14.35,0-23.57-.51,0,63.55-91.22,70.15-122" style="fill-rule:evenodd"></path></svg>
</a>
</li>
<!--Linkedin-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://linkedin.com" title="Linkedin">
<!-- <i class="fab fa-linkedin fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 512 512"><path fill="currentColor" d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"></path></svg>
</a>
</li>
<!--instagram-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://instagram.com" title="Instagram">
<!-- <i class="fab fa-instagram fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 512 512"><path fill="currentColor" d="M349.33,69.33a93.62,93.62,0,0,1,93.34,93.34V349.33a93.62,93.62,0,0,1-93.34,93.34H162.67a93.62,93.62,0,0,1-93.34-93.34V162.67a93.62,93.62,0,0,1,93.34-93.34H349.33m0-37.33H162.67C90.8,32,32,90.8,32,162.67V349.33C32,421.2,90.8,480,162.67,480H349.33C421.2,480,480,421.2,480,349.33V162.67C480,90.8,421.2,32,349.33,32Z"></path><path fill="currentColor" d="M377.33,162.67a28,28,0,1,1,28-28A27.94,27.94,0,0,1,377.33,162.67Z"></path><path fill="currentColor" d="M256,181.33A74.67,74.67,0,1,1,181.33,256,74.75,74.75,0,0,1,256,181.33M256,144A112,112,0,1,0,368,256,112,112,0,0,0,256,144Z"></path></svg>
</a>
</li><!--end instagram-->
</ul>
</div>
</div><!-- end row -->
</div>
</div>
</footer><!-- end footer -->
Footer style 4
<!-- Footer start -->
<footer class="bg-gray-900 text-gray-300">
<!--Footer content-->
<div id="footer-content" class="relative pt-16 pb-12">
<div class="container xl:max-w-6xl mx-auto px-4">
<div class="flex flex-wrap flex-row -mx-4">
<!-- single widget -->
<div class="max-w-full px-4 w-full">
<div class="text-center">
<ul class="space-x-3">
<!--facebook-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://facebook.com" title="Facebook">
<!-- <i class="fab fa-facebook fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"></path></svg>
</a>
</li>
<!--twitter-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://twitter.com" title="Twitter">
<!-- <i class="fab fa-twitter fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"></path></svg>
</a>
</li>
<!--youtube-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://youtube.com" title="Youtube">
<!-- <i class="fab fa-youtube fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M508.64,148.79c0-45-33.1-81.2-74-81.2C379.24,65,322.74,64,265,64H247c-57.6,0-114.2,1-169.6,3.6-40.8,0-73.9,36.4-73.9,81.4C1,184.59-.06,220.19,0,255.79q-.15,53.4,3.4,106.9c0,45,33.1,81.5,73.9,81.5,58.2,2.7,117.9,3.9,178.6,3.8q91.2.3,178.6-3.8c40.9,0,74-36.5,74-81.5,2.4-35.7,3.5-71.3,3.4-107Q512.24,202.29,508.64,148.79ZM207,353.89V157.39l145,98.2Z"></path></svg>
</a>
</li>
<!--VKontakte-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://vk.com" title="VKontakte">
<!-- <i class="fab fa-vk fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M484.7,132c3.56-11.28,0-19.48-15.75-19.48H416.58c-13.21,0-19.31,7.18-22.87,14.86,0,0-26.94,65.6-64.56,108.13-12.2,12.3-17.79,16.4-24.4,16.4-3.56,0-8.14-4.1-8.14-15.37V131.47c0-13.32-4.06-19.47-15.25-19.47H199c-8.14,0-13.22,6.15-13.22,12.3,0,12.81,18.81,15.89,20.84,51.76V254c0,16.91-3,20-9.66,20-17.79,0-61-66.11-86.92-141.44C105,117.64,99.88,112,86.66,112H33.79C18.54,112,16,119.17,16,126.86c0,13.84,17.79,83.53,82.86,175.77,43.21,63,104.72,96.86,160.13,96.86,33.56,0,37.62-7.69,37.62-20.5V331.33c0-15.37,3.05-17.93,13.73-17.93,7.62,0,21.35,4.09,52.36,34.33C398.28,383.6,404.38,400,424.21,400h52.36c15.25,0,22.37-7.69,18.3-22.55-4.57-14.86-21.86-36.38-44.23-62-12.2-14.34-30.5-30.23-36.09-37.92-7.62-10.25-5.59-14.35,0-23.57-.51,0,63.55-91.22,70.15-122" style="fill-rule:evenodd"></path></svg>
</a>
</li>
<!--Linkedin-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://linkedin.com" title="Linkedin">
<!-- <i class="fab fa-linkedin fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"></path></svg>
</a>
</li>
<!--instagram-->
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="https://instagram.com" title="Instagram">
<!-- <i class="fab fa-instagram fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M349.33,69.33a93.62,93.62,0,0,1,93.34,93.34V349.33a93.62,93.62,0,0,1-93.34,93.34H162.67a93.62,93.62,0,0,1-93.34-93.34V162.67a93.62,93.62,0,0,1,93.34-93.34H349.33m0-37.33H162.67C90.8,32,32,90.8,32,162.67V349.33C32,421.2,90.8,480,162.67,480H349.33C421.2,480,480,421.2,480,349.33V162.67C480,90.8,421.2,32,349.33,32Z"></path><path fill="currentColor" d="M377.33,162.67a28,28,0,1,1,28-28A27.94,27.94,0,0,1,377.33,162.67Z"></path><path fill="currentColor" d="M256,181.33A74.67,74.67,0,1,1,181.33,256,74.75,74.75,0,0,1,256,181.33M256,144A112,112,0,1,0,368,256,112,112,0,0,0,256,144Z"></path></svg>
</a>
</li><!--end instagram-->
</ul>
</div>
</div>
</div>
</div>
</div><!--End footer content-->
<!--Start footer copyright-->
<div class="relative">
<div class="container xl:max-w-6xl mx-auto px-4 py-10 border-t border-gray-200 border-opacity-10">
<!-- row -->
<div class="flex flex-wrap flex-row -mx-4">
<!-- copyright text -->
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/2 text-center lg:ltr:text-left lg:rtl:text-right mb-6 lg:mb-0">
<p>© Your Company Name | All Rights Reserved.</p>
</div>
<!-- social icon -->
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/2 self-center">
<ul class="space-x-6 text-center lg:ltr:text-right lg:rtl:text-left">
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="#">
Home
</a>
</li>
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="#">
About
</a>
</li>
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="#">
Services
</a>
</li>
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="#">
Contact
</a>
</li>
<li class="inline-block">
<a target="_blank" class="hover:text-gray-100" rel="noopener noreferrer" href="#">
Term of use
</a>
</li>
</ul>
</div>
</div><!-- end row -->
</div>
</div><!--End footer copyright-->
</footer>
<!-- end footer -->