<section class="pt-40 pb-24 bg-blue-50">
<div class="relative container px-4 mx-auto">
<span class="absolute top-0 left-0 z-10 ml-12 lg:ml-32 -mt-20">
<svg class="text-blue-300 h-32 w-32" viewBox="0 0 146 111" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M84.0714 110V110.5H84.5714H138.196H138.696V110V59.1949V58.7227L138.225 58.6957L118.758 57.5828L144.455 1.20738L144.777 0.5H144H124.036H123.756L123.609 0.73884L84.1451 65.1689L84.0714 65.2891V65.4301V110ZM0.5 110V110.5H1H54.625H55.125V110V59.1949V58.723L54.6539 58.6958L35.4185 57.5833L61.1157 1.20738L61.4381 0.5H60.6607H40.6964H40.4172L40.2707 0.737725L0.57431 65.1678L0.5 65.2884V65.4301V110Z" stroke="currentColor"></path>
</svg>
</span>
<div class="relative flex flex-wrap items-center bg-white clip-path-right-top-sm -mx-3">
<div class="w-full lg:w-3/5 px-3">
<div class="max-w-sm mx-auto py-20 lg:py-0">
<h3 class="mb-3 text-3xl font-bold text-blue-800">Lorem ipsum dolor sit amet, consectetur</h3>
<p class="mb-10 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
<div class="max-w-max ml-auto">
<p class="mb-1 text-lg text-blue-500 font-semibold">Tom Harris</p>
<p class="text-sm text-gray-500">UI Designer</p>
</div>
</div>
</div>
<div class="w-full lg:w-2/5">
<img class="w-full lg:w-auto h-96 object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80" alt="">
</div>
</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
