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

Simple Footer

This tailwind example is contributed by $@(\/)(\/)Y, 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

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

Author $@(\/)(\/)Y

2.3k

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

2 years ago

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

7 months ago

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

5 months ago

617
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.5k
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

7 months ago

803
Simple Footer 2

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

10 months ago

1.7k
Default Tailwind Footer
Use this example of a footer section divided in five columns with brand logo, desciption, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

2.7k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.3k
Footer with social icons

Author:
Mr Robot

3 years ago

15.3k
Footer with images

Author:
Mr Robot

2 years ago

9.3k
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

1 year ago

1.8k
Buttons with Icon

Author:
_Amar_

3 years ago

15.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components