Hero Responsive Video Embed- Tailwind Component

<section class="flex lg:flex-row flex-col w-full mx-auto bg-[#192a56] dark:bg-gray-800 px-2 sm:px-8 py-8 my-8 items-center">
  <div class="w-full lg:1/2 px-2 sm:px-8 items-center">
    <div class="lg:hidden">
      <div class="flex flex-row items-center justify-between">
        <div class="inline-flex items-center text-gray-300 text-sm sm:text-lg font-medium">
          <span
            class="flex-shrink-0 inline-flex mx-3 item-center justify-center leading-none bg-gray-200 dark:bg-gray-600 rounded-full">
            <img src="https://cdn-icons-png.flaticon.com/128/2035/2035692.png" alt="icon-small" class="w-8">
          </span>
          The Recording Academy
        </div>
        <h4 class="text-sm sm:text-lg font-medium text-gray-300 dark:text-gray-50">Live</h4>
      </div>
      <h1
        class="text-3xl sm:text-4xl font-medium py-4 xl:py-4 text-gray-100 dark:text-gray-50 sm:mr-8 leading-snug xl:leading-normal">
        64th Annual GRAMMY Award NFT
      </h1>
    </div>
    <div class="relative" style="padding-top: 56.25%">
      <iframe class="absolute inset-0 w-full h-full rounded-sm border border-white"
        src="https://www.youtube.com/embed/Aul35gjdFWM" title="YouTube video player" frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
    </div>
  </div>
  <div class="w-full lg:1/2 sm:px-8 items-center">
    <div class="hidden lg:block">
      <h4 class="font-medium text-gray-200 text-lg dark:text-gray-50">Live</h4>
      <h1
        class="text-3xl sm:text-4xl font-medium py-4 xl:py-4 text-gray-100 dark:text-gray-50 sm:mr-8 leading-snug xl:leading-normal">
        64th Annual GRAMMY Award NFT
      </h1>
      <div class="inline-flex items-center text-gray-200 text-lg font-medium">
        <span
          class="flex-shrink-0 inline-flex mx-3 item-center justify-center leading-none bg-gray-500 dark:bg-gray-600 rounded-full">
          <img src="https://cdn-icons-png.flaticon.com/128/2035/2035692.png" alt="icon bigger" class="w-14">
        </span>
        The Recording Academy
      </div>
    </div>
    <div class="flex flex-row mt-4 justify-between text-sm px-4">
      <p class="inline-flex items-center text-gray-200 uppercase">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-green-600" viewBox="0 0 20 20"
          fill="currentColor">
          <path fill-rule="evenodd"
            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.525a3.997 3.997 0 00.078-2.183l1.562-1.562C15.802 8.249 16 9.1 16 10zm-5.165 3.913l1.58 1.58A5.98 5.98 0 0110 16a5.976 5.976 0 01-2.516-.552l1.562-1.562a4.006 4.006 0 001.789.027zm-4.677-2.796a4.002 4.002 0 01-.041-2.08l-.08.08-1.53-1.533A5.98 5.98 0 004 10c0 .954.223 1.856.619 2.657l1.54-1.54zm1.088-6.45A5.974 5.974 0 0110 4c.954 0 1.856.223 2.657.619l-1.54 1.54a4.002 4.002 0 00-2.346.033L7.246 4.668zM12 10a2 2 0 11-4 0 2 2 0 014 0z"
            clip-rule="evenodd" />
        </svg>
        Green
      </p>
      <p class="uppercase text-gray-200">edition: open</p>
    </div>
    <div
      class="w-full   lg:w-auto flex-none flex flex-col-reverse   lg:flex-row   lg:items-start space-y-3 space-y-reverse  lg:space-y-0   lg:space-x-4 mt-10 mx-auto xl:mx-0">
      <div class="inline-block">
        <button type="button"
          class="w-full lg:w-auto items-center justify-center text-gray-300 hover:text-gray-100 font-medium leading-none bg-indigo-600 rounded-lg shadow-sm group-hover:shadow-lg py-3 px-5 border border-transparent transform-gpu hover:-translate-y-0.5 transition-all duration-150">
          Claim Free NFT
        </button>
      </div>
    </div>
  </div>
</section>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

  body {
    font-family: 'Poppins', sans-serif;
  }
</style>