Footer

Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

This tailwind example is contributed by Abdul Jabbar Al Nahid, on 18-Jul-2025. Component is made with Tailwind CSS v3. It is responsive.

Footer Other Grid

Author Abdul Jabbar Al Nahid

251

Fork Fullscreen

<div class="bg-gray-900 text-white font-sans">
  <div class="max-w-7xl mx-auto flex flex-col lg:flex-row justify-between py-12 px-4 gap-10 items-center lg:items-start">
    
    <div class="flex flex-col justify-start items-center lg:items-start space-y-8 w-full lg:w-[1080px]">
      <a href="/">
        <div class="flex items-center space-x-3 w-full">
          <p class="text-[26px] font-bold text-white">Ab Nahid</p>
        </div>
      </a>

<div class="flex items-center space-x-4">
        <p class="text-[16px] text-gray-400">
          Follow us on
        </p>

<a href="https://www.facebook.com" aria-label="Facebook page">
           <svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M18.75 10C18.75 5.16701 14.833 1.25 10 1.25C5.16701 1.25 1.25 5.16701 1.25 10C1.25 14.3682 4.44922 17.9878 8.63281 18.6441V12.5293H6.41111V10H8.63281V8.07227C8.63281 5.87962 9.93849 4.66797 11.938 4.66797C12.895 4.66797 13.8965 4.83887 13.8965 4.83887V6.99219H12.7925C11.7056 6.99219 11.3672 7.66725 11.3672 8.35938V10H13.7939L13.406 12.5293H11.3672V18.6441C15.5508 17.9878 18.75 14.3682 18.75 10Z"
              fill="#0866FF" />
            <path
              d="M13.406 12.5293L13.7939 10H11.3672V8.35938C11.3672 7.66725 11.7056 6.99219 12.7925 6.99219H13.8965V4.83887C13.8965 4.83887 12.895 4.66797 11.938 4.66797C9.93851 4.66797 8.63283 5.87962 8.63283 8.07227V10H6.41113V12.5293H8.63283V18.6441C9.07886 18.7141 9.53517 18.75 10 18.75C10.4649 18.75 10.9212 18.7141 11.3672 18.6441V12.5293H13.406Z"
              fill="white" />
          </svg>
        </a>

<a href="https://whatsapp.com" aria-label="WhatsApp">
          <img src="https://img.icons8.com/?size=100&id=16713&format=png&color=000000" width="24" height="24" alt="whatsapp" />
        </a>

<a href="https://www.linkedin.com/company" aria-label="LinkedIn">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0)">
              <path
                d="M22.2234 0H1.77187C0.792187 0 0 0.773438 0 1.72969V22.2656C0 23.2219 0.792187 24 1.77187 24H22.2234C23.2031 24 24 23.2219 24 22.2703V1.72969C24 0.773438 23.2031 0 22.2234 0ZM7.12031 20.4516H3.55781V8.99531H7.12031V20.4516ZM5.33906 7.43438C4.19531 7.43438 3.27188 6.51094 3.27188 5.37187C3.27188 4.23281 4.19531 3.30937 5.33906 3.30937C6.47813 3.30937 7.40156 4.23281 7.40156 5.37187C7.40156 6.50625 6.47813 7.43438 5.33906 7.43438ZM20.4516 20.4516H16.8937V14.8828C16.8937 13.5562 16.8703 11.8453 15.0422 11.8453C13.1906 11.8453 12.9094 13.2937 12.9094 14.7891V20.4516H9.35625V8.99531H12.7687V10.5609H12.8156C13.2891 9.66094 14.4516 8.70938 16.1813 8.70938C19.7859 8.70938 20.4516 11.0813 20.4516 14.1656V20.4516Z"
                fill="#0B66C2" />
            </g>
            <defs>
              <clipPath id="clip0">
                <rect width="24" height="24" fill="white" />
              </clipPath>
            </defs>
          </svg>
        </a>
      </div>
    </div>

<div class="flex flex-col items-center lg:items-start space-y-3 lg:w-[200px]">
      <a href="#">
        <p class="text-[15px] font-medium text-gray-300">About</p>
      </a>
      <div class="flex flex-row lg:flex-col items-center lg:items-start lg:space-y-3 gap-3 lg:gap-0">
        <a href="#"><p class="text-sm text-gray-400">About Us</p></a>
        <a href="#"><p class="text-sm text-gray-400">Contact Us</p></a>
        <a href="#"><p class="text-sm text-gray-400">Terms & Conditions</p></a>
      </div>
    </div>
  </div>

<div class="border-t border-gray-700">
    <div class="py-6 px-4 flex flex-col md:flex-row justify-between items-center max-w-7xl mx-auto">
      
      <p class="text-sm text-gray-400 text-center md:text-left">
        © <span id="year"></span> Ab Nahid. All rights reserved.
      </p>

<div class="flex items-center gap-2 mt-2 md:mt-0">
        <p class="text-sm text-gray-400">Developed by</p>
        <a href="https://abnahid.com" target="_blank" rel="noopener noreferrer">
          <img src="https://i.ibb.co/0yx1c4JT/ab-nahid-1920-x-300-px-1.png" width="98" height="20" alt="ab nahid logo" class="h-5" />
        </a>
      </div>
    </div>
  </div>
</div>

Related Examples

Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

6 months ago

1.2k
Table CRUD
CRUD TABLE DESIGN

Author:
Abhiraj

5 months ago

2.1k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

5 months ago

775
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

4 months ago

430
Active Beauty Main Page

Author:
Maxim

4 months ago

649
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

4 months ago

545
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

4 months ago

305
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

4 months ago

694
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

4 months ago

510
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

4 months ago

517
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

4 months ago

322
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

4 months ago

579

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components