Simple Footer 2

This tailwind example is contributed by $@(\/)(\/)¥, on 14-Nov-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Masonry, Image grid,Email campaign

Footer Image gallery Newsletter

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

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

Tailwind v3.4 2.5k 5

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">
                        <a href="javascript:;"
                            class="w-9 h-9 rounded-full border border-gray-700 flex justify-center items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                                fill="none">
                                <path id="Vector"
                                    d="M11.3214 8.93666L16.4919 3.05566H15.2667L10.7772 8.16205L7.1914 3.05566H3.05566L8.47803 10.7774L3.05566 16.9446H4.28097L9.022 11.552L12.8088 16.9446H16.9446L11.3211 8.93666H11.3214ZM9.64322 10.8455L9.09382 10.0765L4.72246 3.95821H6.60445L10.1322 8.8959L10.6816 9.66481L15.2672 16.083H13.3852L9.64322 10.8458V10.8455Z"
                                    fill="white" />
                            </svg>

</a>
                        <a href="javascript:;"
                            class="w-9 h-9 rounded-full border border-gray-700 flex justify-center items-center">
                            <svg class="w-[1.25rem] h-[1.125rem] text-white" viewBox="0 0 15 15" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M4.70975 7.93663C4.70975 6.65824 5.76102 5.62163 7.0582 5.62163C8.35537 5.62163 9.40721 6.65824 9.40721 7.93663C9.40721 9.21502 8.35537 10.2516 7.0582 10.2516C5.76102 10.2516 4.70975 9.21502 4.70975 7.93663ZM3.43991 7.93663C3.43991 9.90608 5.05982 11.5025 7.0582 11.5025C9.05658 11.5025 10.6765 9.90608 10.6765 7.93663C10.6765 5.96719 9.05658 4.37074 7.0582 4.37074C5.05982 4.37074 3.43991 5.96719 3.43991 7.93663ZM9.97414 4.22935C9.97408 4.39417 10.0236 4.55531 10.1165 4.69239C10.2093 4.82946 10.3413 4.93633 10.4958 4.99946C10.6503 5.06259 10.8203 5.07916 10.9844 5.04707C11.1484 5.01498 11.2991 4.93568 11.4174 4.81918C11.5357 4.70268 11.6163 4.55423 11.649 4.39259C11.6817 4.23095 11.665 4.06339 11.6011 3.91109C11.5371 3.7588 11.4288 3.6286 11.2898 3.53698C11.1508 3.44536 10.9873 3.39642 10.8201 3.39635H10.8197C10.5955 3.39646 10.3806 3.48424 10.222 3.64043C10.0635 3.79661 9.97434 4.00843 9.97414 4.22935ZM4.21142 13.5892C3.52442 13.5584 3.15101 13.4456 2.90286 13.3504C2.57387 13.2241 2.33914 13.0738 2.09235 12.8309C1.84555 12.588 1.69278 12.3569 1.56527 12.0327C1.46854 11.7882 1.3541 11.4201 1.32287 10.7431C1.28871 10.0111 1.28189 9.79119 1.28189 7.93669C1.28189 6.08219 1.28927 5.86291 1.32287 5.1303C1.35416 4.45324 1.46944 4.08585 1.56527 3.84069C1.69335 3.51647 1.84589 3.28513 2.09235 3.04191C2.3388 2.79869 2.57331 2.64813 2.90286 2.52247C3.1509 2.42713 3.52442 2.31435 4.21142 2.28358C4.95417 2.24991 5.17729 2.24319 7.0582 2.24319C8.9391 2.24319 9.16244 2.25047 9.90582 2.28358C10.5928 2.31441 10.9656 2.42802 11.2144 2.52247C11.5434 2.64813 11.7781 2.79902 12.0249 3.04191C12.2717 3.2848 12.4239 3.51647 12.552 3.84069C12.6487 4.08513 12.7631 4.45324 12.7944 5.1303C12.8285 5.86291 12.8354 6.08219 12.8354 7.93669C12.8354 9.79119 12.8285 10.0105 12.7944 10.7431C12.7631 11.4201 12.6481 11.7881 12.552 12.0327C12.4239 12.3569 12.2714 12.5882 12.0249 12.8309C11.7784 13.0736 11.5434 13.2241 11.2144 13.3504C10.9663 13.4457 10.5928 13.5585 9.90582 13.5892C9.16306 13.6229 8.93994 13.6296 7.0582 13.6296C5.17645 13.6296 4.95395 13.6229 4.21142 13.5892ZM4.15307 1.03424C3.40294 1.06791 2.89035 1.18513 2.4427 1.3568C1.9791 1.53408 1.58663 1.77191 1.19446 2.1578C0.802277 2.54369 0.56157 2.93108 0.381687 3.38797C0.207498 3.82941 0.0885535 4.3343 0.0543922 5.07358C0.0196672 5.81402 0.0117188 6.05074 0.0117188 7.93663C0.0117188 9.82252 0.0196672 10.0592 0.0543922 10.7997C0.0885535 11.539 0.207498 12.0439 0.381687 12.4853C0.56157 12.9419 0.802334 13.3297 1.19446 13.7155C1.58658 14.1012 1.9791 14.3387 2.4427 14.5165C2.89119 14.6881 3.40294 14.8054 4.15307 14.839C4.90479 14.8727 5.1446 14.8811 7.0582 14.8811C8.9718 14.8811 9.212 14.8732 9.96332 14.839C10.7135 14.8054 11.2258 14.6881 11.6737 14.5165C12.137 14.3387 12.5298 14.1014 12.9219 13.7155C13.3141 13.3296 13.5543 12.9419 13.7347 12.4853C13.9089 12.0439 14.0284 11.539 14.062 10.7997C14.0962 10.0587 14.1041 9.82252 14.1041 7.93663C14.1041 6.05074 14.0962 5.81402 14.062 5.07358C14.0278 4.33424 13.9089 3.82913 13.7347 3.38797C13.5543 2.93135 13.3135 2.5443 12.9219 2.1578C12.5304 1.7713 12.137 1.53408 11.6743 1.3568C11.2258 1.18513 10.7135 1.06735 9.96388 1.03424C9.21256 1.00058 8.97236 0.992188 7.05876 0.992188C5.14516 0.992188 4.90479 1.00002 4.15307 1.03424Z"
                                    fill="currentColor" />
                            </svg>

</a>
                        <a href="javascript:;"
                            class="w-9 h-9 rounded-full border border-gray-700 flex justify-center items-center">
                            <svg class="w-[1rem] h-[1rem] text-white" viewBox="0 0 13 12" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M2.8794 11.5527V3.86835H0.318893V11.5527H2.87967H2.8794ZM1.59968 2.81936C2.4924 2.81936 3.04817 2.2293 3.04817 1.49188C3.03146 0.737661 2.4924 0.164062 1.61666 0.164062C0.74032 0.164062 0.167969 0.737661 0.167969 1.49181C0.167969 2.22923 0.723543 2.8193 1.5829 2.8193H1.59948L1.59968 2.81936ZM4.29668 11.5527H6.85698V7.26187C6.85698 7.03251 6.87369 6.80255 6.94134 6.63873C7.12635 6.17968 7.54764 5.70449 8.25514 5.70449C9.18141 5.70449 9.55217 6.4091 9.55217 7.44222V11.5527H12.1124V7.14672C12.1124 4.78652 10.8494 3.68819 9.16483 3.68819C7.78372 3.68819 7.17715 4.45822 6.84014 4.98267H6.85718V3.86862H4.29681C4.33023 4.5895 4.29661 11.553 4.29661 11.553L4.29668 11.5527Z"
                                    fill="currentColor" />
                            </svg>

</a>
                        <a href="javascript:;"
                            class="w-9 h-9 rounded-full border border-gray-700 flex justify-center items-center">
                            <svg class="w-[1.25rem] h-[0.875rem] text-white" viewBox="0 0 16 12" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M13.9346 1.13529C14.5684 1.30645 15.0665 1.80588 15.2349 2.43896C15.5413 3.58788 15.5413 5.98654 15.5413 5.98654C15.5413 5.98654 15.5413 8.3852 15.2349 9.53412C15.0642 10.1695 14.5661 10.669 13.9346 10.8378C12.7886 11.1449 8.19058 11.1449 8.19058 11.1449C8.19058 11.1449 3.59491 11.1449 2.44657 10.8378C1.81277 10.6666 1.31461 10.1672 1.14622 9.53412C0.839844 8.3852 0.839844 5.98654 0.839844 5.98654C0.839844 5.98654 0.839844 3.58788 1.14622 2.43896C1.31695 1.80353 1.81511 1.30411 2.44657 1.13529C3.59491 0.828125 8.19058 0.828125 8.19058 0.828125C8.19058 0.828125 12.7886 0.828125 13.9346 1.13529ZM10.541 5.98654L6.72178 8.19762V3.77545L10.541 5.98654Z"
                                    fill="currentColor" />
                            </svg>

</a>
                    </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

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

1 year ago

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

Hamza Atig

1 year ago

1.3k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

970
Creative Agency Footer with Editorial Layout, Newsletter & Social Links
agency footer built with pure HTML and Tailwind CSS. Featuring an editorial-inspired layout, newsletter subscription, multi-column navigation, contact information, and social media links. Perfect for creative agencies, design studios, architecture firms, portfolios, branding agencies, freelancers, and modern business websites.

JUGENDRA GANGWAR

3 months ago

202
Newsletter form with SVG gradient background

Erik Hyatt

3 years ago

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

Akram Khan

2 years ago

2.7k
Newsletter form

Leon Bachmann

3 years ago

10.8k
Newsletter Footer
Fully Responsive newsletter footer page

AKASH GANDHAR

2 years ago

2.4k
side bar
html css

Hacker Development

1 year ago

1.6k
Bento grids

Maxim

2 years ago

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

Ayyamperumal S

1 year ago

2.7k
Simple Footer

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

2 years ago

3k