Home
$@(\/)(\/)¥
Simple Footer

Simple Footer

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

Footer Social media buttons

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

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

2.5k

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

Author:
Sophia Baker

3 years ago

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

11 months ago

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

Author:
Hamza Atig

9 months ago

1.1k
modern portifolio
by salvator

Author:
Baraka Salvator

8 months ago

785
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

8 months ago

826
Footer with social media icons
If you want to use colorful social media icons with address location, sitemap links and newsletter.

Author:
Pagedone

1 year ago

3.5k
Social media icons svg

Author:
Samuel Dawson

3 years ago

21.4k
Minimalist iOS 26 Foote
Minimalist iOS 26 Foote

Author:
Omer fils ELENGA

2 months ago

73
Card with social media share buttons

Author:
Computer guy

2 years ago

9.2k
less is more
less is more by salvator

Author:
Baraka Salvator

7 months ago

1k
beautifull footer
We create a Advance animated footer section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

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

Author:
Pagedone

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components