Responsive Footer - Tailwind Component
A footer is an area at the bottom of a document page containing data common to other pages, this is made with Tailwind CSS.
footer
Loading component...
86 lines
<footer class="my-12 pt-5 bg-[#c23616]">
<div class="flex flex-col sm:flex-row justify-between pt-8 mx-8">
<div class="w-full sm:w-1/2">
<h1 class="text-4xl text-gray-100 font-bold line-through sm:text-5xl">Rookie</h1>
<div class="mt-4">
<a href="#" class="mx-1 inline-block pt-1">
<svg class="w-7 h-7 text-gray-200 hover:text-gray-100 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
</svg>
</a>
<a href="#" class="mx-1 inline-block pt-1">
<svg class="w-7 h-7 text-gray-200 hover:text-gray-100 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
</svg>
</a>
<a href="#" class="mx-1 inline-block pt-1">
<svg class="w-7 h-7 text-gray-200 hover:text-gray-100 fill-current" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z" />
</svg>
</a>
<a href="#" class="mx-1 inline-block pt-1">
<svg class="w-7 h-7 text-gray-200 hover:text-gray-100 fill-current" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="w-5"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<g fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12c6.627 0 12-5.373 12-12S18.627 0 12 0zm.14 19.018c-3.868 0-7-3.14-7-7.018c0-3.878 3.132-7.018 7-7.018c1.89 0 3.47.697 4.682 1.829l-1.974 1.978v-.004c-.735-.702-1.667-1.062-2.708-1.062c-2.31 0-4.187 1.956-4.187 4.273c0 2.315 1.877 4.277 4.187 4.277c2.096 0 3.522-1.202 3.816-2.852H12.14v-2.737h6.585c.088.47.135.96.135 1.474c0 4.01-2.677 6.86-6.72 6.86z"
fill="currentColor" />
</g>
</svg>
</a>
<a href="#" class="mx-1 inline-block pt-1">
<svg class="w-7 h-7 text-gray-200 hover:text-gray-100 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16">
<path
d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z" />
</svg>
</a>
</div>
</div>
<div class="w-full sm:w-1/2 ">
<div class="flex flex-row space-x-10 sm:justify-end mt-8 sm:mt-0">
<div class="mb-5">
<h4 class="pb-4 font-bold uppercase text-gray-200">Explore</h4>
<ul class="text-gray-300">
<li class="pb-4"> <a href="#" class="hover:text-gray-200">About</a></li>
<li class="pb-4"> <a href="#" class="hover:text-gray-200">Careers</a></li>
<li class="pb-4"> <a href="#" class="hover:text-gray-200">Forum</a></li>
<li class="pb-4"> <a href="#" class="hover:text-gray-200">Blog</a></li>
<li class="pb-4"> <a href="#" class="hover:text-gray-200">Community</a></li>
</ul>
</div>
<div class="mb-5">
<h4 class="pb-4 font-bold uppercase text-gray-200">Company</h4>
<ul class="text-gray-300">
<li class="pb-4"> <a href="#" class="hover:text-gray-200">Security</a></li>
<li class="pb-4"> <a href="#" class="hover:text-gray-200">Terms of Use</a></li>
<li class="pb-4"> <a href="#" class="hover:text-gray-200">Contact Us</a></li>
<li class="pb-4"> <a href="#" class="hover:text-gray-200">FAQ</a></li>
<li class="pb-4"> <a href="#" class="hover:text-gray-200">Imprint</a></li>
</div>
</div>
</div>
</div>
<hr class="h-px mt-6 mx-6 bg-gray-100 border-none">
<div class="w-full px-10 rounded-b-lg">
<div class="max-w-7xl flex flex-col-reverse sm:flex-row py-4 mx-auto justify-between items-center">
<div class="text-center mt-4 sm:mt-0 text-gray-100">
© 2022 <span class="line-through font-bold text-gray-50">Rookie</span>.
</div>
<div class="text-center text-xl text-gray-100">
<ul class="w-full justify-center text-sm flex text-center flex-row mx-auto space-x-2 overflow-hidden">
<li><button class="hover:text-gray-50">Privacy Policy</button></li>
<span>|</span>
<li><button class="hover:text-gray-50">Terms of Service</button></li>
</ul>
</div>
</div>
</div>
</footer>