Footers
5-cols with language dropdown
Open this five cols lang dropdown footers example in new window
Copy five cols lang dropdown footers code
Close five cols lang dropdown footers code
<footer class="w-full max-w-[85rem] py-10 px-4 sm:px-6 lg:px-8 mx-auto">
<!-- Grid -->
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6 mb-10">
<div class="col-span-full hidden lg:col-span-1 lg:block">
<a class="flex-none text-hs2-primary text-xl font-semibold " href="#" aria-label="Brand">
<svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>hs2-logo</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hs2-logo" fill="#1E3773" fill-rule="nonzero">
<path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
<path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
<path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
</g>
</g>
</svg>
</a>
<p class="mt-3 text-xs sm:text-sm text-gray-600 ">© 2022 HS2 Ltd.</p>
</div>
<!-- End Col -->
<div>
<h4 class="text-xs font-semibold text-gray-900 uppercase ">Product</h4>
<div class="mt-3 grid space-y-3 text-sm">
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Pricing</a></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Changelog</a></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Docs</a></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Download</a></p>
</div>
</div>
<!-- End Col -->
<div>
<h4 class="text-xs font-semibold text-gray-900 uppercase ">Company</h4>
<div class="mt-3 grid space-y-3 text-sm">
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">About us</a></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Blog</a></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Careers</a> <span class="inline text-blue-600 ">— We're hiring</span></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Customers</a></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Newsroom</a></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Sitemap</a></p>
</div>
</div>
<!-- End Col -->
<div>
<h4 class="text-xs font-semibold text-gray-900 uppercase ">Resources</h4>
<div class="mt-3 grid space-y-3 text-sm">
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Community</a></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Help & Support</a></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">eBook</a></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">What's New</a></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Status</a></p>
</div>
</div>
<!-- End Col -->
<div>
<h4 class="text-xs font-semibold text-gray-900 uppercase ">Developers</h4>
<div class="mt-3 grid space-y-3 text-sm">
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Api</a></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Status</a></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">GitHub</a> <span class="inline text-blue-600 ">— New</span></p>
</div>
<h4 class="mt-7 text-xs font-semibold text-gray-900 uppercase ">Industries</h4>
<div class="mt-3 grid space-y-3 text-sm">
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Financial Services</a></p>
<p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Education</a></p>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
<div class="pt-5 mt-5 border-t border-gray-200 ">
<div class="sm:flex sm:justify-between sm:items-center">
<div class="flex items-center gap-x-3">
<!-- Language Dropdown -->
<div class="hs-dropdown relative inline-flex [--placement:top-left]">
<button id="footer-language-dropdown" type="button" class="hs-dropdown-toggle py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border bg-white text-gray-700 align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm ">
<svg class="w-3 h-3 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-us" viewBox="0 0 512 512">
<g fill-rule="evenodd">
<g stroke-width="1pt">
<path fill="#bd3d44" d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)" />
<path fill="#fff" d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)" />
</g>
<path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)" />
<path fill="#fff" d="M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z" transform="scale(3.9385)" />
</g>
</svg>
English (US)
<svg class="hs-dropdown-open:rotate-180 w-2.5 h-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div class="hs-dropdown-menu w-40 transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden z-10 bg-white shadow-md rounded-lg p-2 " aria-labelledby="footer-language-dropdown">
<a class="flex items-center gap-x-2 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#">
<svg class="w-3.5 h-3.5 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-us" viewBox="0 0 512 512">
<g fill-rule="evenodd">
<g stroke-width="1pt">
<path fill="#bd3d44" d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)" />
<path fill="#fff" d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)" />
</g>
<path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)" />
<path fill="#fff" d="M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z" transform="scale(3.9385)" />
</g>
</svg>
English (US)
</a>
<a class="flex items-center gap-x-2 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#">
<svg class="w-3 h-3 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-de" viewBox="0 0 512 512">
<path fill="#ffce00" d="M0 341.3h512V512H0z" />
<path d="M0 0h512v170.7H0z" />
<path fill="#d00" d="M0 170.7h512v170.6H0z" />
</svg>
Deutsch
</a>
<a class="flex items-center gap-x-2 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#">
<svg class="w-3 h-3 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-dk" viewBox="0 0 512 512">
<path fill="#c8102e" d="M0 0h512.1v512H0z" />
<path fill="#fff" d="M144 0h73.1v512H144z" />
<path fill="#fff" d="M0 219.4h512.1v73.2H0z" />
</svg>
Dansk
</a>
<a class="flex items-center gap-x-2 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#">
<svg class="w-3 h-3 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-it" viewBox="0 0 512 512">
<g fill-rule="evenodd" stroke-width="1pt">
<path fill="#fff" d="M0 0h512v512H0z" />
<path fill="#009246" d="M0 0h170.7v512H0z" />
<path fill="#ce2b37" d="M341.3 0H512v512H341.3z" />
</g>
</svg>
Italiano
</a>
<a class="flex items-center gap-x-2 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#">
<svg class="w-3 h-3 rounded-full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icon-css-cn" viewBox="0 0 512 512">
<defs>
<path id="a" fill="#ffde00" d="M1-.3L-.7.8 0-1 .6.8-1-.3z" />
</defs>
<path fill="#de2910" d="M0 0h512v512H0z" />
<use width="30" height="20" transform="matrix(76.8 0 0 76.8 128 128)" xlink:href="#a" />
<use width="30" height="20" transform="rotate(-121 142.6 -47) scale(25.5827)" xlink:href="#a" />
<use width="30" height="20" transform="rotate(-98.1 198 -82) scale(25.6)" xlink:href="#a" />
<use width="30" height="20" transform="rotate(-74 272.4 -114) scale(25.6137)" xlink:href="#a" />
<use width="30" height="20" transform="matrix(16 -19.968 19.968 16 256 230.4)" xlink:href="#a" />
</svg>
中文 (繁體)
</a>
</div>
</div>
<!-- End Language Dropdown -->
<div class="space-x-4 text-sm ml-4">
<a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Terms</a>
<a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Privacy</a>
<a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 " href="#">Status</a>
</div>
</div>
<div class="flex justify-between items-center">
<div class="mt-3 sm:hidden">
<a class="flex-none text-xl font-semibold " href="#" aria-label="Brand">Brand</a>
<p class="mt-1 text-xs sm:text-sm text-gray-600 ">© 2022 Preline.</p>
</div>
<!-- Social Brands -->
<div class="space-x-4">
<a class="inline-block text-gray-500 hover:text-gray-800 " href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg>
</a>
<a class="inline-block text-gray-500 hover:text-gray-800 " href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
<a class="inline-block text-gray-500 hover:text-gray-800 " href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
</svg>
</a>
</div>
<!-- End Social Brands -->
</div>
<!-- End Col -->
</div>
</div>
</footer>Dark background with subscribe form
Open this dark bg subscribe form footers example in new window
Copy dark bg subscribe form footers code
Close dark bg subscribe form footers code
<footer class="bg-hs2-primary">
<div class="max-w-[85rem] py-10 px-4 sm:px-6 lg:px-8 lg:pt-20 mx-auto">
<!-- Grid -->
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">
<div class="col-span-full lg:col-span-1">
<a class="flex-none text-xl font-semibold text-white" href="#" aria-label="Brand">
<svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>hs2-logo</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hs2-logo" fill="#FFFFFF" fill-rule="nonzero">
<path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
<path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
<path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
</g>
</g>
</svg>
</a>
</div>
<!-- End Col -->
<div class="col-span-1">
<h4 class="font-semibold text-gray-100">Product</h4>
<div class="mt-3 grid space-y-3">
<p><a class="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">Pricing</a></p>
<p><a class="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">Changelog</a></p>
<p><a class="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">Docs</a></p>
</div>
</div>
<!-- End Col -->
<div class="col-span-1">
<h4 class="font-semibold text-gray-100">Company</h4>
<div class="mt-3 grid space-y-3">
<p><a class="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">About us</a></p>
<p><a class="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">Blog</a></p>
<p><a class="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">Careers</a> <span class="inline ml-1 text-xs bg-hs2-cyan text-white py-1 px-2 rounded-md">We're hiring</span></p>
<p><a class="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">Customers</a></p>
</div>
</div>
<!-- End Col -->
<div class="col-span-2">
<h4 class="font-semibold text-gray-100">Stay up to date</h4>
<form>
<div class="mt-4 flex flex-col items-center gap-2 sm:flex-row sm:gap-3 bg-white rounded-md p-2">
<div class="w-full">
<label for="hero-input" class="sr-only">Search</label>
<input type="text" id="hero-input" name="hero-input" class="py-3 px-4 block w-full border-transparent shadow-sm rounded-md focus:z-10 focus:border-hs2-primary-500 focus:ring-hs2-primary" placeholder="Enter your email">
</div>
<a class="w-full sm:w-auto whitespace-nowrap inline-flex justify-center items-center gap-x-3 text-center bg-hs2-secondary hover:bg-hs2-secondary-hover border border-transparent text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-secondary focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4" href="#">
Subscribe
</a>
</div>
<p class="mt-3 text-sm text-gray-400">
Signup for key updates.
</p>
</form>
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
<div class="mt-5 sm:mt-12 grid gap-y-2 sm:gap-y-0 sm:flex sm:justify-between sm:items-center">
<div class="flex justify-between items-center">
<p class="text-sm text-gray-400">© 2022 HS2 Ltd. All rights reserved.</p>
</div>
<!-- End Col -->
<!-- Social Brands -->
<div>
<a class="inline-flex justify-center items-center gap-x-3.5 w-10 h-10 text-center text-gray-200 hover:bg-white/[.1] rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 focus:ring-offset-gray-900 transition" href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg>
</a>
<a class="inline-flex justify-center items-center gap-x-3.5 w-10 h-10 text-center text-gray-200 hover:bg-white/[.1] rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 focus:ring-offset-gray-900 transition" href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z" />
</svg>
</a>
<a class="inline-flex justify-center items-center gap-x-3.5 w-10 h-10 text-center text-gray-200 hover:bg-white/[.1] rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 focus:ring-offset-gray-900 transition" href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg>
</a>
<a class="inline-flex justify-center items-center gap-x-3.5 w-10 h-10 text-center text-gray-200 hover:bg-white/[.1] rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 focus:ring-offset-gray-900 transition" href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
<a class="inline-flex justify-center items-center gap-x-3.5 w-10 h-10 text-center text-gray-200 hover:bg-white/[.1] rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 focus:ring-offset-gray-900 transition" href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
</svg>
</a>
</div>
<!-- End Social Brands -->
</div>
</div>
</footer>Center aligned 3 links with socials
Open this centered links socials footers example in new window
Copy centered links socials footers code
Close centered links socials footers code
<footer>
<div class="max-w-[85rem] py-10 px-4 sm:px-6 lg:px-8 mx-auto">
<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 items-center gap-5 text-center">
<div>
<a class="flex-none text-xl font-semibold text-black " href="#" aria-label="Brand">
<svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>hs2-logo</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hs2-logo" fill="#1E3773" fill-rule="nonzero">
<path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
<path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
<path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
</g>
</g>
</svg>
</a>
</div>
<!-- End Col -->
<ul class="text-center">
<li class="inline-block relative pr-8 last:pr-0 last-of-type:before:hidden before:absolute before:top-1/2 before:right-3 before:-translate-y-1/2 before:content-['/'] before:text-gray-300 ">
<a class="inline-flex gap-x-2 text-sm text-gray-500 hover:text-gray-800 " href="#">
About
</a>
</li>
<li class="inline-block relative pr-8 last:pr-0 last-of-type:before:hidden before:absolute before:top-1/2 before:right-3 before:-translate-y-1/2 before:content-['/'] before:text-gray-300 ">
<a class="inline-flex gap-x-2 text-sm text-gray-500 hover:text-gray-800 " href="#">
Services
</a>
</li>
<li class="inline-block relative pr-8 last:pr-0 last-of-type:before:hidden before:absolute before:top-1/2 before:right-3 before:-translate-y-1/2 before:content-['/'] before:text-gray-300 ">
<a class="inline-flex gap-x-2 text-sm text-gray-500 hover:text-gray-800 " href="#">
Blog
</a>
</li>
</ul>
<!-- End Col -->
<!-- Social Brands -->
<div class="md:text-right space-x-2">
<a class="inline-flex justify-center items-center w-8 h-8 text-center text-gray-500 hover:bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white transition " href="#">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z" />
</svg>
</a>
<a class="inline-flex justify-center items-center w-8 h-8 text-center text-gray-500 hover:bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white transition " href="#">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg>
</a>
<a class="inline-flex justify-center items-center w-8 h-8 text-center text-gray-500 hover:bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white transition " href="#">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
<a class="inline-flex justify-center items-center w-8 h-8 text-center text-gray-500 hover:bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white transition " href="#">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
</svg>
</a>
</div>
<!-- End Social Brands -->
</div>
<!-- End Grid -->
</div>
</footer>Simple center aligned
Open this simple centered footers example in new window
Copy simple centered footers code
Close simple centered footers code
<footer class="mt-auto w-full max-w-[85rem] py-10 px-4 sm:px-6 lg:px-8 mx-auto">
<!-- Grid -->
<div class="text-center">
<div>
<a class="flex-none text-xl font-semibold text-black " href="#" aria-label="Brand">HS2</a>
</div>
<!-- End Col -->
<div class="mt-3">
<p class="text-gray-500">We're part of the <a class="font-semibold text-hs2-link hover:text-hs2-hover-state " href="#">HS2</a> family.</p>
<p class="text-gray-500">© HS2. 2022 High Speed Two. All rights reserved.</p>
</div>
<!-- Social Brands -->
<div class="mt-3 space-x-2">
<a class="inline-flex justify-center items-center w-10 h-10 text-center text-gray-500 hover:bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-hs2-link focus:ring-offset-2 focus:ring-offset-white transition " href="#">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z" />
</svg>
</a>
<a class="inline-flex justify-center items-center w-10 h-10 text-center text-gray-500 hover:bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-hs2-link focus:ring-offset-2 focus:ring-offset-white transition " href="#">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg>
</a>
<a class="inline-flex justify-center items-center w-10 h-10 text-center text-gray-500 hover:bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-hs2-link focus:ring-offset-2 focus:ring-offset-white transition " href="#">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
<a class="inline-flex justify-center items-center w-10 h-10 text-center text-gray-500 hover:bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-hs2-link focus:ring-offset-2 focus:ring-offset-white transition " href="#">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
</svg>
</a>
</div>
<!-- End Social Brands -->
</div>
<!-- End Grid -->
</footer>