Simple centered footer

Use this example for simple footer with horizontal sitemap links, brand logo, and social media accounts.This example can also be used as a tailwind sticky footer.

This tailwind example is contributed by Pagedone, on 02-May-2024. Component is made with Tailwind v3.4. It is responsive.

Footer
Pagedone profile image
Author Pagedone
Tailwind v3.4 Responsive 3.6k 11

Related Examples

  • Minimalist iOS 26 Foote
    Minimalist iOS 26 Foote

    Minimalist iOS 26 Foote

    Omer fils ELENGA Omer fils ELENGA
    526
  • Footer blue theme
    Footer blue theme
    Leon Bachmann Leon Bachmann
    14.3k
  • Multi-column Footer
    Multi-column Footer

    A clean, modern, and fully responsive corporate footer built with Tailwind CSS. It features a multi-column layout, mobile-friendly accordion navigation, company information, contact details, social media links, subtle hover animations, and a smooth scroll-to-top button. Designed with a professional aesthetic, this footer is perfect for corporate, SaaS, startup, agency, legal, finance, and business websites.

    JUGENDRA GANGWAR JUGENDRA GANGWAR
    261
  • Centered footer with CTA
    Centered footer with CTA

    Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

    Pagedone Pagedone
    2.8k
  • Animated Website
    Animated Website

    Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

    Nicole Shalom Nicole Shalom
    1.8k
  • Subscribe to our newsletter section
    Subscribe to our newsletter section
    Conan Hilton Conan Hilton
    12k
  • Footer
    Footer
    Abdul Baset Bappy Abdul Baset Bappy
    1.1k
  • Crafting a Responsive Footer with TypeScript, and Tailwind CSS
    Crafting a Responsive Footer with TypeScript, and Tailwind CSS

    This is a well-structured and comprehensive footer section that uses Tailwind CSS for styling and layout. Here’s a brief explanation of what each part does: Footer Container (<footer class="bg-gray-800">): The footer is wrapped in a <footer> element with a dark background using the bg-gray-800 class. The aria-labelledby="footer-heading" attribute is used for accessibility, linking the <footer> to the invisible heading (<h2 id="footer-heading" class="sr-only">Footer</h2>). Main Content Area: The content inside the footer is centered and spaced using utility classes like max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8. Footer Sections: The footer is divided into several sections using grid layouts (xl:grid xl:grid-cols-5 xl:gap-8), which organize content into columns. Each section (Solutions, Support, Company, Legal) contains a heading with a list of links. These links are styled with Tailwind classes for consistent spacing and hover effects (text-base text-gray-300 hover:text-white). Language & Currency Selector: This section provides dropdowns for selecting language and currency. Tailwind's form utilities (@tailwindcss/forms plugin) are used to style the select elements. Newsletter Subscription Form: A subscription form is provided with an email input and a submit button. The form is styled to be responsive, with focus states for accessibility (focus:ring-2 focus:ring-offset-2). Social Media Links: Social media icons (Facebook, Instagram, etc.) are included, each wrapped in a link with hover effects. Icons are created using SVGs, which are scalable and look sharp at any size. Final Section: The footer concludes with another grid layout, ensuring spacing and alignment for different screen sizes. Customization Tips: Colors: You can easily customize the colors using Tailwind's utility classes (e.g., bg-gray-800, text-gray-400) to match your design. Icons: Replace SVGs with the appropriate icons for your needs. You might use a different icon set or add more icons. Responsive Design: Tailwind's utility classes like sm:, md:, lg:, xl: ensure that the footer is responsive across devices. Adjust the layout or padding if needed. Additional Considerations: SEO: Ensure the links in the footer point to meaningful pages to improve SEO. Accessibility: Consider adding aria-labels to the form elements and social media links to enhance accessibility further. This footer is ready to be integrated into a Tailwind CSS-powered project, offering both aesthetic appeal and functional utility.

    zobaidul kaziex zobaidul kaziex
    3.6k
  • Get it on Google play / App store section
    Get it on Google play / App store section
    Rajesh kulkarni Rajesh kulkarni
    11.2k
  • Home page
    Home page

    Home page для ПО, страница для входа в приложение.

    Alla Telegina Alla Telegina
    1.8k
  • Simple tailwind footer
    Simple tailwind footer

    Simple tailwind footer with newsletter

    Laurits Laurits
    11.1k
  • admin panel UI
    admin panel UI

    Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

    Lekhraj Ghimire Lekhraj Ghimire
    2.4k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile
View all tags

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.