Hero Responsive Video Embed- Tailwind Component
A simple hero with embed video, this is made with Tailwind CSS.
embed
Loading component...
71 lines
<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>