Shuffle Components in Metis library

<section class="xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button class="navbar-burger flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="py-12 text-center">
      <div class="max-w-lg mx-auto mb-8">
        <h2 class="text-3xl md:text-4xl mb-4 font-bold font-heading">
          <span>The quick</span>
          <span class="text-blue-600">brown fox</span>
          <span>jumps over the lazy dog.</span>
        </h2>
        <p class="text-blueGray-400 leading-relaxed">The quick brown fox jumps over the lazy dog.</p>
      </div>
      <div><a class="block sm:inline-block py-4 px-8 mb-4 sm:mb-0 sm:mr-3 text-xs text-white text-center font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Check Now</a><a class="block sm:inline-block py-4 px-8 text-xs text-blueGray-500 hover:text-blueGray-600 text-center font-semibold leading-none bg-white rounded" href="#">Documentation</a></div>
    </div>
    <div class="relative max-w-3xl mt-6 mb-8 mx-auto">
      <img src="metis-assets/elements/pattern-small.png" alt="">
      <div class="absolute" style="top: 3%; left: 9%; width: 82%; height: 90%;">
        <img class="object-contain w-full h-full" src="metis-assets/elements/app-mockup.png" alt="">
      </div>
    </div>
    <div class="flex flex-wrap items-center justify-center max-w-4xl mx-auto pt-8 pb-12">
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-3 mb-8">
        <img class="mx-auto" src="metis-assets/logos/brands/tesla.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-3 mb-8">
        <img class="mx-auto" src="metis-assets/logos/brands/facebook.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-3 mb-8">
        <img class="mx-auto" src="metis-assets/logos/brands/marvel.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-3 mb-8">
        <img class="mx-auto" src="metis-assets/logos/brands/nike.svg" alt="">
      </div>
      <div class="hidden md:block w-1/2 md:w-1/3 lg:w-1/5 px-3 mb-8">
        <img class="mx-auto" src="metis-assets/logos/brands/airbnb.svg" alt="">
      </div>
    </div>
  </div>
  <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div class="navbar-backdrop fixed inset-0 bg-blueGray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-3xl font-semibold leading-none" href="#">
          <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
        </a>
        <button class="navbar-close">
          <svg class="h-6 w-6 text-blueGray-400 cursor-pointer hover:text-blueGray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block p-4 text-sm text-blueGray-500 hover:bg-blue-50 hover:text-blue-600" href="#">Product</a></li>
          <li class="mb-1"><a class="block p-4 text-sm text-blueGray-500 hover:bg-blue-50 hover:text-blue-600" href="#">Company</a></li>
          <li class="mb-1"><a class="block p-4 text-sm text-blueGray-500 hover:bg-blue-50 hover:text-blue-600" href="#">About Us</a></li>
          <li class="mb-1"><a class="block p-4 text-sm text-blueGray-500 hover:bg-blue-50 hover:text-blue-600" href="#">Features</a></li>
        </ul>
        <div class="mt-4 pt-6 border-t border-blueGray-100"><a class="block px-4 py-3 mb-3 text-xs text-center font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a><a class="block px-4 py-3 mb-2 text-xs text-center text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a></div>
      </div>
      <div class="mt-auto">
        <p class="my-4 text-xs text-blueGray-400">
          <span>Get in Touch</span>
          <a class="text-blue-600 hover:text-blue-600 underline" href="#">[email protected]</a>
        </p>
        <a class="inline-block px-1" href="#">
          <img src="metis-assets/icons/facebook-blue.svg" alt="">
        </a>
        <a class="inline-block px-1" href="#">
          <img src="metis-assets/icons/twitter-blue.svg" alt="">
        </a>
        <a class="inline-block px-1" href="#">
          <img src="metis-assets/icons/instagram-blue.svg" alt="">
        </a>
      </div>
    </nav>
  </div>
</section>