Home
Samuel Abera
Simple Footer 2

Simple Footer 2

This tailwind example is contributed by Samuel Abera, on 14-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Masonry, Image grid,Email campaign

Footer Image gallery Newsletter

Author Samuel Abera

681

Fork Fullscreen

<footer class="w-full h-fit lg:absolute md:bottom-0 bg-cyan-900 text-white">
        <div class="w-full mx-aut sm:px-10 px-4 pb-10">
            <div class="grid lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-4 justify-items-start pt-12">
                
                <div class="mt-4">
                    <h1 class="text-4xl font-display mb-8">Get In Touch</h1>
                    <ul class="text-lg text-gray-300 font-semibold flex flex-col gap-3">
                        <li class="flex items-center gap-2"><ion-icon class="text-2xl" name="location"></ion-icon><p>Sarbet, Addis Ababa, Ethiopia</p></li>
                        <li class="flex items-center gap-2"><ion-icon class="text-2xl" name="call"></ion-icon><p>(+251) 913 4***30</p></li>
                        <li class="flex items-center gap-2 sm:text-lg text-base"><ion-icon class="text-2xl" name="mail"></ion-icon><p>sammytg66@gmail.com</p></li>
                    </ul>
                    
                    <div class="flex gap-2 items-center text-2xl text-white mt-6">
                        <div class="flex items-center justify-center p-3 border rounded-full">
                            <ion-icon name="logo-facebook"></ion-icon>
                        </div>
                        <div class="flex items-center justify-center p-3 border rounded-full">
                            <ion-icon name="logo-instagram"></ion-icon>
                        </div>
                        <div class="flex items-center justify-center p-3 border rounded-full">
                            <ion-icon name="logo-whatsapp"></ion-icon>
                        </div>
                        <div class="flex items-center justify-center p-3 border rounded-full">
                            <ion-icon name="logo-tiktok"></ion-icon>
                        </div>
                    </div>
                </div>
                
                <div class="mt-4">
                    <h2 class="text-4xl font-display mb-8">Quick Links</h2>
                    <ul class="mt-4 text-lg font-semibold text-gray-300">
                        <li class="flex items-center text-xl mt-2"><b><ion-icon name="chevron-forward-outline"></ion-icon></b><a href="/">About Us</a></li>
                        <li class="flex items-center text-xl mt-2"><b><ion-icon name="chevron-forward-outline"></ion-icon></b><a href="#">Contact Us</a></li>
                        <li class="flex items-center text-xl mt-2"><b><ion-icon name="chevron-forward-outline"></ion-icon></b><a href="#">Our Services</a></li>
                        <li class="flex items-center text-xl mt-2"><b><ion-icon name="chevron-forward-outline"></ion-icon></b><a href="#">Privecy Policy</a></li>
                        <li class="flex items-center text-xl mt-2"><b><ion-icon name="chevron-forward-outline"></ion-icon></b><a href="#">Terms & Conditions</a></li>
                    </ul>
                </div>
                
                <div class="mt-4">
                    <h2 class="text-4xl font-display mb-8">Photo Gallery</h2>
                    <div class="w-full grid grid-cols-3 place-items-center justify-items-stretch gap-4 mt-6">
                        <img class="rounded-sm outline outline-[4px]" src="https://images.unsplash.com/photo-1655393001768-d946c97d6fd1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxhaSUyMHJlbGF0ZWR8ZW58MHwwfHx8MTczMTUwNzg2NXww&ixlib=rb-4.0.3&q=80&w=1080" alt="Gallery Image" />
                        <img class="rounded-sm outline outline-[4px]" src="https://images.unsplash.com/photo-1616161560417-66d4db5892ec?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwyfHxhaSUyMHJlbGF0ZWR8ZW58MHwwfHx8MTczMTUwNzg2NXww&ixlib=rb-4.0.3&q=80&w=1080" alt="Gallery Image" />
                        <img class="rounded-sm outline outline-[4px]" src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwyfHx0ZWNobm9sb2d5fGVufDB8MHx8fDE3MzE1NjY0MzJ8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Gallery Image" />
                        <img class="rounded-sm outline outline-[4px]" src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw0fHx0ZWNobm9sb2d5fGVufDB8MHx8fDE3MzE1NjY0MzJ8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Gallery Image" />
                        <img class="rounded-sm outline outline-[4px]" src="https://images.unsplash.com/photo-1710993011836-108ba89ebe51?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxhaSUyMHJlbGF0ZWR8ZW58MHwwfHx8MTczMTUwNzg2NXww&ixlib=rb-4.0.3&q=80&w=1080" alt="Gallery Image" />
                        <img class="rounded-sm outline outline-[4px]" src="https://images.unsplash.com/photo-1712002641088-9d76f9080889?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw4fHxhaSUyMHJlbGF0ZWR8ZW58MHwwfHx8MTczMTUwNzg2NXww&ixlib=rb-4.0.3&q=80&w=1080" alt="Gallery Image" />
                    </div>
                </div>
                
                <div class="w-full mt-4 lg:pl-6">
                    <h4 class="text-4xl font-display mb-6">Newsletter</h4>
                    <p class="text-lg text-gray-300 font-semibold mb-7">Sign Up here to get out latest News</p>
                    <div class="w-full flex justify-center items-center bg-white rounded-lg p-2">
                        <input type="text" class="w-full h-full px-4 text-gray-800 lg:text-left placeholder:text-gray-400 focus:outline-none focus:border-gray-500"  placeholder="Your email"/>
                        <button type="submit" class="h-full py-3 px-6 bg-lightOrange transition-all duration-500 shadow-md rounded-xl text-sm text-white font-semibold w-fit hover:bg-fontOrange">SignUp</button>
                    </div>
                </div>
            </div>

<div class="w-full flex sm:flex-row gap-2 flex-col items-center justify-between py-4">
                <div>
                    &copy; 2024 Sammy-TG All Right Reserved
                </div>
                <div class="flex items-center justify-center">
                    <a href="" class="sm:px-4 px-2 border-r border-gray-500">Home</a>
                    <a href="" class="sm:px-4 px-2 border-r border-gray-500">Cookies</a>
                    <a href="" class="sm:px-4 px-2 border-r border-gray-500">Help</a>
                    <a href="" class="sm:px-4 px-2 border-l border-gray-500">FAQs</a>
                </div>
            </div>
        </div>
    </footer>
</div>

Related Examples

Simple Footer 3

Author:
Samuel Abera

3 months ago

723
Simple footer

Author:
Piet Vriend

2 years ago

14.3k
Footer for blog
https://github.com/tailwindow/component

Author:
Prem..

2 years ago

15.4k
image gallery
image gallery [lightbox]

Author:
Anonymous

1 year ago

17k
Creative with CTA buttons
Use Below tailwind css footer example with CTA buttons and site links.

Author:
Pagedone

9 months ago

1.8k
Footer with App buttons
This example can be used if you want add your app buttons of store for download with brand logo, sitemap links and social media accounts.

Author:
Pagedone

9 months ago

1.4k
Sticky bottom footer

Author:
Isabella Kowalski

2 years ago

9.4k
Horizontal footer with dark version
Use this example for simple horizontal layout of footer in dark version with brand logo, sitemap links and social media accounts.

Author:
Pagedone

9 months ago

1.8k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

8 months ago

1.3k
Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Author:
Alok

2 years ago

52.9k
Newsletter form

Author:
Leon Bachmann

2 years ago

9.6k
Basic footer
Simple footer with follow us section

Author:
Anonymous

7 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components