<section class="pb-24">
<div class="h-64 lg:h-144">
<img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1043&q=80" alt="">
</div>
<div class="relative container px-4 mx-auto -mt-24">
<div class="max-w-5xl px-4 pt-12 lg:pt-20 mx-auto bg-white">
<div class="max-w-2xl mb-12 mx-auto text-center">
<div class="flex items-center justify-center mb-6 text-xs text-blue-500 font-semibold uppercase">
<a href="#">Home</a>
<span class="inline-block mx-2">
<svg class="text-blue-500 h-3 w-3" viewBox="0 0 8 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z"></path>
</svg>
</span>
<a href="#">Blog</a>
<span class="inline-block mx-2">
<svg class="text-blue-500 h-3 w-3" viewBox="0 0 8 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z"></path>
</svg>
</span>
<a href="#">Article</a>
</div>
<h2 class="mb-6 text-5xl text-blue-800 font-bold font-heading">Lorem ipsum dolor sit amet consectutar</h2>
<div class="flex items-center justify-center">
<div class="mr-6">
<img class="w-14 h-14 object-cover" src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">
</div>
<div class="text-left">
<h3 class="mb-2 text-lg text-gray-500 font-semibold font-heading">Sara Sampton</h3>
<p class="text-blue-500 text-xs">10 Jun 2021 | 19:40</p>
</div>
</div>
</div>
<div class="max-w-2xl mx-auto -mb-6">
<p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque eveniet est laborum exercitationem!</p>
<p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor illo ipsa magni dolore doloribus? Velit laboriosam est nostrum ducimus, amet enim sed quidem excepturi?</p>
<p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur aperiam ipsum vel facilis, quibusdam velit. Et, ipsam repellat? Possimus id exercitationem aut voluptatum cumque, nemo quaerat officiis accusamus.</p>
<p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor illo ipsa magni dolore doloribus? Velit laboriosam est nostrum ducimus, amet enim sed quidem excepturi?</p>
</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
