<section class="py-24 md:py-40 bg-gray-100">
<div class="container px-4 mx-auto">
<div class="flex items-center mb-24">
<span class="font-heading text-xl">07</span>
<div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
<span class="font-heading text-xl">Our Blog</span>
</div>
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
<img class="block mx-auto" src="wrexa-assets/images/graphic-purple.png" alt="">
</div>
<div class="w-full lg:w-1/2 px-4">
<div class="max-w-lg mx-auto">
<div class="mb-12">
<span class="inline-block px-5 py-2 mr-6 text-sm bg-white rounded-full">News</span>
<span class="font-light text-sm text-gray-700">January 13, 2022</span>
</div>
<h2 class="font-heading text-4xl sm:text-5xl mb-10">
<span>Your home:</span>
<span>Designed by experts, inspired by real life</span>
</h2>
<p class="max-w-md font-light mb-8">The house by the pond cras ornare, some chords for a three moments, like a sense of truth.</p>
<div class="mb-16"><a class="inline-block mr-6 text-indigo-500 hover:text-indigo-600" href="#">#interiodesign</a><a class="inline-block mr-6 text-indigo-500 hover:text-indigo-600" href="#">#design</a><a class="inline-block text-indigo-500 hover:text-indigo-600" href="#">#application</a></div>
<a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Learn More</a>
</div>
</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
