<section class="py-20">
<div class="container px-4 mx-auto mb-16">
<div class="max-w-2xl mx-auto text-center">
<div class="flex mb-2 items-center justify-center">
<a class="text-xs text-gray-200" href="#">Home</a>
<svg class="w-3 h-3 mx-1 text-gray-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
<a class="text-xs text-gray-200" href="#">Blog</a>
<svg class="w-3 h-3 mx-1 text-gray-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
<a class="text-xs text-gray-200" href="#">Article</a>
</div>
<h2 class="mb-6 text-4xl lg:text-5xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<div class="flex items-center justify-center">
<div class="mr-6">
<img class="w-16 h-16 object-cover rounded-full" src="mockup-assets/images/gray-300-avatar.png" alt="">
</div>
<div>
<h3 class="text-2xl font-bold font-heading">Danny Bailey</h3>
<p class="text-lg text-gray-500">February 26, 2021</p>
</div>
</div>
</div>
</div>
<div class="h-112">
<img class="w-full h-full object-cover" src="mockup-assets/images/gray-500-horizontal.png" alt="">
</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
