Posts Learn Components Snippets Categories Tags Tools About
/
<style>
  /** hide scrollbar for Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    /** hide scrollbar for IE, Edge and Firefox */
    .no-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
</style>

<div class="h-screen bg-gray-100 flex items-center justify-center w-full">
  <footer class="container bg-white mx-auto">
    <div class="no-scrollbar flex items-center space-x-6 overflow-hidden overflow-x-scroll lg:justify-center p-4">
      <a href="https://menuyaa.test">
        <svg class="h-6 w-auto fill-current text-zinc-300 hover:text-rose-500" viewBox="0 0 248.51501 29.736023" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M240.156 29.7C237.972 29.7 236.088 29.274 234.504 28.422C232.92 27.5699 231.696 26.394 230.832 24.894C229.968 23.394 229.536 21.684 229.536 19.764C229.536 18.324 229.776 16.9919 230.256 15.7679C230.736 14.5439 231.408 13.482 232.272 12.582C233.136 11.6819 234.162 10.986 235.35 10.494C236.538 10.002 237.84 9.75598 239.256 9.75598C240.648 9.75598 241.914 9.99597 243.054 10.476C244.194 10.956 245.178 11.64 246.006 12.528C246.834 13.416 247.47 14.46 247.914 15.66C248.358 16.86 248.556 18.18 248.508 19.62L248.472 21.132L233.352 21.132L232.524 17.784L243.108 17.784L242.46 18.504L242.46 17.8199C242.46 17.292 242.322 16.83 242.046 16.434C241.77 16.038 241.404 15.732 240.948 15.516C240.492 15.3 239.976 15.192 239.4 15.192C238.584 15.192 237.906 15.3539 237.366 15.678C236.826 16.002 236.412 16.464 236.124 17.064C235.836 17.6639 235.692 18.384 235.692 19.224C235.692 20.184 235.89 21.012 236.286 21.7079C236.682 22.404 237.27 22.944 238.05 23.3279C238.83 23.712 239.784 23.904 240.912 23.904C241.656 23.904 242.31 23.808 242.874 23.616C243.438 23.424 244.044 23.088 244.692 22.608L247.788 26.964C246.948 27.636 246.102 28.17 245.25 28.566C244.398 28.962 243.552 29.25 242.712 29.43C241.872 29.61 241.02 29.7 240.156 29.7L240.156 29.7ZM217.584 29.34L217.584 5.29199L224.28 5.29199L224.28 29.34L217.584 29.34ZM214.416 15.84L214.416 10.152L227.628 10.152L227.628 15.84L214.416 15.84ZM204.372 29.34L204.372 10.152L211.068 10.152L211.068 29.34L204.372 29.34ZM207.72 6.51599C206.496 6.51599 205.548 6.23395 204.876 5.66998C204.204 5.10596 203.868 4.30798 203.868 3.27597C203.868 2.31598 204.21 1.52997 204.894 0.917969C205.578 0.305969 206.52 -3.05176e-05 207.72 -3.05176e-05C208.92 -3.05176e-05 209.862 0.281982 210.546 0.845978C211.23 1.40997 211.572 2.21997 211.572 3.27597C211.572 4.23596 211.224 5.01599 210.528 5.61597C209.832 6.21594 208.896 6.51599 207.72 6.51599L207.72 6.51599ZM192.636 29.7C190.644 29.7 188.892 29.3879 187.38 28.764C185.868 28.14 184.692 27.3359 183.852 26.352L187.776 22.968C188.544 23.6639 189.414 24.18 190.386 24.516C191.358 24.852 192.216 25.02 192.96 25.02C193.224 25.02 193.464 24.996 193.68 24.948C193.896 24.9 194.07 24.822 194.202 24.714C194.334 24.606 194.442 24.486 194.526 24.3539C194.61 24.222 194.652 24.072 194.652 23.904C194.652 23.496 194.448 23.184 194.04 22.968C193.824 22.8719 193.47 22.746 192.978 22.59C192.486 22.434 191.832 22.2599 191.016 22.068C190.008 21.804 189.108 21.486 188.316 21.114C187.524 20.7419 186.852 20.304 186.3 19.8C185.772 19.296 185.358 18.714 185.058 18.054C184.758 17.394 184.608 16.668 184.608 15.876C184.608 14.916 184.824 14.064 185.256 13.3199C185.688 12.576 186.288 11.934 187.056 11.394C187.824 10.8539 188.688 10.446 189.648 10.17C190.608 9.89398 191.592 9.75598 192.6 9.75598C193.728 9.75598 194.79 9.87 195.786 10.098C196.782 10.326 197.718 10.65 198.594 11.0699C199.47 11.49 200.256 12 200.952 12.6L197.496 16.416C197.088 16.056 196.614 15.72 196.074 15.408C195.534 15.0959 194.976 14.838 194.4 14.634C193.824 14.43 193.284 14.3279 192.78 14.3279C192.468 14.3279 192.204 14.352 191.988 14.4C191.772 14.448 191.592 14.52 191.448 14.616C191.304 14.712 191.196 14.832 191.124 14.976C191.052 15.12 191.016 15.2759 191.016 15.444C191.016 15.66 191.076 15.864 191.196 16.056C191.316 16.248 191.508 16.404 191.772 16.524C191.988 16.644 192.354 16.7939 192.87 16.974C193.386 17.154 194.136 17.376 195.12 17.64C196.224 17.952 197.184 18.312 198 18.72C198.816 19.128 199.476 19.5959 199.98 20.124C200.34 20.532 200.616 20.982 200.808 21.474C201 21.9659 201.096 22.512 201.096 23.1119C201.096 24.384 200.73 25.5179 199.998 26.514C199.266 27.5099 198.264 28.29 196.992 28.8539C195.72 29.418 194.268 29.7 192.636 29.7L192.636 29.7ZM174.132 29.736C173.244 29.736 172.404 29.6219 171.612 29.394C170.82 29.166 170.112 28.8539 169.488 28.4579C168.864 28.062 168.348 27.6 167.94 27.072C167.532 26.5439 167.268 25.98 167.148 25.3799L168.516 25.02L168.048 29.304L161.928 29.304L161.928 2.69998L168.66 2.69998L168.66 14.796L167.22 14.3279C167.364 13.68 167.646 13.08 168.066 12.528C168.486 11.976 168.996 11.49 169.596 11.0699C170.196 10.65 170.868 10.326 171.612 10.098C172.356 9.87 173.136 9.75598 173.952 9.75598C175.608 9.75598 177.066 10.1819 178.326 11.034C179.586 11.886 180.582 13.068 181.314 14.58C182.046 16.092 182.412 17.8199 182.412 19.764C182.412 21.7079 182.052 23.43 181.332 24.93C180.612 26.43 179.628 27.606 178.38 28.4579C177.132 29.31 175.716 29.736 174.132 29.736L174.132 29.736ZM172.188 24.228C172.956 24.228 173.61 24.042 174.15 23.67C174.69 23.298 175.11 22.782 175.41 22.1219C175.71 21.462 175.86 20.676 175.86 19.764C175.86 18.8279 175.716 18.024 175.428 17.352C175.14 16.68 174.72 16.17 174.168 15.822C173.616 15.474 172.956 15.3 172.188 15.3C171.42 15.3 170.76 15.474 170.208 15.822C169.656 16.17 169.23 16.68 168.93 17.352C168.63 18.024 168.48 18.8279 168.48 19.764C168.48 20.676 168.63 21.462 168.93 22.1219C169.23 22.782 169.656 23.298 170.208 23.67C170.76 24.042 171.42 24.228 172.188 24.228L172.188 24.228ZM150.084 29.7C147.9 29.7 146.016 29.274 144.432 28.422C142.848 27.5699 141.624 26.394 140.76 24.894C139.896 23.394 139.464 21.684 139.464 19.764C139.464 18.324 139.704 16.9919 140.184 15.7679C140.664 14.5439 141.336 13.482 142.2 12.582C143.064 11.6819 144.09 10.986 145.278 10.494C146.466 10.002 147.768 9.75598 149.184 9.75598C150.576 9.75598 151.842 9.99597 152.982 10.476C154.122 10.956 155.106 11.64 155.934 12.528C156.762 13.416 157.398 14.46 157.842 15.66C158.286 16.86 158.484 18.18 158.436 19.62L158.4 21.132L143.28 21.132L142.452 17.784L153.036 17.784L152.388 18.504L152.388 17.8199C152.388 17.292 152.25 16.83 151.974 16.434C151.698 16.038 151.332 15.732 150.876 15.516C150.42 15.3 149.904 15.192 149.328 15.192C148.512 15.192 147.834 15.3539 147.294 15.678C146.754 16.002 146.34 16.464 146.052 17.064C145.764 17.6639 145.62 18.384 145.62 19.224C145.62 20.184 145.818 21.012 146.214 21.7079C146.61 22.404 147.198 22.944 147.978 23.3279C148.758 23.712 149.712 23.904 150.84 23.904C151.584 23.904 152.238 23.808 152.802 23.616C153.366 23.424 153.972 23.088 154.62 22.608L157.716 26.964C156.876 27.636 156.03 28.17 155.178 28.566C154.326 28.962 153.48 29.25 152.64 29.43C151.8 29.61 150.948 29.7 150.084 29.7L150.084 29.7ZM109.8 29.34L102.492 4.13998L109.656 4.13998L112.932 16.236C113.1 16.9319 113.25 17.61 113.382 18.27C113.514 18.93 113.616 19.542 113.688 20.106C113.76 20.67 113.82 21.192 113.868 21.672C113.916 22.152 113.952 22.548 113.976 22.86L113.292 22.86C113.364 22.14 113.43 21.438 113.49 20.754C113.55 20.0699 113.652 19.3619 113.796 18.6299C113.94 17.8979 114.156 17.1 114.444 16.236L117.828 6.948L123.336 6.948L126.684 16.236C127.02 17.1479 127.278 17.982 127.458 18.738C127.638 19.494 127.776 20.2079 127.872 20.8799C127.968 21.5519 128.04 22.2 128.088 22.824L127.476 22.86C127.5 22.5 127.512 22.14 127.512 21.78C127.512 21.42 127.524 21.042 127.548 20.646C127.572 20.25 127.608 19.824 127.656 19.368C127.704 18.912 127.776 18.426 127.872 17.91C127.968 17.394 128.088 16.836 128.232 16.236L131.508 4.13998L138.456 4.13998L131.112 29.34L125.568 29.34L119.88 15.408L120.744 15.408L115.632 29.34L109.8 29.34ZM96.408 21.564C95.52 21.564 94.704 21.348 93.96 20.916C93.216 20.4839 92.622 19.896 92.178 19.152C91.734 18.408 91.512 17.592 91.512 16.704C91.512 15.792 91.728 14.964 92.16 14.22C92.592 13.476 93.18 12.882 93.924 12.438C94.668 11.994 95.496 11.772 96.408 11.772C97.32 11.772 98.148 11.994 98.892 12.438C99.636 12.882 100.23 13.476 100.674 14.22C101.118 14.964 101.34 15.792 101.34 16.704C101.34 17.592 101.118 18.408 100.674 19.152C100.23 19.896 99.636 20.4839 98.892 20.916C98.148 21.348 97.32 21.564 96.408 21.564L96.408 21.564ZM75.492 29.34L75.492 10.152L81.756 10.152L82.116 16.452L80.712 15.3719C81.024 14.316 81.51 13.3619 82.17 12.5099C82.83 11.658 83.628 10.986 84.564 10.494C85.5 10.002 86.484 9.75598 87.516 9.75598C87.948 9.75598 88.356 9.78595 88.74 9.84595C89.124 9.90594 89.484 9.98395 89.82 10.08L87.984 17.496C87.72 17.3279 87.348 17.178 86.868 17.046C86.388 16.9139 85.872 16.848 85.32 16.848C84.84 16.848 84.408 16.926 84.024 17.082C83.64 17.238 83.316 17.46 83.052 17.748C82.788 18.0359 82.584 18.378 82.44 18.774C82.296 19.17 82.224 19.632 82.224 20.16L82.224 29.34L75.492 29.34ZM58.284 29.736C56.844 29.736 55.62 29.43 54.612 28.818C53.604 28.206 52.836 27.324 52.308 26.172C51.78 25.02 51.516 23.628 51.516 21.996L51.516 10.152L58.212 10.152L58.212 21.312C58.212 21.936 58.32 22.464 58.536 22.896C58.752 23.3279 59.052 23.658 59.436 23.886C59.82 24.114 60.288 24.228 60.84 24.228C61.272 24.228 61.662 24.168 62.01 24.048C62.358 23.928 62.652 23.7419 62.892 23.49C63.132 23.238 63.324 22.95 63.468 22.626C63.612 22.3019 63.684 21.948 63.684 21.564L63.684 10.152L70.38 10.152L70.38 29.34L64.188 29.34L63.828 25.452L65.088 25.02C64.824 25.908 64.356 26.712 63.684 27.4319C63.012 28.152 62.208 28.7159 61.272 29.124C60.336 29.532 59.34 29.736 58.284 29.736L58.284 29.736ZM37.584 29.7C35.544 29.7 33.72 29.2679 32.112 28.404C30.504 27.54 29.244 26.364 28.332 24.876C27.42 23.3879 26.964 21.672 26.964 19.728C26.964 17.784 27.42 16.068 28.332 14.58C29.244 13.092 30.504 11.916 32.112 11.0519C33.72 10.188 35.544 9.75598 37.584 9.75598C39.624 9.75598 41.442 10.188 43.038 11.0519C44.634 11.916 45.888 13.092 46.8 14.58C47.712 16.068 48.168 17.784 48.168 19.728C48.168 21.672 47.712 23.3879 46.8 24.876C45.888 26.364 44.634 27.54 43.038 28.404C41.442 29.2679 39.624 29.7 37.584 29.7L37.584 29.7ZM37.584 24.048C38.304 24.048 38.958 23.8619 39.546 23.49C40.134 23.118 40.59 22.602 40.914 21.942C41.238 21.282 41.4 20.5439 41.4 19.728C41.4 18.864 41.238 18.108 40.914 17.46C40.59 16.812 40.134 16.3019 39.546 15.93C38.958 15.558 38.304 15.3719 37.584 15.3719C36.84 15.3719 36.18 15.558 35.604 15.93C35.028 16.3019 34.572 16.818 34.236 17.478C33.9 18.1379 33.732 18.8879 33.732 19.728C33.732 20.5439 33.9 21.282 34.236 21.942C34.572 22.602 35.028 23.118 35.604 23.49C36.18 23.8619 36.84 24.048 37.584 24.048L37.584 24.048ZM9.93604 29.34L9.93604 16.776L10.188 18.54L3.05176e-05 4.13998L7.99203 4.13998L15.768 15.3L11.556 15.192L18.576 4.13998L26.352 4.13998L16.596 18.936L17.136 16.488L17.136 29.34L9.93604 29.34Z"
            id="Your•Website"
            fill="#FE8C8C"
            stroke="none"
          />
        </svg>
      </a>

      <label for="toggle" class="relative inline-flex cursor-pointer items-center">
        <input type="checkbox" id="toggle" class="peer sr-only" />
        <div class="peer h-6 w-11 rounded-full bg-zinc-200 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-zinc-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-rose-500 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-zinc-300 dark:border-zinc-400 dark:bg-zinc-300 dark:bg-zinc-500 dark:peer-focus:ring-rose-300"></div>
      </label>

      <nav class="flex space-x-6">
        <a href="#" class="px-2 py-1 rounded-lg hover:bg-rose-100 whitespace-nowrap font-medium text-zinc-600 hover:text-rose-400 dark:text-slate-500"> About Us </a>

        <a href="#" class="px-2 py-1 rounded-lg hover:bg-rose-100 whitespace-nowrap font-medium text-zinc-600 hover:text-rose-400 dark:text-slate-500"> Contact Us </a>

        <a href="#" class="px-2 py-1 rounded-lg hover:bg-rose-100 whitespace-nowrap font-medium text-zinc-600 hover:text-rose-400 dark:text-slate-500"> Terms and Conditions </a>

        <a href="#" class="px-2 py-1 rounded-lg hover:bg-rose-100 whitespace-nowrap font-medium text-zinc-600 hover:text-rose-400 dark:text-slate-500"> Privacy Policy </a>
      </nav>
    </div>
  </footer>
</div>

Tailwind CSS Basic Footer Component

[email protected] 413 views

How to install and add to your project?

Step 1: Include Scripts and Styling CDN inside the head tag

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

Step 2: Copy the Tailwind CSS Basic Footer Component component code above as you need it

Step 3: Preview the component in your browser 🚀

Step 4: For production release make sure to use the official Tailwind CSS Installation

You are done 🎉

Credits or Attribution

If you enjoy using our components, please do give us (PostSrc) credit in your project footer section or about page. Copy the HTML below for attribution.

<a href="https://postsrc.com/components" target="_blank" rel="noopener" title="PostSrc Components - Collection of Tailwind CSS components for everyone to use"><img style="width: auto; height: 46px;" src="https://postsrc.com/img/attr.png" alt="PostSrc logo"></a>

Other Tailwind CSS Footer Components

More Components

Sponsors 👑

+ Add Yours
)