Home
Henrik R.
Big footer with lots of links

Big footer with lots of links

This tailwind example is contributed by Henrik R., on 10-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Footer

Author Henrik R.

3.6k

Fork Fullscreen

<footer class="bg-[#1A1D2B]">
    <div class="container mx-auto p-0 md:p-8 xl:px-0">
        <div class="mx-auto max-w-7xl px-6 pb-10 pt-16">
            <div class="xl:grid xl:grid-cols-3 xl:gap-8">
                <div class="space-y-4">
                    <div>
                        <a href="/">
                            <div class="flex items-center space-x-2 text-2xl font-medium">
                                <span>
                                    <img src="https://www.svgrepo.com/show/452102/slack.svg" alt="AI Logo"
                                        width="64" height="64" class="w-16">
                                </span>
                                <span class="text-white">AIOps</span>
                            </div>

</a>
                    </div>
                    <div class="max-w-md pr-16 text-md text-gray-200">Enhance productivity and
                        efficiency with cutting-edge artificial intelligence solutions for your business operations.
                    </div>
                    <div class="flex space-x-2">
                        <a href="" target="_blank" class="text-gray-200 hover:text-gray-200">
                            <span class="sr-only">Linkedin</span><svg fill="currentColor" viewBox="0 0 24 24"
                                class="h-6 w-6" aria-hidden="true">
                                <path fill-rule="evenodd"
                                    d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </a>
                        <a href="" target="_blank" class="text-gray-200 hover:text-gray-200">
                            <span class="sr-only">Twitter</span><svg fill="currentColor" viewBox="0 0 24 24"
                                class="h-6 w-6" aria-hidden="true">
                                <path
                                    d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84">
                                </path>
                            </svg>
                        </a>
                    </div>
                </div>
                <div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
                    <div class="md:grid md:grid-cols-2 md:gap-8">
                        <div>
                            <h3 class="text-md font-semibold leading-6 text-white">Our Solutions</h3>
                            <ul role="list" class="mt-6 space-y-4">
                                <li>
                                    <a href="/aiplatform"
                                        class="text-md leading-6 text-gray-300 hover:text-gray-50">AI Platform
                                    </a>
                                </li>
                                <li>
                                    <a href="/aialgorithms"
                                        class="text-md leading-6 text-gray-300 hover:text-gray-50">AI Algorithms
                                    </a>
                                </li>
                                <li>
                                    <a href="/industryapplications"
                                        class="text-md leading-6 text-gray-300 hover:text-gray-50">Industry
                                        Applications
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="mt-10 md:mt-0">
                            <h3 class="text-md font-semibold leading-6 text-white">Use Cases</h3>
                            <ul role="list" class="mt-6 space-y-4">
                                <li>
                                    <a href="/predictiveanalysis"
                                        class="text-md leading-6 text-gray-300 hover:text-gray-50">Predictive
                                        Analysis
                                    </a>
                                </li>
                                <li>
                                    <a href="/customerexperience"
                                        class="text-md leading-6 text-gray-300 hover:text-gray-50">Customer
                                        Experience
                                    </a>
                                </li>
                                <li>
                                    <a href="/automation"
                                        class="text-md leading-6 text-gray-300 hover:text-gray-50">Automation
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="md:grid md:grid-cols-2 md:gap-8">
                        <div>
                            <h3 class="text-md font-semibold leading-6 text-white">Resources</h3>
                            <ul role="list" class="mt-6 space-y-4">
                                <li>
                                    <a href="/pricing"
                                        class="text-md leading-6 text-gray-300 hover:text-gray-50">Pricing
                                    </a>
                                </li>
                                <li>
                                    <a href="/blog" class="text-md leading-6 text-gray-300 hover:text-gray-50">Blog
                                    </a>
                                </li>
                                <li>
                                    <a href="/casestudies"
                                        class="text-md leading-6 text-gray-300 hover:text-gray-50">Case Studies
                                    </a>
                                </li>
                                <li>
                                    <a href="/terms" class="text-md leading-6 text-gray-300 hover:text-gray-50">Terms
                                        of Service
                                    </a>
                                </li>
                                <li>
                                    <a href="/privacy"
                                        class="text-md leading-6 text-gray-300 hover:text-gray-50">Privacy Policy
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="mt-10 md:mt-0">
                            <h3 class="text-md font-semibold leading-6 text-white">Company</h3>
                            <ul role="list" class="mt-6 space-y-4">
                                <li>
                                    <a href="/aboutus"
                                        class="text-md leading-6 text-gray-300 hover:text-gray-50">About Us
                                    </a>
                                </li>
                                <li>
                                    <a href="/careers"
                                        class="text-md leading-6 text-gray-300 hover:text-gray-50">Careers
                                    </a>
                                </li>
                                <li>
                                    <a href="/contactus"
                                        class="text-md leading-6 text-gray-300 hover:text-gray-50">Contact Us
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-16 border-t border-gray-400/30 pt-8 sm:mt-20 lg:mt-24">
                <div class="text-md text-center text-white">
                    Copyright © 2024 . Crafted with
                    <span class="text-gray-50">♥</span> by AI enthusiasts at
                    <a rel="noopener" href="/">AIOps.
                    </a>
                </div>
            </div>
        </div>
    </div>
</footer>

Related Examples

Footer
responsive footer

Author:
Aman kumar

1 year ago

8.2k
Basic footer
Basic footer with subscribe to the newsletter section

Author:
Mr Robot

2 years ago

9.6k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

3 weeks ago

423
Responsive footer

Author:
Lukas Müller

2 years ago

11.2k
Minimal responsive footer

Author:
Mr Robot

2 years ago

11.4k
footer
footer

Author:
Anonymous

6 months ago

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

Author:
Pagedone

1 year ago

1.8k
Tailwind Footer Template
Following is the Tailwind CSS template for creative footer with contact information like address, email, phone number and a newsletter with social icons and site links.

Author:
Pagedone

1 year ago

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

Author:
Yasmin Rodrigues

1 year ago

2.8k
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.

Author:
zobaidul kaziex

1 year ago

2.8k
Sticky bottom footer

Author:
Isabella Kowalski

2 years ago

10.5k
Newsletter with address location
Use this example to first show brand logo card, then show address locations of your company, a newsletter sign-up form.

Author:
Pagedone

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components