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

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

9 months ago

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

7 months ago

758
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
Footer - Htmlwind
Simple centerd footer

Author:
Htmlwind

5 months ago

554
Minimal responsive footer

Author:
Mr Robot

2 years ago

11.4k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

6 months ago

685
Footer version Ousmane
Ce footer est associer a un menu de navigation qui apparait sous le mobile donc avec sa plus besoin de gerer les menus sous le mobile.

Author:
Ousmane CISSE

3 weeks ago

30
Team Section

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

1 year ago

2.1k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

2 years ago

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

Author:
Akram Khan

1 year ago

2.8k
NebulaFooter
Footer

Author:
Juraj

7 months ago

784

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components