Footers.

10 Blocks

a good footer must provide valuable information that allows people to navigate the site, engage and re-engage visitors with quality content, and give them a means to seek help.

1

        <div class="container w-full h-64 p-20 m-4 mx-auto mt-6 text-center bg-white border-2 border-dashed border-blueGray-300 rounded-xl">
            <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
                -- Content goes here --
            </p>
        </div>
        <footer class="text-gray-700 border-t body-font ">
            <div
                class="container flex flex-col flex-wrap p-8 mx-auto md:items-center lg:items-start md:flex-row md:flex-no-wrap ">
                <div class="flex-shrink-0 w-64 mx-auto text-center md:mx-0 md:text-left">
                    <a class="flex items-center justify-center font-medium text-gray-900 title-font md:justify-start ">
                        <img src="../badges/WhitePink.svg" alt="">
                    </a>
                </div>
                <div class="flex flex-wrap flex-grow mt-8 -mb-10 text-left md:pl-20 md:mt-0 ">
                    <div class="w-full px-4 lg:w-1/3 md:w-1/2">
                        <h1 class="mb-3 text-sm font-semibold tracking-widest text-blue-700 uppercase title-font">
                            Product
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Email Templates</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Web Templates</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Figma Files</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Sketch Files</a>
                            </li>
                        </nav>
                    </div>
                    <div class="w-full px-4 lg:w-1/3 md:w-1/2">
                        <h1 class="mb-3 text-sm font-semibold tracking-widest text-blue-700 uppercase title-font">
                            Company
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Home</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">About</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Carriers</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Pricing</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Security</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Contact Us</a>
                            </li>
                        </nav>
                    </div>
                    <div class="w-full px-4 lg:w-1/3 md:w-1/2">
                        <h1 class="mb-3 text-sm font-semibold tracking-widest text-blue-700 uppercase title-font">Legal
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Privacy Policy</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Terms Of Service</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Trademark Policy</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Inactivity Policy</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> DPA</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">SLA</a>
                            </li>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="bg-blueGray-900">
                <div class="container flex flex-col flex-wrap px-5 py-6 mx-auto sm:flex-row">
                    <p class="text-sm text-center text-gray-200 sm:text-left ">© Your Company 2020
                    </p>
                    <span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
                        <a class="text-white hover:text-blue-500">
                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                class="w-5 h-5" viewBox="0 0 24 24">
                                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                            </svg>
                        </a>
                        <a class="ml-4 text-white hover:text-blue-500">
                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                class="w-5 h-5" viewBox="0 0 24 24">
                                <path
                                    d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
                                </path>
                            </svg>
                        </a>
                        <a class="ml-4 text-white hover:text-blue-500">
                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                                <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                            </svg>
                        </a>
                    </span>
                </div>
            </div>
        </footer>
                                    

WICKEDTEMPLATES
"Free & premium Well designed landing pages to integrate with your next project."

Have a look to Wicked Templates.
2

        <div class="container w-full p-20 m-4 mx-auto mt-6 text-center bg-white border-2 border-dashed h-80 border-blueGray-300 rounded-xl">
            <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
                -- Content goes here --
            </p>
        </div>
        <footer class="mt-10 text-gray-700 bg-white border-t body-font">
            <div
                class="container flex flex-col flex-wrap p-5 mx-auto md:items-center lg:items-start md:flex-row md:flex-no-wrap ">
                <div class="flex-shrink-0 w-64 mx-auto text-center md:mx-0 md:text-left">
                    <a class="flex items-center justify-center font-medium text-gray-900 title-font md:justify-start ">
                                            <img src="../badges/WhitePink.svg" alt="">
                    </a>
                    <p class="mt-6 text-xs text-center text-gray-600">
                        Wicked Templates helps you jumpstart a landing page by providing you with swapable sections.</p>
                </div>
                <div class="flex flex-wrap flex-grow mt-10 -mb-10 text-center md:pl-20 md:mt-0 md:text-left ">
                    <div class="w-full px-4 lg:w-1/3 md:w-1/2">
                        <h1 class="mb-3 text-sm font-medium tracking-widest text-blue-700 uppercase title-font">Product
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Email Templates</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Web Templates</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Figma Files</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Sketch Files</a>
                            </li>
                        </nav>
                    </div>
                    <div class="w-full px-4 lg:w-1/3 md:w-1/2">
                        <h1 class="mb-3 text-sm font-medium tracking-widest text-blue-700 uppercase title-font">Company
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Home</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">About</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Carriers</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Pricing</a>
                            </li>
                            <li>
                        </nav>
                    </div>
                    <div class="w-full px-4 lg:w-1/3 md:w-1/2">
                        <h1 class="mb-3 text-sm font-semibold tracking-widest text-blue-800 uppercase title-font">
                            Contact
                        </h1>
                        <div class="flex ">
                            <button
                                class="inline-flex w-full px-4 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Action
                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" class="w-4 h-4 my-auto ml-2" viewBox="0 0 24 24">
                                    <path d="M5 12h14M12 5l7 7-7 7"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-blueGray-900">
                <div class="container flex flex-col flex-wrap px-5 py-6 mx-auto sm:flex-row">
                    <p class="text-sm text-center text-gray-200 sm:text-left ">© Your Company 2020
                    </p>
                    <span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
                        <a class="text-white hover:text-blue-500">
                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                class="w-5 h-5" viewBox="0 0 24 24">
                                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                            </svg>
                        </a>
                        <a class="ml-4 text-white hover:text-blue-500">
                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                class="w-5 h-5" viewBox="0 0 24 24">
                                <path
                                    d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
                                </path>
                            </svg>
                        </a>
                        <a class="ml-4 text-white hover:text-blue-500">
                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                                <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                            </svg>
                        </a>
                    </span>
                </div>
            </div>
        </footer>
                                    
3

        <div class="container w-full p-20 m-4 mx-auto mt-6 text-center bg-white border-2 border-dashed h-96 border-blueGray-300 rounded-xl">
            <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
                -- Content goes here --
            </p>
        </div>
        <footer class="mt-10 text-gray-700 bg-white border-t body-font">
            <div class="container flex flex-col flex-wrap items-center p-5 mx-auto md:flex-row md:flex-no-wrap ">
                <a class="flex items-center justify-center w-48 font-medium text-gray-900 title-font md:justify-start ">
                    <img src="../badges/WhitePink.svg" alt="">
                </a>
                <nav
                    class="flex flex-wrap justify-center py-6 text-base items-cente md:mr-auto md:ml-4 md:py-1 md:pl-4 ">
                    <a href="#" class="mr-5 text-sm text-gray-600 hover:text-gray-800"> Prices</a>
                    <a href="#" class="mr-5 text-sm text-gray-600 hover:text-gray-800"> Contact</a>
                    <a href="#" class="mr-5 text-sm text-gray-600 hover:text-gray-800"> Services</a>
                    <a href="#" class="mr-5 text-sm text-gray-600 hover:text-gray-800"> About</a>
                </nav>
                <div class="flex flex-wrap justify-center ml-auto md:flex-no-wrap md:justify-end">
                    <input
                        class="w-2/4 px-4 py-2 mr-2 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0 lg:w-full xl:w-1/2"
                        placeholder="Your Email" type="text">
                    <button
                        class="inline-flex px-4 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 hover:-translate-y-1 hover:scale-110 focus:ring focus:outline-none">
                        Subscribe
                    </button>
                </div>
            </div>
            <div class="bg-blueGray-900">
                <div class="container flex flex-col flex-wrap px-5 py-6 mx-auto sm:flex-row">
                    <p class="text-sm text-center text-gray-200 sm:text-left ">© Your Company 2020
                    </p>
                    <span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
                        <a class="text-white hover:text-blue-500">
                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                class="w-5 h-5" viewBox="0 0 24 24">
                                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                            </svg>
                        </a>
                        <a class="ml-4 text-white hover:text-blue-500">
                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                class="w-5 h-5" viewBox="0 0 24 24">
                                <path
                                    d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
                                </path>
                            </svg>
                        </a>
                        <a class="ml-4 text-white hover:text-blue-500">
                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                                <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                            </svg>
                        </a>
                    </span>
                </div>
            </div>
        </footer>
                                                                        
4

        <div class="container w-full p-20 m-4 mx-auto mt-6 text-center bg-white border-2 border-dashed h-96 border-blueGray-300 rounded-xl">
            <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
                -- Content goes here --
            </p>
        </div>
        <footer class="mt-10 text-gray-700 bg-white border-t body-font">
            <div class="border-t border-gray-200">
                <div class="container flex flex-col flex-wrap items-center justify-between p-5 mx-auto md:flex-row">
                    <a class="flex items-center w-48 mb-4 font-medium text-gray-900 title-font md:mb-0">
                        <img src="../badges/WhitePink.svg" alt="">
                    </a>
                    <div class="flex flex-wrap items-center justify-center mx-auto text-base ">
                        <a href="#" class="justify-center mr-5 text-sm text-center text-gray-600 hover:text-gray-800">
                            Prices</a>
                        <a href="#" class="justify-center mr-5 text-sm text-center text-gray-600 hover:text-gray-800">
                            Contact</a>
                        <a href="#" class="justify-center mr-5 text-sm text-center text-gray-600 hover:text-gray-800">
                            Services</a>
                        <a href="#" class="justify-center mr-5 text-sm text-center text-gray-600 hover:text-gray-800">
                            About</a>
                    </div>
                    <div class="inline-flex items-center justify-center md:justify-start ">
                        <span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
                            <a class="text-blue-807 hover:text-blue-500">
                                <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    class="w-5 h-5" viewBox="0 0 24 24">
                                    <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                                </svg>
                            </a>
                            <a class="ml-4 text-blue-870 hover:text-blue-500">
                                <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    class="w-5 h-5" viewBox="0 0 24 24">
                                    <path
                                        d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
                                    </path>
                                </svg>
                            </a>
                            <a class="ml-4 text-blue-870 hover:text-blue-500">
                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                                    <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                                    <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                                </svg>
                            </a>
                        </span>
                    </div>
                </div>
                <div
                    class="flex flex-wrap items-center justify-center py-6 mx-auto text-base bg-blueGray-900 ">
                    <p class="text-sm text-center text-gray-200 ">© Your Company — 2020
                    </p>
                </div>
            </div>
        </footer>
                                
5

         <footer class="pt-20 mt-10 text-gray-700 border-t body-font ">
            <div class="container flex flex-col flex-wrap p-5 mx-auto md:items-center lg:items-start md:flex-row md:flex-no-wrap ">
                <div class="flex flex-wrap w-full -mx-4 -mb-10 text-left ">
                    <div class="w-full px-4 lg:w-3/12 md:w-1/2">
                        <h1 class="mb-3 text-sm font-medium tracking-widest text-blue-700 uppercase title-font">Support
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Getting Started</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Knowledge Base</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">System Status</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Product Training</a>
                            </li>
                        </nav>
                    </div>
                    <div class="w-full px-4 lg:w-3/12 md:w-1/2">
                        <h1 class="mb-3 text-sm font-medium tracking-widest text-blue-700 uppercase title-font">Product
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Email Templates</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Web Templates</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Figma Files</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Sketch Files</a>
                            </li>
                        </nav>
                    </div>
                    <div class="w-full px-4 lg:w-3/12 md:w-1/2">
                        <h1 class="mb-3 text-sm font-medium tracking-widest text-blue-700 uppercase title-font">Company
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Home</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">About</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Carriers</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">PRicing</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Security</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Contact Us</a>
                            </li>
                        </nav>
                    </div>
                    <div class="w-full px-4 lg:w-3/12 md:w-1/2">
                        <h1 class="mb-3 text-sm font-medium tracking-widest text-blue-700 uppercase title-font">Legal
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Privacy Policy</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Terms Of Service</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Trademark Policy</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Inactivity Policy</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> DPA</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">SLA</a>
                            </li>
                        </nav>
                        </nav>
                    </div>
                    <div class="w-full px-4 lg:w-3/12 md:w-1/2">
                        <h1 class="mb-3 text-sm font-medium tracking-widest text-blue-700 uppercase title-font">Inspiration
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Muzli</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Dribbble</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Behance</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Design Systems</a>
                            </li>
                        </nav>
                    </div>
                    <div class="w-full px-4 lg:w-3/12 md:w-1/2">
                        <h1 class="mb-3 text-sm font-medium tracking-widest text-blue-700 uppercase title-font">Follow us
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Instagram</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Twitter</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Dribbble</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Linkedin</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Facebook</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Youtube</a>
                            </li>
                        </nav>
                        </nav>
                    </div>
                    <div class="w-full px-4 lg:w-3/12 md:w-1/2">
                        <h1 class="mb-3 text-sm font-medium tracking-widest text-blue-700 uppercase title-font">Inspiration
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Muzli</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Dribbble</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Behance</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Design Systems</a>
                            </li>
                        </nav>
                    </div>
                    <div class="w-full px-4 lg:w-3/12 md:w-1/2">
                        <h1 class="mb-3 text-sm font-medium tracking-widest text-blue-700 uppercase title-font">Follow us
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Instagram</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Twitter</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Dribbble</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Linkedin</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800"> Facebook</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Youtube</a>
                            </li>
                        </nav>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="bg-blueGray-900">
                <div class="container flex flex-col flex-wrap px-5 py-6 mx-auto sm:flex-row">
                    <p class="text-sm text-center text-gray-200 sm:text-left ">© Your Company 2020
                    </p>
                    <span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
                        <a class="text-white hover:text-blue-500">
                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5"
                                viewBox="0 0 24 24">
                                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                            </svg>
                        </a>
                        <a class="ml-4 text-white hover:text-blue-500">
                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5"
                                viewBox="0 0 24 24">
                                <path
                                    d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
                                </path>
                            </svg>
                        </a>
                        <a class="ml-4 text-white hover:text-blue-500">
                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                class="w-5 h-5" viewBox="0 0 24 24">
                                <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                            </svg>
                        </a>
                    </span>
                </div>
            </div>
        </footer>
                                                                
6

        <div class="container w-full p-20 m-4 mx-auto mt-8 text-center bg-white border-2 border-dashed h-72 border-blueGray-300 rounded-xl">
            <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
                -- Content goes here --
            </p>
        </div>
        <footer class="mt-6 text-gray-700 bg-white border-t body-font">
            <div
                class="container flex flex-col flex-wrap p-5 py-10 mx-auto lg:px-20 md:items-center lg:items-start md:flex-row md:flex-no-wrap ">
                <div class="flex flex-wrap flex-grow mx-auto mt-10 -mb-10 text-left md:mt-0 ">
                    <div class="w-full lg:w-1/3 md:w-full">
                        <h1
                            class="mb-8 text-2xl font-bold text-center text-blue-800 lg:text-left lg:text-2xl title-font">
                            A pretty long lenght display headline ready to convert visitors into users.</h1>
                    </div>
                    <div class="w-full text-right lg:w-1/3 md:w-1/2 ">
                        <h1 class="mb-3 text-sm font-semibold tracking-widest text-blue-700 uppercase title-font">
                            Company
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Home</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">About</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Carriers</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Pricing</a>
                            </li>
                        </nav>
                    </div>
                    <div class="w-full text-right lg:w-1/3 md:w-1/2">
                        <h1 class="mb-3 text-sm font-semibold tracking-widest text-blue-700 uppercase title-font">Legal
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Privacy Policy</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Terms Of Service</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Trademark Policy</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Inactivity Policy</a>
                            </li>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="bg-blueGray-900">
                <div class="container flex flex-col flex-wrap px-5 py-6 mx-auto lg:px-20 sm:flex-row">
                    <span class="inline-flex justify-center mt-2 sm:mt-0 sm:justify-start">
                        <a class="text-white hover:text-blue-500">
                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                class="w-5 h-5" viewBox="0 0 24 24">
                                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                            </svg>
                        </a>
                        <a class="ml-4 text-white hover:text-blue-500">
                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                class="w-5 h-5" viewBox="0 0 24 24">
                                <path
                                    d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
                                </path>
                            </svg>
                        </a>
                        <a class="ml-4 text-white hover:text-blue-500">
                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                                <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                            </svg>
                        </a>
                    </span>
                </div>
            </div>
        </footer>
                                                                        
7

    <div class="container w-full p-20 m-4 mx-auto mt-10 text-center bg-white border-2 border-dashed h-96 border-blueGray-300 rounded-xl">
        <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
            -- Content goes here --
        </p>
    </div>
    <footer class="mt-32 text-gray-700 bg-white border-t body-font">
            <div class="bg-blueGray-900">
                <div class="container flex flex-col flex-wrap px-5 py-6 lg:px-20 sm:flex-row">
                    <div class="flex flex-wrap items-center justify-center text-base ">
                        <p class="mr-5 text-sm text-center text-gray-200">© Your Company — 2020
                        </p>
                        <a href="#" class="justify-center mr-5 text-sm text-center text-blueGray-200 hover:text-blue-700"> Privacy Policy</a>
                        <a href="#" class="justify-center mr-5 text-sm text-center text-blueGray-200 hover:text-blue-700"> Terms Of Service</a>
                    </div>
                    <span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-end">
                        <p class="mr-5 text-sm text-center text-gray-200">Working Remote Since 2020
                        </p>
                    </span>
                </div>
            </div>
        </footer>
                                                                        
8

    <div class="container w-full p-20 m-4 mx-auto mt-10 text-center bg-white border-2 border-dashed h-96 border-blueGray-300 rounded-xl">
        <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
            -- Content goes here --
        </p>
    </div>
    <footer class="mt-16 text-gray-700 bg-white border-t body-font">
            <div class="border-t border-gray-200">
                <div class="container flex flex-col flex-wrap items-center justify-between p-5 mx-auto md:flex-row">
                    <a class="flex items-center w-32 mb-4 font-medium text-gray-900 title-font md:mb-0">
                        <img src="../badges/WhitePink.svg" alt="">
                    </a>
                    <div class="flex flex-wrap items-center justify-center mx-auto text-base md:ml-auto md:mr-auto">
                        <a href="#" class="justify-center mr-5 text-sm text-center text-gray-600 hover:text-gray-800">
                            Prices</a>
                        <a href="#" class="justify-center mr-5 text-sm text-center text-gray-600 hover:text-gray-800">
                            Contact</a>
                        <a href="#" class="justify-center mr-5 text-sm text-center text-gray-600 hover:text-gray-800">
                            Services</a>
                        <a href="#" class="justify-center mr-5 text-sm text-center text-gray-600 hover:text-gray-800">
                            About</a>
                    </div>
                    <div class="inline-flex items-center justify-center md:justify-start ">
                        <span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
                            <a class="text-blue-807 hover:text-blue-500">
                                <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    class="w-5 h-5" viewBox="0 0 24 24">
                                    <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                                </svg>
                            </a>
                            <a class="ml-4 text-blue-870 hover:text-blue-500">
                                <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    class="w-5 h-5" viewBox="0 0 24 24">
                                    <path
                                        d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
                                    </path>
                                </svg>
                            </a>
                            <a class="ml-4 text-blue-870 hover:text-blue-500">
                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                                    <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                                    <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                                </svg>
                            </a>
                        </span>
                    </div>
                </div>
                <div
                    class="flex items-center justify-center px-5 py-6 mx-auto text-base bg-blueGray-900 fle7-wrap md:ml-auto md:mr-auto">
                    <div class="flex flex-wrap items-center justify-center mx-auto text-base">
                        <p class="mr-5 text-sm text-center text-gray-200">© Your Company — 2020
                        </p>
                        <a href="#" class="justify-center mr-5 text-sm text-center text-blueGray-200 hover:text-blue-700"> Privacy
                            Policy</a>
                        <a href="#" class="justify-center mr-5 text-sm text-center text-blueGray-200 hover:text-blue-700"> Terms Of
                            Service</a>
                    </div>
                </div>
            </div>
        </footer>
                                                                        
9

    <div class="container w-full h-16 p-20 m-4 mx-auto mt-8 text-center bg-white border-2 border-dashed border-blueGray-300 rounded-xl">
        <p class="mt-auto italic tracking-tighter text-md text-blueGray-500 title-font">
            -- Content goes here --
        </p>
    </div>
    <footer class="mt-6 text-gray-700 bg-white border-t body-font">
            <div class="border-t border-gray-200">
                <div class="container flex flex-col flex-wrap items-center p-5 mx-auto ">
                    <div class="inline-flex items-center py-20">
                        <span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
                            <a class="text-blueGray-300 hover:text-blueGray-400">
                                <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    class="w-16 h-16" viewBox="0 0 24 24">
                                    <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                                </svg>
                            </a>
                            <a class="mx-5 text-blueGray-300 hover:text-blueGray-400">
                                <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    class="w-16 h-16" viewBox="0 0 24 24">
                                    <path
                                        d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
                                    </path>
                                </svg>
                            </a>
                            <a class=" text-blueGray-300 hover:text-blueGray-400">
                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" class="w-16 h-16" viewBox="0 0 24 24">
                                    <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                                    <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                                </svg>
                            </a>
                        </span>
                    </div>
                </div>
                <div class="bg-blueGray-900">
                    <div class="container flex flex-col flex-wrap px-5 py-6 mx-auto lg:px-20 sm:flex-row">
                        <div class="flex flex-wrap items-center justify-center mx-auto text-base">
                            <a href="#"
                                class="justify-center mr-5 text-sm text-center text-blueGray-200 hover:text-blue-700">
                                Privacy Policy</a>
                            <a href="#"
                                class="justify-center mr-5 text-sm text-center text-blueGray-200 hover:text-blue-700">
                                Terms Of Service</a>
                            <a href="#"
                                class="justify-center mr-5 text-sm text-center text-blueGray-200 hover:text-blue-700">
                                Legal</a>
                            <a href="#"
                                class="justify-center mr-5 text-sm text-center text-blueGray-200 hover:text-blue-700">
                                License</a>
                        </div>
                    </div>
                </div>
                <div class="flex flex-wrap items-center justify-center px-5 py-6 mx-auto text-base bg-blueGray-900 ">
                    <div class="flex flex-wrap items-center justify-center mx-auto text-base">
                        <p class="mr-5 text-sm text-center text-gray-200">© Your Company — 2020
                        </p>

                        <a href="#"
                            class="justify-center mr-5 text-sm text-center text-blueGray-200 hover:text-blue-700"> All rights Reserves</a>
                    </div>
                </div>
            </div>
        </footer>
                                                                        
10

        <div class="container w-full p-20 m-4 mx-auto mt-8 text-center bg-white border-2 border-dashed h-72 border-blueGray-300 rounded-xl">
            <p class="mt-auto italic tracking-tighter text-md text-blueGray-500 title-font">
                -- Content goes here --
            </p>
        </div>
        <footer class="mt-12 text-gray-700 bg-white border-t body-font">
            <div class="container flex flex-col flex-wrap p-5 mx-auto md:items-center lg:items-start md:flex-row ">
                <div class="flex-shrink-0 w-48 mx-auto text-center md:mx-0 md:text-left">
                    <a class="flex items-center justify-center font-medium text-gray-900 title-font md:justify-start ">
                        <img src="../badges/WhitePink.svg" alt="">
                    </a>
                    <p class="mt-4 text-xs text-center text-gray-600">
                        WickedTemplates helps you jumpstart a landing page by providing you with swapable sections.</p>
                </div>
                <div class="flex flex-wrap flex-grow mt-10 -mb-10 text-center md:pl-20 md:mt-0 md:text-left ">
                    <div class="w-full mx-auto lg:w-1/6 md:w-1/2 lg:pl-20">
                        <h1 class="mb-3 text-sm font-medium tracking-widest text-blue-700 uppercase title-font">Product
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Email Templates</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Web Templates</a>
                            </li>
                        </nav>
                    </div>
                    <div class="w-full mx-auto lg:w-1/6 md:w-1/2 lg:pl-20">
                        <h1 class="mb-3 text-sm font-medium tracking-widest text-blue-700 uppercase title-font">Company
                        </h1>
                        <nav class="mb-10 list-none">
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Home</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">About</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Carriers</a>
                            </li>
                            <li>
                                <a class="text-sm text-gray-600 hover:text-gray-800">Pricing</a>
                            </li>
                            <li>
                        </nav>
                    </div>
                    <div class="w-full md:w-1/2 lg:pl-20">
                        <h1 class="mb-3 text-sm font-semibold tracking-widest text-blue-700 uppercase title-font">
                            Contact
                        </h1>
                        <div class="inline-flex ">
                            <button
                                class="inline-flex items-center px-5 py-3 text-white rounded-lg bg-blueGray-900 hover:bg-blue-700 focus:outline-none">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 h-6"
                                    viewBox="0 0 512 512">
                                    <path
                                        d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z">
                                    </path>
                                </svg>
                                <span class="flex flex-col items-start ml-4 leading-none">
                                    <span class="mb-1 text-xs text-white">GET IT ON</span>
                                    <span class="font-medium title-font">Google Play</span>
                                </span>
                            </button>
                            <button
                                class="inline-flex items-center px-5 py-3 ml-4 text-white rounded-lg bg-blueGray-900 hover:bg-blue-700 focus:outline-none">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 h-6"
                                    viewBox="0 0 305 305">
                                    <path
                                        d="M40.74 112.12c-25.79 44.74-9.4 112.65 19.12 153.82C74.09 286.52 88.5 305 108.24 305c.37 0 .74 0 1.13-.02 9.27-.37 15.97-3.23 22.45-5.99 7.27-3.1 14.8-6.3 26.6-6.3 11.22 0 18.39 3.1 25.31 6.1 6.83 2.95 13.87 6 24.26 5.81 22.23-.41 35.88-20.35 47.92-37.94a168.18 168.18 0 0021-43l.09-.28a2.5 2.5 0 00-1.33-3.06l-.18-.08c-3.92-1.6-38.26-16.84-38.62-58.36-.34-33.74 25.76-51.6 31-54.84l.24-.15a2.5 2.5 0 00.7-3.51c-18-26.37-45.62-30.34-56.73-30.82a50.04 50.04 0 00-4.95-.24c-13.06 0-25.56 4.93-35.61 8.9-6.94 2.73-12.93 5.09-17.06 5.09-4.64 0-10.67-2.4-17.65-5.16-9.33-3.7-19.9-7.9-31.1-7.9l-.79.01c-26.03.38-50.62 15.27-64.18 38.86z">
                                    </path>
                                    <path
                                        d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z">
                                    </path>
                                </svg>
                                <span class="flex flex-col items-start ml-4 leading-none">
                                    <span class="mb-1 text-xs text-white">Download on the</span>
                                    <span class="font-medium title-font">App Store</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-blueGray-900">
                <div class="container flex flex-col flex-wrap px-5 py-6 mx-auto sm:flex-row">
                    <p class="text-sm text-center text-gray-200 sm:text-left ">© Your Company 2020
                    </p>
                    <span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
                        <a class="text-white hover:text-blue-500">
                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                class="w-5 h-5" viewBox="0 0 24 24">
                                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                            </svg>
                        </a>
                        <a class="ml-4 text-white hover:text-blue-500">
                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                class="w-5 h-5" viewBox="0 0 24 24">
                                <path
                                    d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
                                </path>
                            </svg>
                        </a>
                        <a class="ml-4 text-white hover:text-blue-500">
                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                                <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                            </svg>
                        </a>
                    </span>
                </div>
            </div>
        </footer>