Footer DigitalOcean - Tailwind Component
A footer like DigitalOcean website, it is made with Tailwind CSS
footer
Loading component...
331 lines
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<footer class="mx-auto w-full font-medium text-gray-500">
<div class="relative bg-[#7BDEFF]">
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 400" xmlns="http://www.w3.org/2000/svg"
class="transition duration-300 ease-in-out delay-150">
<path
d="M 0,400 C 0,400 0,200 0,200 C 31.35659150387268,197.5098998123133 62.71318300774536,195.01979962462661 118,191 C 173.28681699225464,186.98020037537339 252.50385947289118,181.43070131380688 304,185 C 355.4961405271088,188.56929868619312 379.27137910069,201.25739512014593 417,189 C 454.72862089931,176.74260487985407 506.41062412434906,139.53971820560946 558,141 C 609.589375875651,142.46028179439054 661.0861244019137,182.58373205741626 705,186 C 748.9138755980863,189.41626794258374 785.2448782679955,156.1253535647255 840,148 C 894.7551217320045,139.8746464352745 967.9343625261042,156.91485368368183 1021,158 C 1074.0656374738958,159.08514631631817 1107.0176716275876,144.2152317005472 1144,143 C 1180.9823283724124,141.7847682994528 1221.9949509635464,154.22421951412937 1272,166 C 1322.0050490364536,177.77578048587063 1381.002524518227,188.88789024293533 1440,200 C 1440,200 1440,400 1440,400 Z"
stroke="none" stroke-width="0" fill="#ffffffff" class="transition-all duration-300 ease-in-out delay-150 path-0"
transform="rotate(-180 720 200)"></path>
</svg>
<div class="container px-4 mx-auto">
<div class="max-w-4xl mx-auto text-center">
<h2 class="mb-6 text-4xl lg:text-5xl font-bold text-indigo-900">Start building today</h2>
<p class="max-w-3xl mx-auto mb-10 text-lg text-gray-500">
Sign up now and you'll be up and running on DigitalOcean in just minutes.
</p>
<a class="w-auto rounded-lg py-2 px-8 text-lg font-bold border-2 border-transparent bg-gray-100 hover:bg-blue-600 text-gray-700 hover:text-gray-200 transition duration-200"
href="#">Sign up to get started</a>
</div>
</div>
</div>
<div class="bg-[#0069FF] pb-16">
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 400" xmlns="http://www.w3.org/2000/svg"
class="transition duration-300 ease-in-out delay-150">
<path
d="M 0,400 C 0,400 0,200 0,200 C 43.144690581300054,192.66817785296996 86.28938116260011,185.3363557059399 137,193 C 187.7106188373999,200.6636442940601 245.9871659308996,223.3227550292104 300,231 C 354.0128340691004,238.6772449707896 403.76195511380155,231.37262417721857 453,230 C 502.23804488619845,228.62737582278143 550.9650136138941,233.18674826191548 588,244 C 625.0349863861059,254.81325173808452 650.3779904306219,271.88038277511964 694,264 C 737.6220095693781,256.11961722488036 799.5230246636177,223.29172063760606 858,224 C 916.4769753363823,224.70827936239394 971.5299109149068,258.9527346744561 1022,265 C 1072.4700890850932,271.0472653255439 1118.3573316767556,248.89734066456955 1160,235 C 1201.6426683232444,221.10265933543045 1239.0407623780698,215.4579026672658 1285,211 C 1330.9592376219302,206.5420973327342 1385.4796188109651,203.2710486663671 1440,200 C 1440,200 1440,400 1440,400 Z"
stroke="none" stroke-width="0" fill="#7bdeffff" class="transition-all duration-300 ease-in-out delay-150 path-0"
transform="rotate(-180 720 200)"></path>
</svg>
<div
class="hidden md:grid grid-cols-2 gap-10 md:grid-cols-5 xl:px-14 lg:px-12 lg:mx-12 md:px-8 md:-mt-14 lg:-mt-24">
<nav class="flex flex-col items-start space-y-2.5 md:space-y-1.5 text-gray-300">
<h3 class="mb-2 font-bold uppercase tracking-wide text-xl">Company</h3>
<a href="#" class="transition hover:text-gray-900">About</a>
<a href="#" class="transition hover:text-gray-900">Leadership</a>
<a href="#" class="transition hover:text-gray-900">Blog</a>
<a href="#" class="transition hover:text-gray-900">Careers</a>
<a href="#" class="transition hover:text-gray-900">Customers</a>
<a href="#" class="transition hover:text-gray-900">Partners</a>
<a href="#" class="transition hover:text-gray-900">Referral Program</a>
<a href="#" class="transition hover:text-gray-900">Press</a>
<a href="#" class="transition hover:text-gray-900">Legal</a>
<a href="#" class="transition hover:text-gray-900">Trust Platform</a>
<a href="#" class="transition hover:text-gray-900">Investor Relations</a>
</nav>
<nav class="flex flex-col items-start space-y-2.5 md:space-y-1.5 text-gray-300">
<h3 class="mb-2 font-bold uppercase tracking-wide text-xl ">Products</h3>
<a href="#" class="transition hover:text-gray-900">Products Overview</a>
<a href="#" class="transition hover:text-gray-900">Droplets</a>
<a href="#" class="transition hover:text-gray-900">Kubernetes</a>
<a href="#" class="transition hover:text-gray-900">Managed Databases</a>
<a href="#" class="transition hover:text-gray-900">Spaces</a>
<a href="#" class="transition hover:text-gray-900">Marketplace</a>
<a href="#" class="transition hover:text-gray-900">Load Balancers</a>
<a href="#" class="transition hover:text-gray-900">Block Storage</a>
<a href="#" class="transition hover:text-gray-900">Tools & Integrations</a>
<a href="#" class="transition hover:text-gray-900">API</a>
<a href="#" class="transition hover:text-gray-900">Pricing</a>
<a href="#" class="transition hover:text-gray-900">Documentation</a>
<a href="#" class="transition hover:text-gray-900">Release Notes</a>
</nav>
<nav class="flex flex-col items-start space-y-2.5 md:space-y-1.5 text-gray-300">
<h3 class="mb-2 font-bold uppercase tracking-wide text-xl ">Community</h3>
<a href="#" class="transition hover:text-gray-900">Tutorials</a>
<a href="#" class="transition hover:text-gray-900">Meetups</a>
<a href="#" class="transition hover:text-gray-900">Q&A</a>
<a href="#" class="transition hover:text-gray-900">Write for Donations</a>
<a href="#" class="transition hover:text-gray-900">Droplets for Demos</a>
<a href="#" class="transition hover:text-gray-900">Hatch Startup Program</a>
<a href="#" class="transition hover:text-gray-900">Shop Swag</a>
<a href="#" class="transition hover:text-gray-900">Research Program</a>
<a href="#" class="transition hover:text-gray-900">Currents Research</a>
<a href="#" class="transition hover:text-gray-900">Open Source</a>
<a href="#" class="transition hover:text-gray-900">Code of Conduct</a>
<a href="#" class="transition hover:text-gray-900">Newsletter Signup</a>
</nav>
<nav class="flex flex-col items-start space-y-2.5 md:space-y-1.5 text-gray-300">
<h3 class="mb-2 font-bold uppercase tracking-wide text-xl">Solutions</h3>
<a href="#" class="transition hover:text-gray-900">Web & Mobile Apps</a>
<a href="#" class="transition hover:text-gray-900">Website Hosting</a>
<a href="#" class="transition hover:text-gray-900">Game Development</a>
<a href="#" class="transition hover:text-gray-900">Streaming</a>
<a href="#" class="transition hover:text-gray-900">VPN</a>
<a href="#" class="transition hover:text-gray-900">Startups</a>
<a href="#" class="transition hover:text-gray-900">SaaS Solutions</a>
<a href="#" class="transition hover:text-gray-900">Agency & Web Dev Shops</a>
<a href="#" class="transition hover:text-gray-900">Managed Cloud Hosting Providers</a>
<a href="#" class="transition hover:text-gray-900">Big Data</a>
<a href="#" class="transition hover:text-gray-900">Business Solutions</a>
</nav>
<nav class="flex flex-col items-start space-y-2.5 md:space-y-1.5 text-gray-300">
<h3 class="mb-2 font-bold uppercase tracking-wide text-xl ">Contact</h3>
<a href="#" class="transition hover:text-gray-900">Support</a>
<a href="#" class="transition hover:text-gray-900">Sales</a>
<a href="#" class="transition hover:text-gray-900">Report Abuse</a>
<a href="#" class="transition hover:text-gray-900">System Status</a>
<a href="#" class="transition hover:text-gray-900">Share your ideas</a>
</nav>
</div>
<div class="md:hidden mx-12 sm:-mt-12 mt-8 text-gray-200">
<!-- What is term -->
<div class="transition hover:bg-indigo-50 hover:text-indigo-600">
<!-- header -->
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
<i class="fas fa-plus"></i>
<h3 class="text-xl font-bold">Company</h3>
</div>
<!-- Content -->
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
<nav class="flex flex-col items-start space-y-2.5 md:space-y-1.5 text-gray-700 pb-4">
<a href="#" class="transition hover:text-gray-900">About</a>
<a href="#" class="transition hover:text-gray-900">Leadership</a>
<a href="#" class="transition hover:text-gray-900">Blog</a>
<a href="#" class="transition hover:text-gray-900">Careers</a>
<a href="#" class="transition hover:text-gray-900">Customers</a>
<a href="#" class="transition hover:text-gray-900">Partners</a>
<a href="#" class="transition hover:text-gray-900">Referral Program</a>
<a href="#" class="transition hover:text-gray-900">Press</a>
<a href="#" class="transition hover:text-gray-900">Legal</a>
<a href="#" class="transition hover:text-gray-900">Trust Platform</a>
<a href="#" class="transition hover:text-gray-900">Investor Relations</a>
</nav>
</div>
</div>
<!-- When to use Accordion Components -->
<div class="transition hover:bg-indigo-50 hover:text-indigo-600">
<!-- header -->
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
<i class="fas fa-plus"></i>
<h3 class="text-xl font-bold">Product</h3>
</div>
<!-- Content -->
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
<nav class="flex flex-col items-start space-y-2.5 md:space-y-1.5 text-gray-700 pb-4">
<a href="#" class="transition hover:text-gray-900">Products Overview</a>
<a href="#" class="transition hover:text-gray-900">Droplets</a>
<a href="#" class="transition hover:text-gray-900">Kubernetes</a>
<a href="#" class="transition hover:text-gray-900">Managed Databases</a>
<a href="#" class="transition hover:text-gray-900">Spaces</a>
<a href="#" class="transition hover:text-gray-900">Marketplace</a>
<a href="#" class="transition hover:text-gray-900">Load Balancers</a>
<a href="#" class="transition hover:text-gray-900">Block Storage</a>
<a href="#" class="transition hover:text-gray-900">Tools & Integrations</a>
<a href="#" class="transition hover:text-gray-900">API</a>
<a href="#" class="transition hover:text-gray-900">Pricing</a>
<a href="#" class="transition hover:text-gray-900">Documentation</a>
<a href="#" class="transition hover:text-gray-900">Release Notes</a>
</nav>
</div>
</div>
<!-- Accordion Wrapper -->
<div class="transition hover:bg-indigo-50 hover:text-indigo-600">
<!-- header -->
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
<i class="fas fa-plus"></i>
<h3 class="text-xl font-bold">Community</h3>
</div>
<!-- Content -->
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
<nav class="flex flex-col items-start space-y-2.5 md:space-y-1.5 text-gray-700 pb-4">
<a href="#" class="transition hover:text-gray-900">Tutorials</a>
<a href="#" class="transition hover:text-gray-900">Meetups</a>
<a href="#" class="transition hover:text-gray-900">Q&A</a>
<a href="#" class="transition hover:text-gray-900">Write for Donations</a>
<a href="#" class="transition hover:text-gray-900">Droplets for Demos</a>
<a href="#" class="transition hover:text-gray-900">Hatch Startup Program</a>
<a href="#" class="transition hover:text-gray-900">Shop Swag</a>
<a href="#" class="transition hover:text-gray-900">Research Program</a>
<a href="#" class="transition hover:text-gray-900">Currents Research</a>
<a href="#" class="transition hover:text-gray-900">Open Source</a>
<a href="#" class="transition hover:text-gray-900">Code of Conduct</a>
<a href="#" class="transition hover:text-gray-900">Newsletter Signup</a>
</nav>
</div>
</div>
<!-- Accordion Wrapper -->
<div class="transition hover:bg-indigo-50 hover:text-indigo-600">
<!-- header -->
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
<i class="fas fa-plus"></i>
<h3 class="text-xl font-bold">Solutions</h3>
</div>
<!-- Content -->
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
<nav class="flex flex-col items-start space-y-2.5 md:space-y-1.5 text-gray-700 pb-4">
<a href="#" class="transition hover:text-gray-900">Web & Mobile Apps</a>
<a href="#" class="transition hover:text-gray-900">Website Hosting</a>
<a href="#" class="transition hover:text-gray-900">Game Development</a>
<a href="#" class="transition hover:text-gray-900">Streaming</a>
<a href="#" class="transition hover:text-gray-900">VPN</a>
<a href="#" class="transition hover:text-gray-900">Startups</a>
<a href="#" class="transition hover:text-gray-900">SaaS Solutions</a>
<a href="#" class="transition hover:text-gray-900">Agency & Web Dev Shops</a>
<a href="#" class="transition hover:text-gray-900">Managed Cloud Hosting Providers</a>
<a href="#" class="transition hover:text-gray-900">Big Data</a>
<a href="#" class="transition hover:text-gray-900">Business Solutions</a>
</nav>
</div>
</div>
<div class="transition hover:bg-indigo-50 hover:text-indigo-600">
<!-- header -->
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
<i class="fas fa-plus"></i>
<h3 class="text-xl font-bold">Contact</h3>
</div>
<!-- Content -->
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
<nav class="flex flex-col items-start space-y-2.5 md:space-y-1.5 text-gray-700 pb-4">
<a href="#" class="transition hover:text-gray-900">Support</a>
<a href="#" class="transition hover:text-gray-900">Sales</a>
<a href="#" class="transition hover:text-gray-900">Report Abuse</a>
<a href="#" class="transition hover:text-gray-900">System Status</a>
<a href="#" class="transition hover:text-gray-900">Share your ideas</a>
</nav>
</div>
</div>
</div>
</div>
<div
class="flex flex-col space-y-4 pb-8 border-t border-gray-200 bg-[#0069FF] text-gray-200 py-8 px-8 sm:items-center sm:justify-between md:flex-row md:space-y-0">
<p class="text-center md:text-left">© 2022 DigitalOcean, LLC. All rights reserved.</p>
<div class="flex flex-wrap justify-center gap-2">
<button
class="bg-blue-300 bg-opacity-40 hover:bg-blue-400 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded">
<svg class="w-5 h-5 fill-current" role="img" 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>
</button>
<button
class="bg-blue-300 bg-opacity-40 hover:bg-blue-400 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded">
<svg class="w-5 h-5 fill-current" role="img" 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>
</button>
<button
class="bg-blue-300 bg-opacity-40 hover:bg-blue-400 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded">
<svg class="w-5 h-5 fill-current" role="img" 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>
</button>
<button
class="bg-blue-300 bg-opacity-40 hover:bg-blue-400 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded">
<svg class="w-5 h-5 fill-current" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z" />
</svg>
</button>
<button
class="bg-blue-300 bg-opacity-40 hover:bg-blue-400 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded">
<svg class="w-5 h-5 fill-current" role="img" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<g>
<path
d="M218.123122,218.127392 L180.191928,218.127392 L180.191928,158.724263 C180.191928,144.559023 179.939053,126.323993 160.463756,126.323993 C140.707926,126.323993 137.685284,141.757585 137.685284,157.692986 L137.685284,218.123441 L99.7540894,218.123441 L99.7540894,95.9665207 L136.168036,95.9665207 L136.168036,112.660562 L136.677736,112.660562 C144.102746,99.9650027 157.908637,92.3824528 172.605689,92.9280076 C211.050535,92.9280076 218.138927,118.216023 218.138927,151.114151 L218.123122,218.127392 Z M56.9550587,79.2685282 C44.7981969,79.2707099 34.9413443,69.4171797 34.9391618,57.260052 C34.93698,45.1029244 44.7902948,35.2458562 56.9471566,35.2436736 C69.1040185,35.2414916 78.9608713,45.0950217 78.963054,57.2521493 C78.9641017,63.090208 76.6459976,68.6895714 72.5186979,72.8184433 C68.3913982,76.9473153 62.7929898,79.26748 56.9550587,79.2685282 M75.9206558,218.127392 L37.94995,218.127392 L37.94995,95.9665207 L75.9206558,95.9665207 L75.9206558,218.127392 Z M237.033403,0.0182577091 L18.8895249,0.0182577091 C8.57959469,-0.0980923971 0.124827038,8.16056231 -0.001,18.4706066 L-0.001,237.524091 C0.120519052,247.839103 8.57460631,256.105934 18.8895249,255.9977 L237.033403,255.9977 C247.368728,256.125818 255.855922,247.859464 255.999,237.524091 L255.999,18.4548016 C255.851624,8.12438979 247.363742,-0.133792868 237.033403,0.000790807055">
</path>
</g>
</svg>
</button>
<button
class="bg-blue-300 bg-opacity-40 hover:bg-blue-400 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded">
<svg class="w-5 h-5 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>
</button>
<button
class="bg-blue-300 bg-opacity-40 hover:bg-blue-400 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded">
<svg 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.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385c.6.105.825-.255.825-.57c0-.285-.015-1.23-.015-2.235c-3.015.555-3.795-.735-4.035-1.41c-.135-.345-.72-1.41-1.23-1.695c-.42-.225-1.02-.78-.015-.795c.945-.015 1.62.87 1.845 1.23c1.08 1.815 2.805 1.305 3.495.99c.105-.78.42-1.305.765-1.605c-2.67-.3-5.46-1.335-5.46-5.925c0-1.305.465-2.385 1.23-3.225c-.12-.3-.54-1.53.12-3.18c0 0 1.005-.315 3.3 1.23c.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23c.66 1.65.24 2.88.12 3.18c.765.84 1.23 1.905 1.23 3.225c0 4.605-2.805 5.625-5.475 5.925c.435.375.81 1.095.81 2.22c0 1.605-.015 2.895-.015 3.3c0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"
fill="currentColor" />
</g>
</svg>
</button>
<button
class="bg-blue-300 bg-opacity-40 hover:bg-blue-400 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded">
<svg 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>
</button>
</div>
</div>
</footer>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body {
font-family: 'Space Mono', monospace;
}
.accordion-content {
transition: max-height 0.3s ease-out, padding 0.3s ease;
}
</style>
<script>
const accordionHeader = document.querySelectorAll(".accordion-header");
accordionHeader.forEach((header) => {
header.addEventListener("click", function () {
const accordionContent = header.parentElement.querySelector(".accordion-content");
let accordionMaxHeight = accordionContent.style.maxHeight;
// Condition handling
if (accordionMaxHeight == "0px" || accordionMaxHeight.length == 0) {
accordionContent.style.maxHeight = `${accordionContent.scrollHeight + 32}px`;
header.querySelector(".fas").classList.remove("fa-plus");
header.querySelector(".fas").classList.add("fa-minus");
header.parentElement.classList.add("bg-indigo-50");
} else {
accordionContent.style.maxHeight = `0px`;
header.querySelector(".fas").classList.add("fa-plus");
header.querySelector(".fas").classList.remove("fa-minus");
header.parentElement.classList.remove("bg-indigo-50");
}
});
});
</script>