Home
Samuel Abera
Simple Footer 3

Simple Footer 3

This tailwind example is contributed by Samuel Abera, on 17-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Email campaign,Article Card, Blog page card, Article card

Footer Newsletter Blog Card

Author Samuel Abera

Fork Fullscreen

<footer class="w-full h-fit bg-black text-white">
        <div class="w-full mx-auto sm:px-10 px-4 pb-10">
            <div class="grid lg:grid-cols-3 grid-cols-1 gap-4 justify-items-start pt-12">
                
                <div class="mt-4">
                    <div class="flex-1 flex justify-between items-center">
                        <img class="sm:w-[10rem] xs:w-[7rem] z-10" src="https://techakim.com/sam/tg/7268/li/imgs/samlogo2.png" alt="Logo" />
                    </div>
                    <p class="mt-4">A passionate developer, contributed 36 Tailwind components to TailwindFlex, earning
                        second-best
                        contributor status over seven months.</p>
                    
                    <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 hover:bg-blue-500">
                            <ion-icon name="logo-facebook"></ion-icon>
                        </div>
                        <div class="flex items-center justify-center p-3 border rounded-full hover:bg-pink-500">
                            <ion-icon name="logo-instagram"></ion-icon>
                        </div>
                        <div class="flex items-center justify-center p-3 border rounded-full hover:bg-green-500">
                            <ion-icon name="logo-whatsapp"></ion-icon>
                        </div>
                        <div class="flex items-center justify-center p-3 border rounded-full hover:bg-gray-900">
                            <ion-icon name="logo-tiktok"></ion-icon>
                        </div>
                    </div>
                </div>
                
                <div class="mt-4">
                    <h2 class="text-white text-3xl font-semibold mb-8">Latest News and Blogs</h2>
                    
                    <div class="w-full flex flex-col mt-6">
                        <div class="w-full flex gap-4">
                            <img class="lg:w-[8rem] lg:h-[5rem] md:w-[6rem] md:h-[4rem] xs:w-[8rem] xs:h-[5rem] w-[6rem] h-[3rem] rounded-sm xs:outline xs:outline-[4px]" src="https://images.unsplash.com/photo-1568209865332-a15790aed756?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMXx8bWljcm9jaGlwfGVufDB8MHx8fDE3MzE4Mjg5MDl8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Gallery Image" />
                            <div class="flex flex-col items-start">
                                <h3 class="xs:text-lg text-sm font-semibold">AI-Powered Chips Revolutionize Cloud
                                    Computing</h3>
                                <p class="text-sm text-gray-500">Nov 17, 2024</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="w-full flex flex-col mt-6">
                        <div class="w-full flex justify-start gap-4">
                            <img class="lg:w-[8rem] lg:h-[5rem] md:w-[6rem] md:h-[4rem] xs:w-[8rem] xs:h-[5rem] w-[6rem] h-[3rem] rounded-sm xs:outline xs:outline-[4px]" src="https://images.unsplash.com/photo-1568209865332-a15790aed756?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMXx8bWljcm9jaGlwfGVufDB8MHx8fDE3MzE4Mjg5MDl8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Gallery Image" />
                            
                            <div class="flex flex-col items-start">
                                <h3 class="xs:text-lg text-sm font-semibold">Tesla Unveils Solar Roofs 3.0: Efficiency
                                    Boost of 20%
                                </h3>
                                <p class="text-sm text-gray-500">Nov 17, 2024</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="w-full flex flex-col mt-6">
                        <div class="flex justify-start gap-4">
                            <img class="lg:w-[8rem] lg:h-[5rem] md:w-[6rem] md:h-[4rem] xs:w-[8rem] xs:h-[5rem] w-[6rem] h-[3rem] rounded-sm xs:outline xs:outline-[4px]" src="https://images.unsplash.com/photo-1568209865332-a15790aed756?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMXx8bWljcm9jaGlwfGVufDB8MHx8fDE3MzE4Mjg5MDl8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Gallery Image" />
                            
                            <div class="flex flex-col gap-2 items-start">
                                <h3 class="xs:text-lg text-sm font-semibold">OpenAI Releases GPT-5 with Enhanced
                                    Creativity
                                    Features</h3>
                                <p class="text-sm text-gray-500">Nov 17, 2024</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="w-full mt-4 lg:pl-6">
                    <h4 class="text-white text-3xl font-semibold mb-6">Newsletter</h4>
                    <p class="text-gray-300 mb-7">Join our subscribers list to get the latest news, updates and special
                        offers directly in your inbox</p>
                    <div class="w-full flex justify-center items-center rounded bg-gray-700">
                        <input type="text" class="w-full h-full pl-4 text-gray-200 bg-gray-700 lg:text-left placeholder:text-gray-400 focus:outline-none focus:border-gray-500"  placeholder="Email"/>
                        <button type="submit" class="h-full py-3 xs:px-6 px-2 bg-blue-400 transition-all duration-500 shadow-md rounded-r text-sm text-white font-semibold w-fit hover:bg-fontOrange">Subscribe</button>
                    </div>
                </div>
            </div>

<div class="w-full flex gap-2 flex-col items-center justify-center py-4">
                <div>
                    Copyright &copy; 2024 Sammy-TG All Right Reserved
                </div>
            </div>
        </div>
    </footer>
</div>

Related Examples

Simple Footer 2

Author:
Samuel Abera

1 week ago

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

Author:
Akram Khan

4 months ago

1.1k
Small Footer

Author:
Abhijit Sen

1 year ago

9.9k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

1 year ago

12.2k
Newsletter
Newsletter section

Author:
Alok

2 years ago

9.5k
Basic footer
Simple footer with follow us section

Author:
Anonymous

4 months ago

604
Centered footer with subscribe form
Use this example to center align everything in footer with brand logo, sitemap links and subscribe form.

Author:
Pagedone

6 months ago

423
Card grid for posts

Author:
Mr Robot

1 year ago

17.2k
Tailwind Footer with dark version
This example can be used if you are looking for four column footer in dark version with sitemap links, brand logo, and social media accounts.

Author:
Pagedone

6 months ago

1.2k
Tailwind Footer Template
Following is the Tailwind CSS template for creative footer with contact information like address, email, phone number and a newsletter with social icons and site links.

Author:
Pagedone

6 months ago

1.2k
Newsletter form

Author:
Leon Bachmann

1 year ago

8.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

6 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent