Components
  • Home
  • /Components
  • /Footers
;
<footer class="w-full bg-[#fafafa] dark:bg-black border-t dark:border-white/20 border-black/20 text-black dark:text-white">
  <nav class="flex flex-wrap gap-8 w-full max-w-screen-xl mx-auto px-4 py-16">
    <div class="max-sm:pr-4 pr-8 space-y-4 max-lg:mx-auto max-sm:col-span-4 max-lg:mb-10 basis-[7.5rem] max-sm:basis-full grow shrink-0">
      <svg width="97" height="33" viewBox="0 0 97 33" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.576 32.576C10.176 32.576 8.272 31.792 6.864 30.224C5.488 28.624 4.8 26.352 4.8 23.408V11.696H0.48V7.952H4.896L5.808 0.079999H9.12V7.952H16.032V11.696H9.12V23.744C9.12 25.6 9.504 26.896 10.272 27.632C11.072 28.368 12.016 28.736 13.104 28.736C13.904 28.736 14.656 28.608 15.36 28.352C16.096 28.096 16.768 27.792 17.376 27.44L18.576 30.896C17.936 31.28 17.072 31.648 15.984 32C14.896 32.384 13.76 32.576 12.576 32.576ZM31.5326 32.576C29.4526 32.576 27.5646 32.048 25.8686 30.992C24.1726 29.936 22.8126 28.448 21.7886 26.528C20.7966 24.576 20.3006 22.288 20.3006 19.664C20.3006 17.168 20.7966 14.928 21.7886 12.944C22.8126 10.96 24.2046 9.392 25.9646 8.24C27.7566 7.056 29.8046 6.464 32.1086 6.464C33.5486 6.464 34.8446 6.72 35.9966 7.232C37.1806 7.712 38.2046 8.32 39.0686 9.056V7.04H43.0046V25.952C43.0046 27.168 43.2926 27.968 43.8686 28.352C44.4766 28.704 45.1326 28.88 45.8366 28.88L44.9246 32.24C41.8526 32.24 39.9966 30.992 39.3566 28.496C38.6206 29.52 37.6126 30.464 36.3326 31.328C35.0846 32.16 33.4846 32.576 31.5326 32.576ZM32.4926 28.736C33.7086 28.736 34.8606 28.448 35.9486 27.872C37.0366 27.264 37.9486 26.512 38.6846 25.616V12.224C37.8206 11.616 36.8606 11.136 35.8046 10.784C34.7806 10.4 33.6926 10.208 32.5406 10.208C31.0046 10.208 29.6446 10.608 28.4606 11.408C27.3086 12.176 26.3966 13.264 25.7246 14.672C25.0526 16.048 24.7166 17.664 24.7166 19.52C24.7166 21.312 25.0526 22.912 25.7246 24.32C26.3966 25.696 27.3246 26.784 28.5086 27.584C29.6926 28.352 31.0206 28.736 32.4926 28.736ZM61.2169 32.576C58.8489 32.576 56.7689 32.032 54.9769 30.944C53.2169 29.824 51.8569 28.288 50.8969 26.336C49.9369 24.352 49.4569 22.08 49.4569 19.52C49.4569 17.12 49.9369 14.928 50.8969 12.944C51.8889 10.96 53.2969 9.392 55.1209 8.24C56.9449 7.056 59.0889 6.464 61.5529 6.464C62.9609 6.464 64.1929 6.592 65.2489 6.848C66.3369 7.104 67.3769 7.472 68.3689 7.952L67.0729 11.6C66.1769 11.152 65.3129 10.832 64.4809 10.64C63.6809 10.416 62.7849 10.304 61.7929 10.304C59.5529 10.304 57.6649 11.12 56.1289 12.752C54.6249 14.352 53.8729 16.576 53.8729 19.424C53.8729 21.152 54.1929 22.72 54.8329 24.128C55.4729 25.536 56.3529 26.656 57.4729 27.488C58.6249 28.32 59.9689 28.736 61.5049 28.736C62.7209 28.736 63.7609 28.608 64.6249 28.352C65.4889 28.064 66.4169 27.664 67.4089 27.152L68.7529 30.8C67.7609 31.344 66.6409 31.776 65.3929 32.096C64.1769 32.416 62.7849 32.576 61.2169 32.576ZM83.8208 32.576C81.4528 32.576 79.3248 32.032 77.4368 30.944C75.5488 29.824 74.0608 28.288 72.9728 26.336C71.9168 24.352 71.3888 22.08 71.3888 19.52C71.3888 16.832 71.9328 14.512 73.0208 12.56C74.1088 10.608 75.5968 9.104 77.4848 8.048C79.3728 6.992 81.4848 6.464 83.8208 6.464C86.1568 6.464 88.2528 6.992 90.1088 8.048C91.9968 9.104 93.4848 10.608 94.5728 12.56C95.6928 14.48 96.2528 16.768 96.2528 19.424C96.2528 22.08 95.7088 24.4 94.6208 26.384C93.5328 28.336 92.0448 29.856 90.1568 30.944C88.3008 32.032 86.1888 32.576 83.8208 32.576ZM83.8208 28.736C86.3488 28.736 88.3168 27.888 89.7248 26.192C91.1328 24.464 91.8368 22.24 91.8368 19.52C91.8368 17.856 91.4848 16.336 90.7808 14.96C90.0768 13.552 89.1168 12.432 87.9008 11.6C86.7168 10.736 85.3568 10.304 83.8208 10.304C81.2928 10.304 79.3248 11.136 77.9168 12.8C76.5088 14.464 75.8047 16.672 75.8047 19.424C75.8047 21.088 76.1568 22.64 76.8608 24.08C77.5648 25.488 78.5088 26.624 79.6928 27.488C80.9088 28.32 82.2848 28.736 83.8208 28.736Z" fill="currentColor" /> </svg>
      <p class="text-sm opacity-50">Website which helps to build websites</p>
    </div>
    <div class="space-y-3 basis-[7.5rem] grow shrink-0">
      <label class="max-sm:w-full inline-block text-base max-sm:border-b-2 pb-1.5 dark:max-sm:border-white/20 max-sm:border-black/10" for="section1">
        Pages
      </label>
      <ul class="grid gap-3.5 text-base [&_a]:opacity-50 hover:[&_a]:opacity-100 [&_a]:transition-opacity">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
    <div class="space-y-3 basis-[7.5rem] grow shrink-0">
      <label class="max-sm:w-full inline-block max-sm:border-b-2 pb-1.5 dark:max-sm:border-white/20 max-sm:border-black/10 text-base" for="section2">
        Explore
      </label>
      <ul class="grid gap-3.5 text-base [&_a]:opacity-50 hover:[&_a]:opacity-100 [&_a]:transition-opacity">
        <li><a href="#">Docs</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Guides</a></li>
      </ul>
    </div>
    <div class="space-y-3 basis-[7.5rem] grow shrink-0">
      <label class="max-sm:w-full inline-block max-sm:border-b-2 pb-1.5 dark:max-sm:border-white/20 max-sm:border-black/10 text-base" for="section3">
        Company
      </label>
      <ul class="grid gap-3.5 text-base [&_a]:opacity-50 hover:[&_a]:opacity-100 [&_a]:transition-opacity">
        <li><a href="#">Blog</a></li>
        <li><a href="#">Career</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Partners</a></li>
      </ul>
    </div>
  </nav>

  <div class="mx-auto w-fit opacity-60 py-2">
    <span>&copy; 2023 taco. All rights reserved</span>
    <div class="flex justify-center gap-4 mt-6">
      <a href="#"><span><svg xmlns="http://www.w3.org/2000/svg" class="w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /> </svg></span></a>
      <a href="#"><span><svg xmlns="http://www.w3.org/2000/svg" class="w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /> </svg></span></a>
    </div>
  </div>
</footer>
;
<footer class="w-full border-t dark:border-zinc-800 border-zinc-300">
    <nav class="text-black dark:text-white grid grid-cols-1 lg:grid-cols-4 w-full max-w-screen-xl mx-auto px-4 py-16">
        <div class="max-sm:pr-4 pr-8 space-y-4 max-lg:mx-auto max-lg:mb-10">
            <svg width="97" height="33" viewBox="0 0 97 33" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.576 32.576C10.176 32.576 8.272 31.792 6.864 30.224C5.488 28.624 4.8 26.352 4.8 23.408V11.696H0.48V7.952H4.896L5.808 0.079999H9.12V7.952H16.032V11.696H9.12V23.744C9.12 25.6 9.504 26.896 10.272 27.632C11.072 28.368 12.016 28.736 13.104 28.736C13.904 28.736 14.656 28.608 15.36 28.352C16.096 28.096 16.768 27.792 17.376 27.44L18.576 30.896C17.936 31.28 17.072 31.648 15.984 32C14.896 32.384 13.76 32.576 12.576 32.576ZM31.5326 32.576C29.4526 32.576 27.5646 32.048 25.8686 30.992C24.1726 29.936 22.8126 28.448 21.7886 26.528C20.7966 24.576 20.3006 22.288 20.3006 19.664C20.3006 17.168 20.7966 14.928 21.7886 12.944C22.8126 10.96 24.2046 9.392 25.9646 8.24C27.7566 7.056 29.8046 6.464 32.1086 6.464C33.5486 6.464 34.8446 6.72 35.9966 7.232C37.1806 7.712 38.2046 8.32 39.0686 9.056V7.04H43.0046V25.952C43.0046 27.168 43.2926 27.968 43.8686 28.352C44.4766 28.704 45.1326 28.88 45.8366 28.88L44.9246 32.24C41.8526 32.24 39.9966 30.992 39.3566 28.496C38.6206 29.52 37.6126 30.464 36.3326 31.328C35.0846 32.16 33.4846 32.576 31.5326 32.576ZM32.4926 28.736C33.7086 28.736 34.8606 28.448 35.9486 27.872C37.0366 27.264 37.9486 26.512 38.6846 25.616V12.224C37.8206 11.616 36.8606 11.136 35.8046 10.784C34.7806 10.4 33.6926 10.208 32.5406 10.208C31.0046 10.208 29.6446 10.608 28.4606 11.408C27.3086 12.176 26.3966 13.264 25.7246 14.672C25.0526 16.048 24.7166 17.664 24.7166 19.52C24.7166 21.312 25.0526 22.912 25.7246 24.32C26.3966 25.696 27.3246 26.784 28.5086 27.584C29.6926 28.352 31.0206 28.736 32.4926 28.736ZM61.2169 32.576C58.8489 32.576 56.7689 32.032 54.9769 30.944C53.2169 29.824 51.8569 28.288 50.8969 26.336C49.9369 24.352 49.4569 22.08 49.4569 19.52C49.4569 17.12 49.9369 14.928 50.8969 12.944C51.8889 10.96 53.2969 9.392 55.1209 8.24C56.9449 7.056 59.0889 6.464 61.5529 6.464C62.9609 6.464 64.1929 6.592 65.2489 6.848C66.3369 7.104 67.3769 7.472 68.3689 7.952L67.0729 11.6C66.1769 11.152 65.3129 10.832 64.4809 10.64C63.6809 10.416 62.7849 10.304 61.7929 10.304C59.5529 10.304 57.6649 11.12 56.1289 12.752C54.6249 14.352 53.8729 16.576 53.8729 19.424C53.8729 21.152 54.1929 22.72 54.8329 24.128C55.4729 25.536 56.3529 26.656 57.4729 27.488C58.6249 28.32 59.9689 28.736 61.5049 28.736C62.7209 28.736 63.7609 28.608 64.6249 28.352C65.4889 28.064 66.4169 27.664 67.4089 27.152L68.7529 30.8C67.7609 31.344 66.6409 31.776 65.3929 32.096C64.1769 32.416 62.7849 32.576 61.2169 32.576ZM83.8208 32.576C81.4528 32.576 79.3248 32.032 77.4368 30.944C75.5488 29.824 74.0608 28.288 72.9728 26.336C71.9168 24.352 71.3888 22.08 71.3888 19.52C71.3888 16.832 71.9328 14.512 73.0208 12.56C74.1088 10.608 75.5968 9.104 77.4848 8.048C79.3728 6.992 81.4848 6.464 83.8208 6.464C86.1568 6.464 88.2528 6.992 90.1088 8.048C91.9968 9.104 93.4848 10.608 94.5728 12.56C95.6928 14.48 96.2528 16.768 96.2528 19.424C96.2528 22.08 95.7088 24.4 94.6208 26.384C93.5328 28.336 92.0448 29.856 90.1568 30.944C88.3008 32.032 86.1888 32.576 83.8208 32.576ZM83.8208 28.736C86.3488 28.736 88.3168 27.888 89.7248 26.192C91.1328 24.464 91.8368 22.24 91.8368 19.52C91.8368 17.856 91.4848 16.336 90.7808 14.96C90.0768 13.552 89.1168 12.432 87.9008 11.6C86.7168 10.736 85.3568 10.304 83.8208 10.304C81.2928 10.304 79.3248 11.136 77.9168 12.8C76.5088 14.464 75.8047 16.672 75.8047 19.424C75.8047 21.088 76.1568 22.64 76.8608 24.08C77.5648 25.488 78.5088 26.624 79.6928 27.488C80.9088 28.32 82.2848 28.736 83.8208 28.736Z" fill="currentColor" /> </svg>
            <p class="text-sm opacity-50">Website which helps to build websites</p>
        </div>
        <div class="space-y-4 max-lg:py-2 max-lg:border-b dark:max-lg:border-white/20  max-lg:border-zinc-300 dark:border-zinc-700 relative">
            <input type="checkbox" name="footer-sections" id="section1" class="peer absolute hidden" />
            <label for="section1" class="text-base mb-1">Pages</label>
            <ul class="lg:!grid hidden peer-checked:grid gap-3.5 text-base dark:[&>li>a]:opacity-50 [&>li>a]:opacity-60 hover:[&>li>a]:opacity-100 dark:hover:[&>li>a]:opacity-100  [&>li>a]:transition-opacity">
                <li><a href="#" >Home</a></li>
                <li><a href="#" >Services</a></li>
                <li><a href="#" >Contact</a></li>
                <li><a href="#" >About</a></li>
            </ul>
        </div>
        <div class="space-y-4 max-lg:py-2 max-lg:border-b dark:max-lg:border-white/20  max-lg:border-zinc-300 relative">
            <label class="text-base mb-1" for="section2">Explore</label>
            <input type="checkbox" name="footer-sections" id="section2" class="peer absolute hidden" />
            <ul class="lg:!grid hidden peer-checked:grid gap-3.5 text-base dark:[&>li>a]:opacity-50 [&>li>a]:opacity-60 hover:[&>li>a]:opacity-100 dark:hover:[&>li>a]:opacity-100  [&>li>a]:transition-opacity">
                <li><a href="#" >Docs</a></li>
                <li><a href="#" >Pricing</a></li>
                <li><a href="#" >Help</a></li>
                <li><a href="#" >Guides</a></li>
            </ul>
        </div>
        <div class="space-y-4 max-lg:py-2 max-lg:border-b dark:max-lg:border-white/20  max-lg:border-zinc-300 relative">
            <input type="checkbox" name="footer-sections" id="section3" class="peer absolute hidden" />
            <label class="text-base mb-1" for="section3">Company</label>
            <ul class="lg:!grid hidden peer-checked:grid gap-3.5 text-base dark:[&>li>a]:opacity-50 [&>li>a]:opacity-60 hover:[&>li>a]:opacity-100 dark:hover:[&>li>a]:opacity-100  [&>li>a]:transition-opacity">
                <li><a href="#" >Blog</a></li>
                <li><a href="#" >Career</a></li>
                <li><a href="#" >Contact Us</a></li>
                <li><a href="#" >Partners</a></li>
            </ul>
        </div>
    </nav>
</footer>

Created by  Vikram Sungadi