PreFooters

<div class="w-full">
    <div class="container mx-auto px-4">
       <div class="justify-between items-center flex flex-wrap -mx-4">
          <div class="text-center px-4 relative w-full lg:w-3/12 w-full md:w-6/12">
             <a href="javascript:;" class="w-full px-6 py-6 text-sm px-6 py-3 shadow hover:shadow-lg rounded-lg outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold block text-white bg-twitter-regular border-twitter-regular active:bg-twitter-active active:border-twitter-active">
                <i class="my-4 text-2xl fab fa-twitter"></i>
                <h2 class="text-5xl leading-normal font-bold lowercase mt-2">twitter</h2>
                <p><small class="uppercase">@creativetim</small></p>
             </a>
          </div>
          <div class="text-center px-4 relative w-full lg:w-3/12 w-full md:w-6/12">
             <a href="javascript:;" class="w-full px-6 py-6 text-sm px-6 py-3 shadow hover:shadow-lg rounded-lg outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold block text-white bg-facebook-regular border-facebook-regular active:bg-facebook-active active:border-facebook-active">
                <i class="my-4 text-2xl fab fa-facebook-f"></i>
                <h2 class="text-5xl leading-normal font-bold lowercase mt-2">facebook</h2>
                <p><small class="uppercase">@creative-tim</small></p>
             </a>
          </div>
          <div class="text-center px-4 relative w-full lg:w-3/12 w-full md:w-6/12">
             <a href="javascript:;" class="w-full px-6 py-6 text-sm px-6 py-3 shadow hover:shadow-lg rounded-lg outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold block text-white bg-slack-regular border-slack-regular active:bg-slack-active active:border-slack-active">
                <i class="my-4 text-2xl fab fa-slack"></i>
                <h2 class="text-5xl leading-normal font-bold lowercase mt-2">slack</h2>
                <p><small class="uppercase">@creative-tim</small></p>
             </a>
          </div>
          <div class="text-center px-4 relative w-full lg:w-3/12 w-full md:w-6/12">
             <a href="javascript:;" class="w-full px-6 py-6 text-sm px-6 py-3 shadow hover:shadow-lg rounded-lg outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold block text-white bg-instagram-regular border-instagram-regular active:bg-instagram-active active:border-instagram-active">
                <i class="my-4 text-2xl fab fa-instagram"></i>
                <h2 class="text-5xl leading-normal font-bold lowercase mt-2">instagram</h2>
                <p><small class="uppercase">@creative-tim</small></p>
             </a>
          </div>
       </div>
    </div>
 </div>