Footer: Branded

<style>
    :root {
        --secondary: 0, 126, 204;
    }
</style>

<footer class="bg-secondary text-light mt-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-14 grid sm:grid-cols-12 gap-8 lg:divide-x divide-white/30">

        <div class="sm:pr-12 sm:col-span-4 lg:col-span-2">
            <div class="font-bold">Kinetic+</div>
        </div>

        <div class="sm:px-12 sm:col-span-8 lg:col-span-5 sm:border-l sm:border-white/30 lg:border-0">
            <div class="font-bold mb-4">Quick links</div>
            <div class="columns-2 gap-6 text-sm">
                <a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">My TRS</a>
                <a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">My Hub</a>
                <a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">Company policies</a>
                <a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">Another link</a>
                <a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">Something else</a>
                <a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">More</a>
            </div>
        </div>

        <div class="lg:pl-12 sm:col-span-12 lg:col-span-5 flex justify-between items-start">
            <div class="flex-shrink-0 flex items-center">
                <span class="text-sm italic mr-2 opacity-50">powered by</span>
                <img class="h-20 w-auto" src="/assets/img/logo-white.png" alt="">
            </div>

            <a href="#top" class="bg-white rounded-full text-dark w-14 h-14 flex justify-center items-center hover:opacity-80 focus:outline-none focus:ring-1 focus:ring-offset-2 focus:ring-offset-secondary focus:ring-white"><i class="fas fa-chevron-up fa-2x"></i></a>
        </div>

    </div>
    <div class="bg-dark">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 py-6 text-sm">
            &copy; Towergate Health & Protection 2022
        </div>
    </div>
</footer>