Banner Section Using Tailwind UI

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
    href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
    rel="stylesheet">

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

<!-- inspired design by https://dribbble.com/shots/22323702-Pixel-Digital-Agency-Website-Design  -->

<div class="max-w-screen-xl mx-auto my-10">
    <div class="flex flex-col items-center text-white bg-gray-900 shadow-lg to sm:flex-row">
        <img class="object-cover w-full h-72 sm:w-1/3"
            src="https://images.unsplash.com/photo-1637441511291-d5994ea09a6c?auto=format&fit=crop&q=80&w=1632&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="" />
            
        <div class="w-full px-4 py-32 mx-auto text-center sm:h-full sm:w-1/3 sm:py-4">
            <h1 class="text-3xl font-medium text-center uppercase sm:text-2xl lg:text-4xl xl:text-5xl">Transforming
                ideas into digital agency</h1>
            <button type="button"
                class="mt-10 text-gray-200 hover:text-gray-900 border border-gray-200 hover:bg-gray-50 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium text-sm px-8 py-2.5 text-center dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800">Show
                More</button>
        </div>

        <img class="object-cover w-full h-72 sm:w-1/3"
            src="https://images.unsplash.com/photo-1676372971824-ed309f425e21?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE5fHx8ZW58MHx8fHx8"
            alt="" />
    </div>
</div>