Image Footer Section Using Tailwind UI
The Image Footer Section, crafted with Tailwind CSS, seamlessly integrates captivating images into the footer, adding visual charm to the website’s closing.
footer
Loading component...
104 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
.body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<!-- design inspired by https://focal.inc/ -->
<div class="w-full px-8 py-10 bg-gray-200">
<footer class="px-8 py-8 sm:px-24 sm:py-16 mx-auto text-purple-900 rounded-lg max-w-7xl bg-[#fe9a86]">
<div class="justify-center items-start text-center mb-16 text-[#050403]">
<h1 class="mb-8 text-6xl font-semibold">Empower your team’s creativity</h1>
<p class="mb-8 text-xl">Ship high-performing creatives 10x faster</p>
<button class="text-lg rounded-xl py-3 px-4 bg-[#33120A] text-white hover:bg-opacity-80 mb-12">Join
Waitlist</button>
<div class="relative">
<img class="rounded-lg"
src="https://res.cloudinary.com/daqsjyrgg/image/upload/v1692774985/404/svp7jv7ov190cc4mvsyd.png" alt="Gambar"
class="w-full h-auto">
<div
class="absolute bottom-0 left-0 w-full h-1/4 bg-gradient-to-b from-transparent to-[#fe9a86] backdrop-blur-sm">
</div>
</div>
</div>
<div class="pt-10 text-left bg-[#33120A] rounded-3xl px-8 py-12">
<div class="flex flex-col items-start justify-start sm:flex-row">
<div class="mb-5">
<div class="flex items-center mb-8 space-x-2">
<svg width="119" height="32" viewBox="0 0 119 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M-101.5 36C-101.5-24.4752-52.4752-73.5 8-73.5S117.5-24.4752 117.5 36 68.4752 145.5 8 145.5-101.5 96.4752-101.5 36zM8-74.5c-61.0275 0-110.5 49.4725-110.5 110.5S-53.0275 146.5 8 146.5 118.5 97.0275 118.5 36 69.0275-74.5 8-74.5zm0 9C-48.0569-65.5-93.5-20.0569-93.5 36S-48.0569 137.5 8 137.5 109.5 92.0569 109.5 36 64.0569-65.5 8-65.5zM-94.5 36C-94.5-20.6092-48.6092-66.5 8-66.5S110.5-20.6092 110.5 36 64.6092 138.5 8 138.5-94.5 92.6092-94.5 36zm9 0c0-51.6386 41.8614-93.5 93.5-93.5s93.5 41.8614 93.5 93.5S59.6386 129.5 8 129.5-85.5 87.6386-85.5 36zM8-58.5c-52.1909 0-94.5 42.3091-94.5 94.5s42.3091 94.5 94.5 94.5 94.5-42.3091 94.5-94.5S60.1909-58.5 8-58.5zm0 9c-47.2203 0-85.5 38.2797-85.5 85.5 0 47.2204 38.2797 85.5 85.5 85.5 47.2204 0 85.5-38.2796 85.5-85.5 0-47.2203-38.2796-85.5-85.5-85.5zM-78.5 36c0-47.7726 38.7274-86.5 86.5-86.5S94.5-11.7726 94.5 36 55.7726 122.5 8 122.5-78.5 83.7726-78.5 36zm9 0c0-42.802 34.6979-77.5 77.5-77.5S85.5-6.802 85.5 36c0 42.8021-34.6979 77.5-77.5 77.5S-69.5 78.8021-69.5 36zM8-42.5c-43.3544 0-78.5 35.1457-78.5 78.5 0 43.3544 35.1456 78.5 78.5 78.5S86.5 79.3544 86.5 36C86.5-7.3543 51.3544-42.5 8-42.5zm0 9c-38.3838 0-69.5 31.1162-69.5 69.5s31.1162 69.5 69.5 69.5S77.5 74.3838 77.5 36 46.3838-33.5 8-33.5zM-62.5 36c0-38.936 31.5639-70.5 70.5-70.5 38.9361 0 70.5 31.564 70.5 70.5 0 38.9361-31.5639 70.5-70.5 70.5-38.9361 0-70.5-31.5639-70.5-70.5zm9 0c0-33.9655 27.5345-61.5 61.5-61.5S69.5 2.0345 69.5 36 41.9655 97.5 8 97.5-53.5 69.9655-53.5 36zM8-26.5c-34.5178 0-62.5 27.9822-62.5 62.5S-26.5178 98.5 8 98.5 70.5 70.5178 70.5 36 42.5178-26.5 8-26.5zm0 9c-29.5472 0-53.5 23.9528-53.5 53.5S-21.5472 89.5 8 89.5 61.5 65.5472 61.5 36 37.5472-17.5 8-17.5zM-46.5 36c0-30.0995 24.4005-54.5 54.5-54.5S62.5 5.9005 62.5 36 38.0995 90.5 8 90.5-46.5 66.0995-46.5 36zm9 0C-37.5 10.871-17.129-9.5 8-9.5S53.5 10.871 53.5 36 33.129 81.5 8 81.5-37.5 61.129-37.5 36zM8-10.5c-25.6812 0-46.5 20.8188-46.5 46.5S-17.6812 82.5 8 82.5 54.5 61.6812 54.5 36 33.6812-10.5 8-10.5zm0 9c-20.7107 0-37.5 16.7893-37.5 37.5S-12.7107 73.5 8 73.5 45.5 56.7107 45.5 36 28.7107-1.5 8-1.5zM-30.5 36C-30.5 14.737-13.263-2.5 8-2.5S46.5 14.737 46.5 36 29.263 74.5 8 74.5-30.5 57.263-30.5 36zm9 0C-21.5 19.7076-8.2924 6.5 8 6.5S37.5 19.7076 37.5 36 24.2924 65.5 8 65.5-21.5 52.2924-21.5 36zM8 5.5C-8.8447 5.5-22.5 19.1553-22.5 36S-8.8447 66.5 8 66.5 38.5 52.8447 38.5 36 24.8447 5.5 8 5.5zM-13.5 36c0-11.8741 9.6259-21.5 21.5-21.5S29.5 24.1259 29.5 36 19.8741 57.5 8 57.5-13.5 47.8741-13.5 36zM8 13.5c-12.4264 0-22.5 10.0736-22.5 22.5S-4.4264 58.5 8 58.5 30.5 48.4264 30.5 36 20.4264 13.5 8 13.5zm0 9C.5442 22.5-5.5 28.5442-5.5 36S.5442 49.5 8 49.5 21.5 43.4558 21.5 36 15.4558 22.5 8 22.5zM-6.5 36c0-8.0081 6.4919-14.5 14.5-14.5 8.0081 0 14.5 6.4919 14.5 14.5 0 8.0081-6.4919 14.5-14.5 14.5-8.0081 0-14.5-6.4919-14.5-14.5zm9 0c0-3.0376 2.4624-5.5 5.5-5.5s5.5 2.4624 5.5 5.5-2.4624 5.5-5.5 5.5-5.5-2.4624-5.5-5.5zM8 29.5c-3.5899 0-6.5 2.9101-6.5 6.5s2.9101 6.5 6.5 6.5 6.5-2.9101 6.5-6.5-2.9101-6.5-6.5-6.5z"
fill="url(#paint0_radial_461_13100)" fill-opacity=".04"></path>
<g clip-path="url(#clip0_461_13100)" stroke="#fff" stroke-width="4">
<circle cx="8" cy="16" r="22"></circle>
<circle cx="8" cy="16" r="14"></circle>
<circle cx="8" cy="16" r="6"></circle>
</g>
<path
d="M49.518 8.6h10.186v2.244h-7.612v4.048h6.182v2.244h-6.182V24h-2.574V8.6zm15.9919 15.576c-1.1 0-2.0826-.242-2.948-.726-.8653-.4987-1.5473-1.1807-2.046-2.046-.484-.8653-.726-1.848-.726-2.948 0-1.1.242-2.0827.726-2.948.4987-.8653 1.1807-1.54 2.046-2.024.8654-.4987 1.848-.748 2.948-.748 1.1 0 2.0827.2493 2.948.748.8654.484 1.54 1.1587 2.024 2.024.4987.8653.748 1.848.748 2.948 0 1.1-.2493 2.0827-.748 2.948-.484.8653-1.1586 1.5473-2.024 2.046-.8653.484-1.848.726-2.948.726zm0-2.09c.6454 0 1.2174-.154 1.716-.462.4987-.308.8874-.7333 1.166-1.276.2787-.5573.418-1.188.418-1.892s-.1393-1.3273-.418-1.87c-.2786-.5573-.6673-.99-1.166-1.298-.4986-.308-1.0706-.462-1.716-.462-.6453 0-1.2173.154-1.716.462-.4986.308-.8873.7333-1.166 1.276-.2786.5427-.418 1.1733-.418 1.892 0 .7187.1394 1.3493.418 1.892.2787.5427.6674.968 1.166 1.276.4987.308 1.0707.462 1.716.462zm12.7985 2.09c-1.0853 0-2.0533-.2347-2.904-.704-.8506-.484-1.5106-1.1587-1.98-2.024-.4546-.8653-.682-1.8627-.682-2.992s.2274-2.1267.682-2.992c.4694-.8653 1.1294-1.5327 1.98-2.002.8507-.484 1.8187-.726 2.904-.726 1.3494 0 2.4787.3373 3.388 1.012.924.6747 1.4814 1.584 1.672 2.728l-2.332.462c-.1173-.6307-.418-1.1367-.902-1.518-.484-.396-1.0706-.594-1.76-.594-.9533 0-1.716.33-2.288.99-.572.66-.858 1.54-.858 2.64s.286 1.98.858 2.64c.572.66 1.3347.99 2.288.99.704 0 1.2907-.1833 1.76-.55.4694-.3667.77-.8727.902-1.518l2.354.462c-.2346 1.144-.8066 2.046-1.716 2.706-.8946.66-2.0166.99-3.366.99zm13.7002-7.348c0-.6893-.22-1.2247-.66-1.606-.4253-.396-1.0047-.594-1.738-.594-.6747 0-1.232.1907-1.672.572-.44.3813-.6967.8947-.77 1.54l-2.156-.396c.176-1.0853.6893-1.958 1.54-2.618.8507-.66 1.87-.99 3.058-.99.9387 0 1.76.1687 2.464.506.7187.3373 1.276.836 1.672 1.496.4107.66.616 1.4447.616 2.354V24h-2.354v-7.172zm-3.476 7.348c-.7187 0-1.364-.1393-1.936-.418-.5573-.2787-.9973-.6673-1.32-1.166-.308-.4987-.462-1.0633-.462-1.694 0-1.0707.418-1.9067 1.254-2.508.8507-.616 2.134-1.012 3.85-1.188l2.31-.242v1.782l-2.332.264c-.9093.088-1.5913.2933-2.046.616-.4547.3227-.682.726-.682 1.21 0 .44.1687.7993.506 1.078.3373.2787.7847.418 1.342.418.9387 0 1.672-.2933 2.2-.88.5427-.6013.8067-1.3787.792-2.332l.066 3.058c-.2933.6013-.77 1.0853-1.43 1.452-.6453.3667-1.3493.55-2.112.55zm8.5389-15.752h2.398V24h-2.398V8.424z"
fill="#fff"></path>
<defs>
<radialGradient id="paint0_radial_461_13100" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0 110.5 -110.5 0 8 36)">
<stop stop-color="#050403"></stop>
<stop offset="1" stop-color="#050403" stop-opacity="0"></stop>
</radialGradient>
<clipPath id="clip0_461_13100">
<path fill="#fff" d="M0 0h32v32H0z"></path>
</clipPath>
</defs>
</svg>
</div>
</div>
<div class="grid grid-cols-1 gap-4 ml-4 sm:grid-cols-2 lg:grid-cols-4 md:gap-10 xl:gap-24 md:ml-12">
<div class="mb-5">
<h4 class="pb-4 font-semibold text-sm text-[#fe9a86]">Features</h4>
<ul class="text-base text-white">
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Assets library</a></li>
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Integrations</a></li>
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Media player</a></li>
<li class="pb-4 "> <a href="#" class="hover:text-purple-800">Pages</a></li>
</ul>
</div>
<div class="mb-5">
<h4 class="pb-4 font-semibold text-sm text-[#fe9a86]">Uses Cases</h4>
<ul class="text-base text-white">
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Creative teams</a></li>
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Marketing teams</a></li>
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Freelances</a></li>
</ul>
</div>
<div class="mb-5">
<h4 class="pb-4 font-semibold text-sm text-[#fe9a86]">Company</h4>
<ul class="text-base text-white">
<li class="pb-4"> <a href="#" class="hover:text-purple-800">About us</a></li>
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Blog</a></li>
<li class="pb-4"> <a href="#" class="hover:text-purple-800">FAQ</a></li>
<li class="pb-4 "> <a href="#" class="hover:text-purple-800">Privacy Policy</a></li>
<li class="pb-4 "> <a href="#" class="hover:text-purple-800">Solutions library</a></li>
</ul>
</div>
<div class="mb-5">
<h4 class="pb-4 font-semibold text-sm text-[#fe9a86]">Social</h4>
<ul class="text-base text-white">
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Twitter</a></li>
<li class="pb-4"> <a href="#" class="hover:text-purple-800">Linkedin</a></li>
</ul>
</div>
</div>
</div>
<div class="text-base text-[#fe9a86]">
©2023 Focal
</div>
</div>
</footer>
</div>