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

2.5k

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

Footer (Tailwind UI)

Author:
Gopi Yadav

1 year ago

10.7k
Newsletter Footer
Fully Responsive newsletter footer page

Author:
AKASH GANDHAR

3 months ago

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

Author:
Pagedone

5 months ago

594
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

1 year ago

11.6k
Small Footer

Author:
Abhijit Sen

1 year ago

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

Author:
Yasmin Rodrigues

6 months ago

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

Author:
Pagedone

5 months ago

913
Footer
responsive footer

Author:
Aman kumar

8 months ago

4.6k
Five columns with subscribe button
This example of tailwind css footer can be used if you want five columns in your footer with brand logo, sitemap links, description and social media account with additional subscibe button to connect with your website.

Author:
Pagedone

5 months ago

870
beautifull footer
We create a Advance animated footer section using tailwindcss and custom css

Author:
Akram Khan

3 months ago

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

Author:
Akram Khan

3 months ago

927
Basic footer
Simple footer with follow us section

Author:
Anonymous

4 months ago

475

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent