Footer sections

<!-- This example requires Tailwind CSS v2.0+ -->
<div class="relative bg-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6">
    <div class="py-6 flex items-center flex-col md:flex-row">
      <div class="flex-1 flex items-center">
        <a href="#" class="text-gray-600">
          <!-- SVG of your logo -->
          <svg class="h-6 w-6" viewbox="0 0 63 70" xmlns="http://www.w3.org/2000/svg"></svg>
        </a>
        <div class="ml-2 md:ml-4">
          <span class="text-sm font-medium text-gray-400">© 2021 Company inc.</span>
        </div>
      </div>
      <div class="md:ml-4 mt-4 md:mt-0 flex items-center">
        <ul class="flex items-center space-x-4 text-sm">
          <li>
            <a href="#" class="text-gray-400 hover:text-gray-600 transition">
              <!-- SVG of social media platform logo -->
              <svg class="w-5 h-5" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></svg>
            </a>
          </li>
          <li>
            <a href="#" class="text-gray-400 hover:text-gray-600 transition">
              <!-- SVG of social media platform logo -->
              <svg class="w-5 h-5" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></svg>
            </a>
          </li>
          <li>
            <a href="#" class="text-gray-400 hover:text-gray-600 transition">
              <!-- SVG of social media platform logo -->
              <svg class="w-5 h-5" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></svg>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="relative bg-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 pt-4">
    <div class="py-6 flex flex-col md:flex-row md:items-center justify-between border-t md:space-x-6">
      <div class="md:flex-1 mt-4 md:mt-0 flex md:items-center justify-center md:justify-start order-3 md:order-1">
        <span class="text-sm font-medium text-gray-400">© 2021 Company inc.</span>
      </div>
      <div class="md:flex-1 flex md:items-center justify-center order-1 md:order-2">
        <a href="#" class="text-gray-600">
          <!-- SVG of your logo -->
          <svg class="h-8 w-8" viewbox="0 0 63 70" xmlns="http://www.w3.org/2000/svg"></svg>
        </a>
      </div>
      <div class="md:flex-1 mt-6 md:mt-0 flex md:items-center justify-center md:justify-end order-2 md:order-3">
        <ul class="flex items-center space-x-3 md:space-x-6 text-sm font-medium">
          <li>
            <a href="#" class="text-gray-500 hover:text-gray-600">Home</a>
          </li>
          <li>
            <a href="#" class="text-gray-500 hover:text-gray-600">Features</a>
          </li>
          <li>
            <a href="#" class="text-gray-500 hover:text-gray-600">Pricing</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- This example requires Tailwind CSS v2.0+ -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 pt-4">
        <div class="py-6 flex flex-col md:flex-row md:items-center justify-center border-t md:space-x-6">
            <div class="md:flex-1 mt-6 md:mt-0 flex md:items-center justify-center ">
                <ul class="flex items-center space-x-3 md:space-x-6 text-sm font-medium">
                    <li>
                        <a href="#" class="text-gray-500 hover:text-gray-600">Home</a>
                    </li>
                    <li>
                        <a href="#" class="text-gray-500 hover:text-gray-600">Features</a>
                    </li>
                    <li>
                        <a href="#" class="text-gray-500 hover:text-gray-600">Pricing</a>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <div class="md:flex-1 mt-4 md:mt-0 bg-red-100 flex md:items-center justify-center py-5">
                <span class="text-sm font-medium text-gray-400">© 2021 Company inc.</span>
            </div>
        </div>
    </div>