Home
Emre Yılmaz
Responsive footer

Responsive footer

Standard footer format

This tailwind example is contributed by Emre Yılmaz, on 05-Feb-2024. Component is made with Tailwind CSS v3. It is responsive.

Footer

Author Emre Yılmaz

3.3k

Fork Fullscreen

<footer class="border-t border-neutral-700/20 py-10 px-6 bg-white">
  <div class="mx-auto max-w-7xl">
    <div class="flex flex-wrap items-center justify-between gap-10 md:items-start lg:flex-nowrap">
      <div class="w-full sm:w-1/2 lg:w-1/3">
        <a href="/">
          <img alt="Logo" class="h-12" src="https://www.svgrepo.com/show/340614/logo-slack.svg" >
        </a>
        <p class="my-4 text-gray-700">
          Welcome to YourService.io, where innovation meets reliability. Our mission is to empower developers and
          businesses with cutting-edge tools and services to seamlessly build, deploy, and scale robust applications. At
          YourService.io, we prioritize performance, scalability, and security, ensuring that your full-stack
          applications meet the highest standards.
        </p>
      </div>
      <div class="w-full md:w-2/3">
        <div class="grid grid-cols-1 gap-4 text-sm sm:grid-cols-3 sm:gap-10 md:grid-cols-4">
          <div>
            <h3 class="font-bold uppercase text-gray-700">Pages</h3>
            <ul class="mt-4 space-y-2 text-gray-700">
              <li><a href="/#features">Features</a></li>
              <li><a href="/pricing">Pricing</a></li>
              <li><a href="/#faq">FAQ</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold uppercase text-gray-700">Support</h3>
            <ul class="mt-4 space-y-2 text-gray-700">
              <li><a href="mailto:support@yourservice.io">Request Feedback</a></li>
              <li><a href="mailto:support@yourservice.io">Submit Bugs</a></li>
              <li><a href="/contact-us">Contact Us</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold uppercase text-gray-700">Legal</h3>
            <ul class="mt-4 space-y-2 text-gray-700">
              <li><a href="/privacy-policy">Privacy Policy</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold uppercase text-gray-700">Contact</h3>
            <ul class="mt-4 space-y-2 text-gray-700">
              <li class="flex items-center gap-2">
                <a href="mailto:hello@yourservice.io" class="inline-link flex gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="tabler-icon tabler-icon-mail">
                    <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"></path>
                    <path d="M3 7l9 6l9 -6"></path>
                  </svg>hello@yourservice.io
                </a>
              </li>
              <li class="flex w-auto items-center justify-start gap-2">
                <a href="https://twitter.com/yourserviceio" class="inline-link flex gap-2" target="_blank"
                  rel="noreferrer">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="tabler-icon tabler-icon-brand-twitter">
                    <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.753c0 -.249 1.51 -2.772 1.818 -4.013z">
                    </path>
                  </svg>Twitter
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-10 flex justify-between text-sm text-gray-700">
      <div>© 2024 YourService.io All rights reserved.</div>
    </div>
  </div>
</footer>

Related Examples

Basic footer

Author:
Mr Robot

3 years ago

15k
Responsive footer

Author:
Lukas Müller

3 years ago

11.5k
Responsive Website Footer
A modern and clean website footer component with sections for branding, navigation links, social media icons, and copyright text. Designed to be fully responsive and suitable for portfolios, business websites, and web applications.

Author:
Sudip chaudhary

3 months ago

245
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 year ago

1.2k
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

10 months ago

1.1k
footer

Author:
isolde

2 years ago

6.7k
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

1 year ago

2.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

1 year ago

2.8k
Footer

Author:
Abdul Baset Bappy

9 months ago

587
Simple Footer 3

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.8k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

2 months ago

424
Active Beauty Main Page

Author:
Maxim

11 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components