Tailwind Components in Vendia library

<section class="bg-black">
  <nav class="relative px-6 py-6">
    <div class="flex justify-between items-center">
      <a class="inline-block text-lg font-bold" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button class="navbar-burger flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" 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 absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:w-auto lg:space-x-12">
        <li><a class="inline-block text-sm text-yellow-500 font-medium" href="#">Home</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Shop</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Product</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Blog</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Support</a></li>
      </ul>
      <div class="hidden lg:block">
        <a class="inline-block text-white hover:text-yellow-500" href="#">
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.5 0.5H2.16667L2.5 2.16667M3.83333 8.83333H12.1667L15.5 2.16667H2.5M3.83333 8.83333L2.5 2.16667M3.83333 8.83333L1.92259 10.7441C1.39762 11.269 1.76942 12.1667 2.51184 12.1667H12.1667M12.1667 12.1667C11.2462 12.1667 10.5 12.9129 10.5 13.8333C10.5 14.7538 11.2462 15.5 12.1667 15.5C13.0871 15.5 13.8333 14.7538 13.8333 13.8333C13.8333 12.9129 13.0871 12.1667 12.1667 12.1667ZM5.5 13.8333C5.5 14.7538 4.75381 15.5 3.83333 15.5C2.91286 15.5 2.16667 14.7538 2.16667 13.8333C2.16667 12.9129 2.91286 12.1667 3.83333 12.1667C4.75381 12.1667 5.5 12.9129 5.5 13.8333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
  </nav>
  <div class="mx-6 pt-24 pb-80 xs:pb-96 xl:pt-52 bg-yellow-500 relative overflow-hidden">
    <div class="absolute bottom-0 left-0 w-full xs:px-12 xl:pr-0">
      <img class="block mx-auto lg:ml-0 lg:max-w-none h-full w-10/12 sm:w-3/5 md:w-1/2" src="vendia-assets/images/header/woman-white-circle.png" alt="">
    </div>
    <div class="container mx-auto px-4 relative">
      <div class="max-w-2xl mx-auto lg:mr-20">
        <h1 class="font-heading font-bold text-4xl xs:text-5xl sm:text-8xl lg:text-10xl mb-12 md:mb-16">
          <span class="block">SUMMER</span>
          <span>COLLECTION</span>
        </h1>
        <div class="max-w-lg mx-auto">
          <p class="text-xl font-medium mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to dictum aliquet accumsan porta lectus ridiculus in these mattis.</p>
          <a class="group inline-flex items-center text-2xl font-bold" href="#">
            <span class="mr-3">Explore Collections</span>
            <span class="animate-bounce">
              <svg width="11" height="12" viewbox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.95669 1.75742L9.55635 1.75742M9.55635 1.75742L9.55635 8.35709M9.55635 1.75742L1.07107 10.2427" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
          </a>
        </div>
      </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-gray-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-2xl font-medium leading-none" href="#">
          <img class="h-6" src="vendia-assets/logos/vendia-dark.svg" alt="" width="auto">
        </a>
        <button class="navbar-close">
          <svg class="h-6 w-6 text-gray-500 cursor-pointer hover:text-gray-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 font-medium text-black hover:bg-gray-50" href="#">Shop</a></li>
          <li class="mb-1"><a class="block p-4 font-medium text-black hover:bg-gray-50" href="#">Product</a></li>
          <li class="mb-1"><a class="block p-4 font-medium text-black hover:bg-gray-50" href="#">Blog</a></li>
          <li class="mb-1"><a class="block p-4 font-medium text-black hover:bg-gray-50" href="#">Support</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="pt-6"><a class="block mb-2 py-3 text-sm text-center border border-gray-200 hover:border-gray-400 font-bold" href="#">Login</a><a class="block py-3 text-sm text-center text-black bg-yellow-500 hover:bg-yellow-600 font-bold transition duration-200" href="#">Sign In</a></div>
      </div>
    </nav>
  </div>
</section>