<section class="bg-coolGray-50 overflow-hidden">
<div class="relative container mx-auto px-4">
<img class="hidden md:block absolute bottom-0 right-0 md:w-10/12 lg:w-2/3 xl:w-auto -mr-52 lg:-mr-16 xl:mr-8 2xl:mr-24 z-10" src="asitrastudio-assets/cta/woman-cta-right.png" alt="">
<div class="relative pt-12 md:pt-24 md:pb-36 xl:pt-36 lg:max-w-3xl">
<span class="block mb-4 text-sm text-coolGray-600">Lorem Ipsum</span>
<div class="max-w-sm sm:max-w-none">
<h1 class="relative font-heading text-4xl xs:text-6xl sm:text-8xl md:text-10xl tracking-tighter mb-14 z-10">
<span>Share your travels with</span>
<span></span>
<span class="inline-block text-coolGray-500 border-b-4 border-coolGray-500">friends & family</span>
</h1>
</div>
<div class="relative z-10 flex flex-col sm:flex-row flex-wrap">
<a class="group inline-flex mb-3 sm:mb-0 sm:mr-4 py-5 px-8 font-medium text-white leading-none items-center justify-center bg-blue-500 hover:bg-black rounded-full transition duration-150" href="#">
<span class="mr-2.5">Get consulation</span>
<span class="group-hover:rotate-45 transform transition duration-75">
<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</a>
<a class="group inline-flex py-5 px-8 font-medium text-black hover:text-white leading-none items-center justify-center border-1.5 border-black hover:bg-black rounded-full transition duration-150" href="#">
<span class="mr-2.5">Get consulation</span>
<span class="group-hover:rotate-45 transform transition duration-75">
<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</a>
</div>
<img class="block mt-6 md:hidden" src="asitrastudio-assets/cta/woman-cta-right.png" alt="">
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
