Jumbotron Agency Trial - Tailwind Component
A simple jumbotron agency trial, it is use Tailwind CSS to create this beautiful sign in jumbotron tailwind component.
jumbotron
Loading component...
77 lines
<div class="flex lg:flex-row flex-col w-full mx-auto bg-[#F8EFBA] dark:bg-gray-800 px-8 py-8 my-8">
<div class="w-full lg:1/2 px-4 sm:px-16 items-center">
<h4 class="mt-4 sm:text-base font-medium text-gray-800 dark:text-gray-50">Digital Services</h4>
<h1
class="text-3xl sm:text-4xl font-medium py-4 xl:py-8 text-gray-800 dark:text-gray-50 sm:mr-8 leading-snug xl:leading-normal">
To improve response rates, it is crucial to use a multi-channel approach
</h1>
<p class="text-sm text-gray-600 dark:text-gray-100 mr-2 sm:mr-8 xl:mr-24">Lorem ipsum dolor sit amet consectetur
adipisicing elit.
Quibusdam, veritatis tenetur itaque amet cumque
libero
ab sit nemo laboriosam, laborum sint fugiat dolorum dicta nihil placeat id doloribus excepturi! Aspernatur minus
consectetur molestias, facere ad soluta illum provident vel enim eos ex voluptatibus culpa.
</p>
<button class="inline-flex mt-8 xl:mt-10 hover:px-4 py-3 hover:text-white hover:bg-gray-800 dark:text-gray-100 dark:hover:text-gray-800 dark:hover:bg-gray-100 focus:outline-none
transform active:scale-75 transition-transform">
Get Started
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ml-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</button>
</div>
<div class="w-full lg:1/2 mt-4 lg:mt-0 space-y-4 px-4 sm:px-16 md:px-32 lg:px-0 xl:mx-24 lg:mx-0 items-center">
<div
class="flex flex-col sm:flex-row border-2 border-gray-700 dark:border-gray-400 divide-y-2 sm:divide-y-0 sm:divide-x-2 divide-gray-700 dark:divide-gray-400 xl:ml-16 group">
<div class="flex w-full sm:w-1/4 items-center mx-auto group-hover:bg-[#f8c291] dark:group-hover:bg-gray-50 p-4">
<img src="https://cdn-icons-png.flaticon.com/128/3437/3437346.png" alt="DIGITAL ADS" class="w-16 h-16 mx-auto">
</div>
<div class="sm:w-3/4 pl-4 p-4">
<h2
class="cursor-pointer text-sm sm:text-base font-medium hover:underline hover:underline-offset-4 uppercase text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-50">
Digital ADS</h2>
<p class="text-sm mt-2 text-justify text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Rem omnis nulla
ratione quibusdam quaerat in magnam aspernatur. Accusamus, voluptatem eveniet?</p>
</div>
</div>
<div
class="flex flex-col sm:flex-row border-2 border-gray-700 dark:border-gray-400 divide-y-2 sm:divide-y-0 sm:divide-x-2 divide-gray-700 dark:divide-gray-400 xl:ml-16 group">
<div class="flex w-full sm:w-1/4 items-center mx-auto group-hover:bg-[#f8c291] dark:group-hover:bg-gray-50 p-4">
<img src="https://cdn-icons-png.flaticon.com/128/187/187207.png" alt="SOCIAL MEDIA CAMPAIGNS"
class="w-16 h-16 mx-auto">
</div>
<div class="sm:w-3/4 pl-4 p-4">
<h2
class="cursor-pointer text-sm sm:text-base font-medium hover:underline hover:underline-offset-4 uppercase text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-50">
social media campaigns</h2>
<p class="text-sm mt-2 text-justify text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Rem omnis nulla
ratione quibusdam quaerat in magnam aspernatur. Accusamus, voluptatem eveniet?</p>
</div>
</div>
<div
class="flex flex-col sm:flex-row border-2 border-gray-700 dark:border-gray-400 divide-y-2 sm:divide-y-0 sm:divide-x-2 divide-gray-700 dark:divide-gray-400 xl:ml-16 group">
<div class="flex w-full sm:w-1/4 items-center mx-auto group-hover:bg-[#f8c291] dark:group-hover:bg-gray-50 p-4">
<img src="https://cdn-icons-png.flaticon.com/128/552/552486.png" alt="CONTSCT CUSTOMERS DIRECTLY"
class="w-16 h-16 mx-auto">
</div>
<div class="sm:w-3/4 pl-4 p-4">
<h2
class="cursor-pointer text-sm sm:text-base font-medium hover:underline hover:underline-offset-4 uppercase text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-50">
Contsct Customers directly</h2>
<p class="text-sm mt-2 text-justify text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Rem omnis nulla
ratione quibusdam quaerat in magnam aspernatur. Accusamus, voluptatem eveniet?</p>
</div>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,400;0,900;1,500&display=swap');
body {
font-family: "Muli";
}
</style>