Simple Footer

This tailwind example is contributed by $@(\/)(\/)¥, on 21-Oct-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Social media links,

Footer Social media buttons

$$@(\/)(\/)¥ profile image$

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

Tailwind v3.4 3k 5

Fork Fullscreen

<div class="flex flex-col gap-4 items-center">
            <ul class="flex lg:gap-6 md:gap-4 md:flex-row flex-col justify-center md:text-xl text-lg md:mt-0 mt-4 md:font-semibold text-gray-300">
                <li class="">
                    <a href="" class="text-gold">Home</a>
                </li>
                <li class="">
                    <a href="" class="hover:text-gold">About</a>
                </li>
                <li class="">
                    <a href="" class="hover:text-gold">Products</a>
                </li>
                <li class="">
                    <a href="" class="hover:text-gold">Gallery</a>
                </li>                
                <li class="">
                    <a href="" class="hover:text-gold">Contact</a>
                </li>
            </ul>

<div>
                <h3 class="text-semibold text-center lg:text-2xl text-xl text-white md:mt-6 ">Where magic and mastery mix, unlocking unimaginable possibilities.</h3>
            </div>
        </div>
        
        <div>
            <ul class="flex gap-2 justify-center md:py-0 py-4 md:flex-col lg:flex-row text-gray-300">
                <li class="">
                    <a href="" class=""><i class="uil uil-instagram lg:text-4xl md:text-3xl text-4xl hover:text-gold"></i></a>
                </li>
                <li class="">
                    <a href="" class=""><i class="uil uil-facebook lg:text-4xl md:text-3xl text-4xl hover:text-gold"></i></a>
                </li>
                <li class="">
                    <a href="" class=""><i class="uil uil-linkedin lg:text-4xl md:text-3xl text-4xl hover:text-gold"></i></a>
                </li>
                <li class="">
                    <a href="" class=""><i class="uil uil-telegram lg:text-4xl md:text-3xl text-4xl hover:text-gold"></i></a>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="md:w-[70%] sm:w-[80%] w-[96%] mx-auto flex md:gap-4 gap-2 items-center justify-center">
        <hr class="w-full md:border-2 border-gold" />
        <h1 class="w-fit sm:text-2xl text-xl font-semibold font-serif text-white">SEVEN</h1>
        <hr class="w-full md:border-2 border-gold" />
    </div>

<div class="flex justify-center items-center py-4 capitalize">
        <h4 class="text-white sm:text-xl font-smibold text-lg">&copy;2024 Designed by Sammy-TG</h4>
    </div>
    </div>
</div>

Related Examples

Footer with social media buttons

Sophia Baker

3 years ago

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

Ayyamperumal S

1 year ago

2.7k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Hamza Atig

1 year ago

1.3k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3.1k
Dark Footer with subscribe form
Use below exmaple of Tailwind CSS Dark Footer with Newsletter Subscription Form with brand logo and site links.

Pagedone

2 years ago

3.5k
Footer
A simple footer with link adjustment for smartphones

Matti

1 year ago

1.9k
Footer (Tailwind UI)

Gopi Yadav

3 years ago

12.9k
subscribe form in Footer
You can use following subscribe form in your tailwind footer section beside contact information such as email address, phone numbers etc and You can also shows community counts.

Pagedone

2 years ago

3.8k
Header and footer with Doodle design with Tailwind CSS
Creative responsive header and footer with doodle patterns built with Tailwind CSS. Features animated SVG doodles, interactive CTA buttons, and Fully customizable components for web projects

Homayoun

10 months ago

405
Nav Bar
Animated Mobile Dropdown menu

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

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

Akram Khan

2 years ago

3.6k
Review popup form with toggle and stars
Review popup form with toggle and stars

Ayman Reifoun

1 year ago

1.3k