<header class="bg-orange-50 dark:bg-gray-900">
<div class="mx-auto max-w-screen-xl p-4 sm:p-8 md:p-12 lg:p-20">
<div class="grid grid-cols-12 items-center gap-y-8 sm:gap-8">
<div class="col-span-12 md:col-span-6">
<h1 class="text-3xl font-medium text-gray-900 dark:text-yellow-500 md:text-4xl lg:text-5xl">Increase your performance on Social media</h1>
<p class="mt-5 text-sm text-gray-700 dark:text-gray-100">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam corporis facere sequi laborum? Reiciendis temporibus distinctio, ipsa numquam repellat consectetur incidunt tempora tempore, voluptate, doloremque eos nemo laborum enim dolorem.</p>
<div class="mt-5 flex flex-col items-start gap-y-4 sm:flex-row sm:items-center sm:gap-x-2">
<a class="cursor-pointer rounded-lg bg-yellow-300 px-4 py-3 text-sm font-bold shadow transition-all hover:scale-95 focus:scale-95">GET STARTED</a>
<div class="flex items-center gap-x-4">
<div class="inline-flex items-center rounded-full border p-1 dark:border-gray-700">
<img class="h-12 w-12 rounded-full border-4 border-white object-cover" src="https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<img class="-ml-2 h-11 w-11 rounded-full border-4 border-white object-cover" src="https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<img class="-ml-2 h-10 w-10 rounded-full border-4 border-white object-cover" src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<div class="-mr-4 text-yellow-400">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
</svg>
</div>
</div>
<div>
<div class="text-xs text-gray-600 dark:text-gray-400">RATING</div>
<strong class="text-lg text-gray-900 dark:text-gray-200">5.00</strong>
</div>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6">
<div class="flex h-[300px] gap-x-2 md:h-[500px]">
<img class="h-full w-1/2 object-cover" src="https://images.pexels.com/photos/4345410/pexels-photo-4345410.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="" />
<img class="h-full w-1/2 object-cover" src="https://images.pexels.com/photos/1092644/pexels-photo-1092644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="" />
</div>
</div>
</div>
</div>
</header>
