Hero Center Section Using Tailwind UI
The Tailwind CSS-powered hero center section exudes a striking visual presence, ensuring your content takes center stage with style.
section
Loading component...
68 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>
</head>
<section class="text-gray-600 body-font bg-[#F3EDE6] py-12">
<div class="container flex flex-col items-center justify-center px-5 mx-auto">
<div class="w-full text-center lg:max-w-5xl">
<h1 class="mb-4 text-4xl font-medium text-gray-900 title-font lg:text-7xl">Hassle-free incorporation and expert
accounting for better businesses</h1>
<div class="flex justify-center mt-8">
<button
class="inline-flex px-6 py-2 text-base text-white bg-indigo-500 border-0 rounded-full focus:outline-none hover:bg-indigo-600 md:text-lg">Get
Started</button>
<button
class="inline-flex px-6 py-2 ml-4 text-base text-gray-700 border border-indigo-600 rounded-full focus:outline-none hover:bg-gray-200 md:text-lg">Watch
Demo</button>
</div>
<div class="flex items-center justify-center mt-8 space-x-2">
<img class="w-8 h-8" src="https://cdn.worldvectorlogo.com/logos/google-g-2015.svg" alt="">
<span class="text-base font-normal text-black md:text-xl">4,0</span>
<div class="flex items-center justify-center">
<div class="flex items-center">
<svg class="w-5 h-5 mx-1 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path
d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
</svg>
<svg class="w-5 h-5 mx-1 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path
d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
</svg>
<svg class="w-5 h-5 mx-1 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path
d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
</svg>
<svg class="w-5 h-5 mx-1 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path
d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
</svg>
<svg class="mx-1 w-5 h-5 fill-[#F3EDE6] text-yellow-500 stroke-current" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path
d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
</svg>
</div>
</div>
<span class="text-base font-normal text-black md:text-xl">530 reviews</span>
</div>
</div>
<img class="hidden object-cover object-center w-5/6 mt-10 md:block rounded-xl" alt="hero"
src="https://strapi-cdn.osome.com/full_intro_sg_main_desktop_bcbe03c533.webp">
<img class="object-cover object-center w-5/6 mt-10 md:hidden rounded-xl" alt="hero"
src="https://strapi-cdn.osome.com/w327_intro_sg_main_mobile_992c8280f3.webp">
</div>
</section>