The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<div class="py-16">
<div class="container m-auto px-6 text-gray-600 dark:text-gray-300 md:px-12 xl:px-6">
<div class="mb-20 space-y-4 px-6 md:px-0">
<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white md:text-4xl">
We have some fans.
</h2>
</div>
<div class="md:columns-2 lg:columns-3 gap-8 space-y-8">
<div class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
<div class="flex gap-4">
<img class="w-12 h-12 rounded-full" src="https://pbs.twimg.com/profile_images/1559671811780087810/Y4E8X2do_400x400.jpg" alt="" width="" height="" loading="lazy">
<div>
<h6 class="text-lg font-medium text-gray-700 dark:text-white">Eric Ampire</h6>
<p class="text-sm text-gray-500 dark:text-gray-400">Mobile dev</p>
</div>
</div>
<p class="mt-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aliquid quo eum quae quos illo earum ipsa doloribus nostrum minus libero aspernatur laborum cum, a suscipit, ratione ea totam ullam! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam deleniti aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at reprehenderit, veritatis harum et rerum.</p>
</div>
<div class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
<div class="flex gap-4">
<img class="w-12 h-12 rounded-full" src="https://pbs.twimg.com/profile_images/1372441824560771075/DTcuXT0Z_400x400.jpg" alt="" width="" height="" loading="lazy">
<div>
<h6 class="text-lg font-medium text-gray-700 dark:text-white">Rodrigo Aguilar</h6>
<p class="text-sm text-gray-500 dark:text-gray-400">Creator of Tailwind Awesome</p>
</div>
</div>
<p class="mt-8"> Lorem ipsum dolor laboriosam deleniti aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at reprehenderit, veritatis harum et rerum.</p>
</div>
<div class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
<div class="flex gap-4">
<img class="w-12 h-12 rounded-full" src="https://pbs.twimg.com/profile_images/1362367807887974401/kuJ1OFT1_400x400.jpg" alt="" width="" height="" loading="lazy">
<div>
<h6 class="text-lg font-medium text-gray-700 dark:text-white">Adam Wathan</h6>
<p class="text-sm text-gray-500 dark:text-gray-400">Creator of Tailwindcss</p>
</div>
</div>
<p class="mt-8">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam deleniti aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at reprehenderit, veritatis harum et rerum.</p>
</div>
<div class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
<div class="flex gap-4">
<img class="w-12 h-12 rounded-full" src="https://pbs.twimg.com/profile_images/1511686703672606725/_DV4Mfjd_400x400.jpg" alt="" width="" height="" loading="lazy">
<div>
<h6 class="text-lg font-medium text-gray-700 dark:text-white">Dan Kyungu</h6>
<p class="text-sm text-gray-500 dark:text-gray-400">Mobile dev</p>
</div>
</div>
<p class="mt-8">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam deleniti aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at reprehenderit, veritatis harum et rerum.</p>
</div>
<div class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
<div class="flex gap-4">
<img class="w-12 h-12 rounded-full" src="images/first_user.webp" alt="" width="" height="" loading="lazy">
<div>
<h6 class="text-lg font-medium text-gray-700 dark:text-white">John Doe</h6>
<p class="text-sm text-gray-500 dark:text-gray-400">Creator dev</p>
</div>
</div>
<p class="mt-8"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam deleniti aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at reprehenderit, veritatis harum et rerum.</p>
</div>
<div class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
<div class="flex gap-4">
<img class="w-12 h-12 rounded-full" src="images/second_user.webp" alt="" width="" height="" loading="lazy">
<div>
<h6 class="text-lg font-medium text-gray-700 dark:text-white">Randy Doe</h6>
<p class="text-sm text-gray-500 dark:text-gray-400">Mobile dev</p>
</div>
</div>
<p class="mt-8">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam deleniti aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at reprehenderit, veritatis harum et rerum.</p>
</div>
</div>
</div>
</div>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<!-- require JavaScript for carousel to work
eg : https://swiperjs.com/
-->>
<div class="py-16">
<div class="xl:container m-auto px-6 text-gray-600 dark:text-gray-300 md:px-12 xl:px-6">
<h2 class="mb-12 text-center text-2xl font-bold text-gray-800 dark:text-white md:text-4xl">
What's our customers say
</h2>
<div class="swiper mySwiper">
<div class="swiper-wrapper pb-6">
<div class="swiper-slide !bg-transparent">
<div class="mx-auto space-y-6 text-center md:w-8/12 lg:w-7/12">
<img
class="mx-auto !h-16 !w-16 rounded-full"
src="images/avatars/second_user.webp"
alt="user avatar"
height="220"
width="220"
loading="lazy"
/>
<p>
<span class="font-serif">"</span> Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat repellat perspiciatis excepturi est. Non ipsum iusto
aliquam consequatur repellat provident, omnis ut, sapiente voluptates veritatis
cum deleniti repudiandae ad doloribus. <span class="font-serif">"</span>
</p>
<div>
<h6 class="text-lg font-semibold leading-none">John Doe</h6>
<span class="text-xs text-gray-500">Product Designer</span>
</div>
<img
class="mx-auto !w-28"
src="images/clients/client-4.png"
alt="company logo"
height="400"
width="142"
loading="lazy"
/>
</div>
</div>
<div class="swiper-slide !bg-transparent">
<div class="mx-auto space-y-6 text-center md:w-8/12 lg:w-7/12">
<img
class="mx-auto !h-16 !w-16 rounded-full"
src="images/avatars/third_user.webp"
alt="user avatar"
height="220"
width="220"
loading="lazy"
/>
<p>
<span class="font-serif">"</span> Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat repellat perspiciatis excepturi est. Non ipsum iusto
aliquam consequatur repellat provident, omnis ut, sapiente voluptates veritatis
cum deleniti repudiandae ad doloribus. <span class="font-serif">"</span>
</p>
<div>
<h6 class="text-lg font-semibold leading-none">John Doe</h6>
<span class="text-xs text-gray-500">Product Designer</span>
</div>
<img
class="mx-auto !w-28"
src="images/clients/client-3.png"
alt="company logo"
height="400"
width="142"
loading="lazy"
/>
</div>
</div>
<div class="swiper-slide !bg-transparent">
<div class="mx-auto space-y-6 text-center md:w-8/12 lg:w-7/12">
<img
class="mx-auto !h-16 !w-16 rounded-full"
src="images/avatars/first_user.webp"
alt="user avatar"
height="220"
width="220"
loading="lazy"
/>
<p>
<span class="font-serif">"</span> Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat repellat perspiciatis excepturi est. Non ipsum iusto
aliquam consequatur repellat provident, omnis ut, sapiente voluptates veritatis
cum deleniti repudiandae ad doloribus. <span class="font-serif">"</span>
</p>
<div>
<h6 class="text-lg font-semibold leading-none">John Doe</h6>
<span class="text-xs text-gray-500">Product Designer</span>
</div>
<img
class="mx-auto !w-28"
src="images/clients/client-8.png"
alt="company logo"
height="400"
width="142"
loading="lazy"
/>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<!-- require JavaScript for carousel to work
eg : https://swiperjs.com/
-->>
<div class="bg-gray-50 dark:bg-gray-900 py-16">
<div class="container m-auto text-gray-600 dark:text-gray-300 md:px-12 xl:px-6">
<div class="mb-12 space-y-4 px-6 md:px-0">
<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white md:text-4xl">
We have some fans.
</h2>
<p class="text-center">
We don't like to brag, but we don't mind letting our customers do it for us. <br />
Here are a few nice things folks have said about our themes over the years.
</p>
</div>
<div class="swiper mySwiper">
<div class="swiper-wrapper pb-8">
<div class="swiper-slide !bg-transparent px-6 md:px-0">
<div class="p-2 border border-gray-100 dark:border-gray-700 rounded-3xl bg-white dark:bg-gray-800 shadow-2xl shadow-gray-600/10 dark:shadow-none md:mx-auto lg:w-10/12 xl:w-8/12">
<div class="grid md:grid-cols-5">
<img
src="images/card.webp"
class="md:col-span-2 h-full w-full rounded-2xl object-cover"
alt="image"
width="640"
height="422"
loading="lazy"
/>
<div class="md:col-span-3 mx-auto space-y-6 p-6 text-center sm:p-8">
<div class="mx-auto w-24">
<img
src="images/clients/client-4.png"
alt="company logo"
height="400"
width="142"
loading="lazy"
/>
</div>
<p>
<span class="font-serif">"</span> Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat repellat perspiciatis excepturi est. Non ipsum iusto
aliquam consequatur repellat provident, omnis ut, sapiente voluptates
veritatis cum deleniti repudiandae ad doloribus.
<span class="font-serif">"</span>
</p>
<h6 class="text-lg font-semibold leading-none">John Doe</h6>
</div>
</div>
</div>
</div>
<div class="swiper-slide !bg-transparent px-6 md:px-0">
<div class="p-2 border border-gray-100 dark:border-gray-700 rounded-3xl bg-white dark:bg-gray-800 shadow-2xl shadow-gray-600/10 dark:shadow-none md:mx-auto lg:w-10/12 xl:w-8/12">
<div class="grid md:grid-cols-5">
<img
src="images/card3.webp"
class="md:col-span-2 h-full w-full rounded-2xl object-cover"
alt="image"
width="640"
height="422"
loading="lazy"
/>
<div class="md:col-span-3 mx-auto space-y-6 p-6 text-center sm:p-8">
<div class="mx-auto w-24">
<img
src="images/clients/client-3.png"
alt="company logo"
height="400"
width="142"
loading="lazy"
/>
</div>
<p>
<span class="font-serif">"</span> Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat repellat perspiciatis excepturi est. Non ipsum iusto
aliquam consequatur repellat provident, omnis ut, sapiente voluptates
veritatis cum deleniti repudiandae ad doloribus.
<span class="font-serif">"</span>
</p>
<h6 class="text-lg font-semibold leading-none">John Doe</h6>
</div>
</div>
</div>
</div>
<div class="swiper-slide !bg-transparent px-6 md:px-0">
<div class="p-2 border border-gray-100 dark:border-gray-700 rounded-3xl bg-white dark:bg-gray-800 shadow-2xl shadow-gray-600/10 dark:shadow-none md:mx-auto lg:w-10/12 xl:w-8/12">
<div class="grid md:grid-cols-5">
<img
src="images/card2.webp"
class="md:col-span-2 h-full w-full rounded-2xl object-cover"
alt="image"
width="640"
height="422"
loading="lazy"
/>
<div class="md:col-span-3 mx-auto space-y-6 p-6 text-center sm:p-8">
<div class="mx-auto w-24">
<img
src="images/clients/client-8.png"
alt="company logo"
height="400"
width="142"
loading="lazy"
/>
</div>
<p>
<span class="font-serif">"</span> Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat repellat perspiciatis excepturi est. Non ipsum iusto
aliquam consequatur repellat provident, omnis ut, sapiente voluptates
veritatis cum deleniti repudiandae ad doloribus.
<span class="font-serif">"</span>
</p>
<h6 class="text-lg font-semibold leading-none">John Doe</h6>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<div class="py-16">
<div class="xl:container m-auto px-6 text-gray-600 dark:text-gray-300 md:px-12 xl:px-6">
<h2 class="mb-12 text-center text-2xl font-bold text-gray-800 dark:text-white md:text-4xl">
What's our customers say
</h2>
<div class="grid gap-8 md:grid-rows-2 lg:grid-cols-2">
<div
class="row-span-2 rounded-3xl border border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-8 text-center shadow-2xl shadow-gray-600/10 dark:shadow-none"
>
<div class="flex h-full flex-col justify-center space-y-4">
<img
class="mx-auto h-20 w-20 rounded-full"
src="images/avatars/second_user.webp"
alt="user avatar"
height="220"
width="220"
loading="lazy"
/>
<p class="md:text-xl">
<span class="font-serif">"</span> Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quaerat repellat perspiciatis excepturi est. Non ipsum iusto aliquam
consequatur repellat provident, omnis ut, sapiente voluptates veritatis cum deleniti
repudiandae ad doloribus. <span class="font-serif">"</span>
</p>
<div>
<h6 class="text-lg font-semibold leading-none">Jane Doe</h6>
<span class="text-xs text-gray-500">Product Designer</span>
</div>
</div>
</div>
<div class="rounded-3xl sm:flex sm:space-x-8 border border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-8 text-center shadow-2xl shadow-gray-600/10 dark:shadow-none">
<img
class="mx-auto h-20 w-20 rounded-full"
src="images/avatars/first_user.webp"
alt="user avatar"
height="220"
width="220"
loading="lazy"
/>
<div class="mt-4 space-y-4 text-center sm:mt-0 sm:text-left">
<p >
<span class="font-serif">"</span> Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quaerat repellat perspiciatis excepturi est. Non ipsum iusto aliquam
consequatur repellat provident, omnis ut, sapiente voluptates veritatis cum deleniti
repudiandae ad doloribus. <span class="font-serif">"</span>
</p>
<div>
<h6 class="text-lg font-semibold leading-none">Jane Doe</h6>
<span class="text-xs text-gray-500">Product Designer</span>
</div>
</div>
</div>
<div class="rounded-3xl sm:flex sm:space-x-8 border border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-8 text-center shadow-2xl shadow-gray-600/10 dark:shadow-none">
<img
class="mx-auto h-20 w-20 rounded-full"
src="images/avatars/third_user.webp"
alt="user avatar"
height="220"
width="220"
loading="lazy"
/>
<div class="mt-4 space-y-4 text-center sm:mt-0 sm:text-left">
<p>
<span class="font-serif">"</span> Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quaerat repellat perspiciatis excepturi est. Non ipsum iusto aliquam
consequatur repellat provident, omnis ut, sapiente voluptates veritatis cum deleniti
repudiandae ad doloribus. <span class="font-serif">"</span>
</p>
<div>
<h6 class="text-lg font-semibold leading-none">Jane Doe</h6>
<span class="text-xs text-gray-500">Product Designer</span>
</div>
</div>
</div>
</div>
</div>
</div>