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

1.8k

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

Responsive footer
Standard footer format

Author:
Emre Yılmaz

4 months ago

1.3k
Sticky bottom footer

Author:
Isabella Kowalski

1 year ago

8.1k
Footer with social media buttons

Author:
Sophia Baker

1 year ago

9.8k
Creative with CTA buttons
Use Below tailwind css footer example with CTA buttons and site links.

Author:
Pagedone

1 month ago

260
Footer with gallery
Use this example if you want to add gallery of images into your footer with brand logo, sitemap links and copyright notice.

Author:
Pagedone

1 month ago

113
Four columns with address location
You can use this Tailwind Footer example to first show address location of your company with brand logo next to sitemap links.

Author:
Pagedone

1 month ago

196
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

1 year ago

8.8k
Four columns with subscribe form
Use this example for four column footer with subscribe form, brand logo, sitemap links and social media accounts.

Author:
Pagedone

1 month ago

247
Basic footer
Simple footer with follow us section

Author:
Anonymous

5 days ago

25
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

1 year ago

11.1k
Responsive Footer
source: https://kitwind.io/products/kometa/components/footers

Author:
Manuela Bianka

1 year ago

11.3k
Footer with social media icons
If you want to use colorful social media icons with address location, sitemap links and newsletter.

Author:
Pagedone

1 month ago

187

Explore components by Tags

Didn't find component you were looking for?

Search from 1400+ componenent