Shuffle Components in Uinel library

<div>
  <div class="text-gray-700 font-heading font-medium relative bg-gray-50 bg-opacity-50">
    <nav class="flex justify-between px-6 lg:px-12 py-8">
      <div class="flex w-full items-center">
        <a href="#">
          <img class="h-12" src="uinel-assets/logos/uinel-gray-black.svg" alt="">
        </a>
        <ul class="hidden xl:flex px-4 ml-32">
          <li class="mr-16"><a class="text-gray-400 hover:text-gray-500" href="#">New tools</a></li>
          <li class="mr-16">
            <a class="flex items-center text-gray-400 hover:text-gray-500" href="#">
              <span class="mr-4">Products</span>
              <svg width="8" height="5" viewbox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li><a class="text-gray-400 hover:text-gray-500" href="#">Pricing</a></li>
        </ul>
        <div class="hidden xl:flex items-center ml-auto">
          <a class="text-gray-400 hover:text-gray-500" href="#">
            <svg width="20" height="23" viewbox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.5219 18.016H2.70312V8.5933C2.70313 6.719 3.48375 4.92147 4.87328 3.59614C6.2628 2.27081 8.1474 1.52625 10.1125 1.52625C12.0776 1.52625 13.9622 2.27081 15.3517 3.59614C16.7412 4.92147 17.5219 6.719 17.5219 8.5933V18.016Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M1 18.0121H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8.87891 22H10.8789" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="w-px h-12 bg-gray-200 bg-opacity-50 ml-9 mr-11"></div>
          <a class="flex items-center mr-12" href="#">
            <span>Sona</span>
            <img class="ml-6" src="uinel-assets/elements/navigations/avatar-online.png" alt="">
            <img class="ml-6" src="uinel-assets/elements/navigations/arrow-down-gray.svg" alt="">
          </a>
          <button class="uppercase text-sm font-bold font-body border-2 border-gray-200 border-opacity-50 rounded-full py-3 px-5 tracking-wide hover:border-gray-300">
            <span class="block mt-px">New project</span>
          </button>
        </div>
      </div>
      <button class="navbar-burger self-center xl:hidden text-gray-400 hover:text-gray-500 focus:outline-none">
        <svg width="25" height="16" viewbox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="25" height="2" fill="currentColor"></rect><rect y="14" width="25" height="2" fill="currentColor"></rect></svg>
      </button>
    </nav>
    <div class="navbar-menu hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
      <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-80"></div>
      <nav class="relative flex flex-col py-8 h-full w-full bg-white overflow-y-auto">
        <div class="flex items-center pl-16 mb-8">
          <a class="text-2xl text-gray-800 font-bold" href="#">
            <img class="h-12" src="uinel-assets/logos/uinel-gray-black.svg" alt="">
          </a>
        </div>
        <div class="flex items-center mb-10 px-10">
          <a class="flex items-center ml-1" href="#">
            <img class="ml-6" src="uinel-assets/elements/navigations/avatar-online.png" alt="">
            <img class="ml-6" src="uinel-assets/elements/navigations/arrow-down-gray.svg" alt="">
          </a>
          <a class="text-gray-400 hover:text-gray-500 ml-auto" href="#">
            <svg width="20" height="23" viewbox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.5219 18.016H2.70312V8.5933C2.70313 6.719 3.48375 4.92147 4.87328 3.59614C6.2628 2.27081 8.1474 1.52625 10.1125 1.52625C12.0776 1.52625 13.9622 2.27081 15.3517 3.59614C16.7412 4.92147 17.5219 6.719 17.5219 8.5933V18.016Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M1 18.0121H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8.87891 22H10.8789" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
        <div>
          <ul>
            <li class="mb-1 px-10"><a class="block pl-8 py-4 text-body text-lg rounded-full hover:shadow-2xl" href="#">New tools</a></li>
            <li class="mb-1 px-10">
              <a class="flex items-center pl-8 py-4 text-body text-lg rounded-full hover:shadow-2xl" href="#">
                <span>Products</span>
                <svg class="ml-4" width="8" height="5" viewbox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
                </svg>
              </a>
            </li>
            <li class="mb-1 px-10"><a class="block pl-8 py-4 text-body text-lg rounded-full hover:shadow-2xl" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="mt-auto px-10">
          <button class="py-3 px-5 mt-6 w-full text-body font-body font-bold uppercase tracking-wide text-sm border-2 border-gray-200 hover:border-gray-300 border-opacity-50 rounded-full">
            <span class="block mt-px">New project</span>
          </button>
          <p class="mt-6 mb-4 text-center">
            <span class="text-sm text-darkBlueGray-400">2021 &copy; Uinel. All rights reserved.</span>
          </p>
        </div>
      </nav>
      <button class="navbar-close absolute top-5 p-6 right-5">
        <div class="absolute top-3">
          <span class="absolute w-px h-6 bg-black transform -rotate-45"></span>
          <span class="absolute w-px h-6 bg-black transform rotate-45"></span>
        </div>
      </button>
    </div>
  </div>
  <section class="pb-16 2xl:pb-20 overflow-hidden">
    <div class="relative bg-blueGray-100 rounded-b-10xl">
      <div class="container px-4 mx-auto">
        <div class="flex flex-wrap items-center -mx-4 pt-16 pb-20">
          <div class="w-full lg:w-1/2 px-4 mb-24 lg:mb-0">
            <span class="block mb-9 font-medium tracking-widest uppercase text-sm text-gray-300">Better communication and work</span>
            <h1 class="max-w-xl mb-16 font-heading font-medium text-9xl md:text-10xl xl:text-13xl leading-none">
              <span>A thousand tools for</span>
              <span class="relative inline-block">
                <span class="absolute inset-0 xl:-left-8 xl:-right-8">
                  <img class="absolute inset-0 w-full max-w-non" src="uinel-assets/elements/heroes/lines-blue1.svg" alt="">
                  <img class="absolute inset-0 mt-1 lg:mt-2 xl:ml-4 w-full max-w-none" src="uinel-assets/elements/heroes/lines-blue2.svg" alt="">
                </span>
                <span class="relative z-10">design</span>
              </span>
            </h1>
            <p class="mb-16 lg:mb-24 text-xl text-darkBlueGray-400 leading-snug">Fusce sem lectus, pretium at pellentesque a sagittis non.</p>
            <div class="flex flex-col sm:flex-row">
              <input class="py-5 px-10 text-xl text-darkBlueGray-400 placeholder-darkBlueGray-400 outline-none rounded-xl" type="text" placeholder="Enter email">
              <button class="py-5 px-10 mt-3 sm:mt-0 sm:-ml-4 font-heading font-medium tracking-tighter text-xl text-white text-center bg-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 hover:bg-blue-600 rounded-xl">Get started</button>
            </div>
          </div>
          <div class="w-full lg:w-1/2 px-4">
            <div class="relative max-w-sm xl:max-w-none mx-auto">
              <img class="relative xl:max-w-max z-10" src="uinel-assets/images/heroes/widget.png" alt="">
              <img class="absolute -top-3 -left-24 xl:max-w-max" src="uinel-assets/images/heroes/elipse.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>