Home
Nikita
Footer - Modern minimal style

Footer - Modern minimal style

clean and uncluttered, following a minimalist approach

This tailwind example is contributed by Nikita, on 24-Jan-2024. Component is made with Tailwind CSS v3. It is responsive.

Footer

Author Nikita

3.4k

Fork Fullscreen

<footer class="">
  <div class="w-full flex-col px-6 pt-20 lg:flex lg:px-10 xl:px-24">
    <div class="text-zinc-600 cursor-default lg:flex lg:flex-row lg:gap-x-16">
      <div>
        <h2 class="text-2xl text-zinc-800 font-mono font-bold">Tech Solutions Co.</h2>
        <ul class="mt-4 text-sm flex flex-col items-start justify-start gap-2">
          <li class="flex flex-row items-start">
            <span><svg aria-hidden="true" viewBox="0 0 1024 1024" class="w-4 h-4 mr-1 mt-1 fill-zinc-600" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M517.802667 612.181333c96.298667-5.12 152.874667-91.946667 181.205333-168.704 45.226667-10.154667 45.226667-71.552 11.349333-97.109333 8.021333-79.744 34.816-194.090667-65.28-198.314667-27.093333-1.109333-43.093333-26.496-145.834666-18.474666-62.592 5.034667-125.056 15.104-163.712 49.450666-39.594667 35.2-37.248 103.296-27.093334 172.458667-34.048 20.48-22.741333 81.834667 22.570667 97.152 28.288 76.629333 90.538667 168.618667 186.794667 163.541333z m114.133333 17.834667c-31.232 58.154667-49.066667 126.848-80.298667 179.669333-4.437333-36.992-3.84-61.269333-4.437333-137.386666h-75.776c4.437333 95.146667 4.437333 95.146667-4.522667 137.386666-22.314667-58.112-44.544-126.805333-75.776-179.626666-133.717333 21.12-231.850667 84.522667-236.245333 264.192h713.386667c-0.085333-179.669333-102.656-243.072-236.373334-264.234667z"></path></svg></span>
            <p class="font-inter">Tech Solutions LLC</p>
          </li>
          <li class="flex flex-row items-start">
            <span>
              <svg aria-hidden="true" viewBox="0 0 1024 1024" class="w-4 h-4 mr-1 mt-1 fill-zinc-600" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M513.2 898.3c-106.4 0-206.6-9.2-282.3-26.1-88.9-19.9-137.4-47.5-132-83.3 3.7-25 19.5-37.2 58.5-51.6 32.6-12 96.8-27.2 148.5-35.6 12-2 21.4 5.4 23.4 17.3 2 12-6.4 21-18.3 23-44.4 7.2-105.8 20.8-132 31.2-29 11.5-26.2 14.8-26.2 17 0 1.8 0.6 8.9 20.4 18.2 19.2 9 47 17.4 80.4 24.5 71.7 15 165.6 23.3 264.7 23.3 99 0 193-8.3 264.7-23.3 33.5-7 61.3-15.5 80.4-24.5 19.9-9.2 16.2-16.2 17-17.8-1-2-3.7-5.9-32.7-17.3-26.2-10.4-82.4-23.7-126.7-30.9-12-2-20.3-10.3-18.4-22.3 2-12 12.4-20.3 24.4-18.4 51.7 8.3 109 24.3 142 35.5 39.3 13.3 54.8 26.6 58.6 51.8 5.4 35.8-43.2 63.5-132.2 83.2-75.6 16.9-175.8 26.1-282.2 26.1z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M510.8 98.2c-134.1 0-239.5 108.4-239.3 242.4 0 4 0.1 8.2 0.3 12.3 1.4 28.6 10.2 57.2 21.4 83.4v0.1l17.9 34.5c1.5 2.9 148.7 277.2 165.1 303.1 9.2 14.5 24.6 20.7 35.5 20.7 10.6 0 27.6-5.7 35.3-20.7 12.3-24 175.8-303.1 175.8-303.1s15.2-26.2 18.7-34.6c13.4-31.7 18.9-49.2 20.3-83.7 0.1-3.6 0.2-9.4 0.2-12.3C761.9 206 644.9 98.2 510.8 98.2z m2.4 368.9c-74.2 0-134.3-60.1-134.3-134.3 0-74.2 60.1-134.3 134.3-134.3 74.2 0 134.3 60.1 134.3 134.3 0 74.2-60.1 134.3-134.3 134.3z"></path></svg>
            </span>
            <p class="font-inter">81807 E. County Road 22, Deer Trail, CO 80105, US</p>
          </li>
        </ul>
      </div>
      <div class="mt-4 md:mt-0 lg:mt-0 flex flex-row flex-wrap lg:flex-nowrap lg:justify-center gap-4 lg:gap-x-24">
        <div class="flex flex-col">
          <h2 class="font-mono font-bold text-zinc-700 text-lg">Contact</h2>
          <ul class="mt-4 grid gap-2 ">
            <li class="flex items-start text-sm">
              <span><svg aria-hidden="true" viewBox="0 0 1024 1024" class="w-4 h-4 mr-1 mt-1 fill-zinc-600" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M702.229 505.85l257.369 208.406V297.444zM599.854 588.749c-25.344 20.528-56.423 30.791-87.498 30.791-31.08 0-62.155-10.264-87.513-30.796l-53.778-43.556L65.846 792.386c2.945 22.208 13.831 41.923 29.75 56.193 7.592 6.805 16.341 12.319 25.868 16.329 10.846 4.566 22.712 7.164 35.207 7.164h711.225c15.817 0 30.632-4.139 43.612-11.24 9.122-4.99 17.365-11.399 24.295-19.056 12.221-13.502 20.449-30.628 22.931-49.554l-305.078-247.04-53.802 43.567zM64.969 297.272v417.157l257.529-208.577z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M419.633 505.853l43.688 35.383c28.408 23.005 69.652 23.005 98.061 0l43.699-35.386 48.574-39.333 303.38-245.664c-9.591-40.379-45.87-70.543-89.139-70.543H156.671c-43.219 0-79.46 30.093-89.103 70.4l303.497 245.807 48.568 39.336z"></path></svg></span><a
                target="javascript:;" class="text-left text-zinc-600 break-words hover:underline hover:text-zinc-800"
                href="javascript:;">contact@techsolutionsco.net</a>
            </li>
          </ul>
        </div>
        <div class="flex flex-col">
          <h2 class="font-mono font-bold text-zinc-700 text-lg">Company</h2>
          <ul class="mt-4 grid gap-2 grid-cols-2">
            <li class="flex items-start text-sm"><span></span><a target="javascript:;"
                class="text-left text-zinc-600 break-words hover:underline hover:text-zinc-800"
                href="/services">Services</a></li>
            <li class="flex items-start text-sm"><span></span><a target="javascript:;"
                class="text-left text-zinc-600 break-words hover:underline hover:text-zinc-800"
                href="">Sitemap</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="w-full mt-10 py-10 border-t border-zinc-200 font-inter text-center text-xs text-zinc-400">Copyright ©
      2024
       Tech Solutions Co. All rights reserved.
    </div>
  </div>
</footer>

Related Examples

Very simple footer

Author:
Arya

2 years ago

11.8k
Responsive Footer
This a full responsive footer made with tailwind

Author:
Pape Toulé Yade

1 year ago

1.7k
Standard footer
You can use this example for five column footer with social media accounts, sitemap links, copyright notice and brand logo.

Author:
Pagedone

11 months ago

1.4k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

9 months ago

2.1k
Subscribe to our newsletter section

Author:
Conan Hilton

2 years ago

10.5k
Responsive eCommerce Footer Component with Tailwind CSS
A modern, fully responsive eCommerce footer component built with Tailwind CSS. It includes multiple sections like company info, account links, help center, categories, social media icons, payment methods, and app download buttons. Optimized for seamless mobile and desktop experiences, making it perfect for any online store or business website.

Author:
SHARIFUL ISLAM

1 month ago

219
subscribe form in Footer
You can use following subscribe form in your tailwind footer section beside contact information such as email address, phone numbers etc and You can also shows community counts.

Author:
Pagedone

11 months ago

1.9k
Newsletter form with Pre-footer CTA
Get started with this example with a CTA section before the footer, a sitemap links, the logo of your brand, a newsletter sign-up form, and the copyright notice.

Author:
Pagedone

11 months ago

1.8k
footer
Footer with contact info, navigation, account links, and social media icons.

Author:
Yasmin Rodrigues

11 months ago

2k
Minimal responsive footer

Author:
Mr Robot

2 years ago

10.9k
Footer

Author:
Ivan K

1 year ago

2.2k
footer

Author:
isolde

1 year ago

5.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components