Home
Samuel Abera
Simple Footer

Simple Footer

This tailwind example is contributed by Samuel Abera, on 21-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Social media links,

Footer Social media buttons

Author Samuel Abera

835

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

11.8k
Team Section

Author:
Samuel Abera

1 month ago

285
Sign up with google button

Author:
Laurits

1 year ago

34.5k
Responsive footer

Author:
Lukas Müller

1 year ago

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

Author:
Pagedone

7 months ago

1.8k
Big footer with lots of links

Author:
Henrik R.

8 months ago

2k
Simple footer

Author:
threehymns

1 year ago

4.4k
Buttons with Icon

Author:
_Amar_

2 years ago

13.7k
Footer with Member info
Use below footer tailwind template which show number of member who joins the community.

Author:
Pagedone

7 months ago

1.2k
Social links with icons

Author:
Leon Bachmann

1 year ago

10.7k
Dark Footer with newsletter
Use Following Footer for dark vsersion of your website with newsletter, social icons and site links.

Author:
Pagedone

7 months ago

1.2k
Simple centered footer
Use this example for simple footer with horizontal sitemap links, brand logo, and social media accounts.This example can also be used as a tailwind sticky footer.

Author:
Pagedone

7 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components