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

341

Fork Fullscreen

<footer class="w-full h-fit bg-black text-white relative bottom-0">
        <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