Responsive footer

Footer section with icons

This tailwind example is contributed by Prajwal Hallale, on 14-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Footer

Author Prajwal Hallale

Tailwind v3.4 12.7k 7

Fork Fullscreen

<div class="sm:col-span-2">
            <a href="#" class="inline-flex items-center">
                <img src="https://mcqmate.com/public/images/logos/60x60.png" alt="logo" class="h-8 w-8">
                <span class="ml-2 text-xl font-bold tracking-wide text-gray-800">Company Name</span>
            </a>
            <div class="mt-6 lg:max-w-xl">
                <p class="text-sm text-gray-800">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi felis mi, faucibus dignissim lorem
                    id, imperdiet interdum mauris. Vestibulum ultrices sed libero non porta. Vivamus malesuada urna eu
                    nibh malesuada, non finibus massa laoreet. Nunc nisi velit, feugiat a semper quis, pulvinar id
                    libero. Vivamus mi diam, consectetur non orci ut, tincidunt pretium justo. In vehicula porta
                    molestie. Suspendisse potenti. 
                    </p>
            </div>
        </div>

<div class="flex flex-col gap-2 text-sm">
            <p class="text-base font-bold tracking-wide text-gray-900">Popular Courses</p>
            <a href="#">UPSC - Union Public Service Commission</a>
            <a href="#">General Knowledge</a>
            <a href="#">MBA</a>
            <p class="text-base font-bold tracking-wide text-gray-900">Popular Topics</p>
            <a href="#">Human Resource Management</a>
            <a href="#">Operations Management</a>
            <a href="#">Marketing Management</a>
        </div>

<div>
            <p class="text-base font-bold tracking-wide text-gray-900">COMPANY IS ALSO AVAILABLE ON</p>
            <div class="flex items-center gap-1 px-2">
                <a href="#" class="w-full min-w-xl">
                    <img src="https://mcqmate.com/public/images/icons/playstore.svg" alt="Playstore Button"
                        class="h-10">
                </a>
                <a class="w-full min-w-xl" href="https://www.youtube.com/channel/UCo8tEi6SrGFP8XG9O0ljFgA">
                    <img src="https://mcqmate.com/public/images/icons/youtube.svg" alt="Youtube Button"
                        class="h-28">
                </a>
            </div>
            <p class="text-base font-bold tracking-wide text-gray-900">Contacts</p>
            <div class="flex">
                <p class="mr-1 text-gray-800">Email:</p>
                <a href="#" title="send email">admin@company.com</a>
            </div>
        </div>

</div>

<div class="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row">
        <p class="text-sm text-gray-600">© Copyright 2023 Company. All rights reserved.</p>
        <ul class="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
            <li>
                <a href="#"
                    class="text-sm text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Privacy
                    &amp; Cookies Policy
                </a>
            </li>
            <li>
                <a href="#"
                    class="text-sm text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Disclaimer
                </a>
            </li>
        </ul>
    </div>

</footer>