Banner Section Using Tailwind UI
A Banner Section component designed with Tailwind offers an eye-catching and informative section for highlighting important announcements, promotions, or key messages, enhancing user engagement and visibility.
banner
Loading component...
33 lines
<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>