<section x-data="{ showContent: false }" class="relative py-12 lg:py-24">
<div class="container mx-auto px-4">
<div class="flex flex-wrap items-center justify-between mb-20 -mx-4">
<div class="w-full sm:w-1/2 px-4 mb-10 sm:mb-0">
<h1 class="font-heading text-5xl sm:text-6xl">Blog</h1>
</div>
<div class="w-full sm:w-1/2 px-4 sm:text-right">
<a x-on:click.prevent="showContent = true" :class="{'hidden': showContent}" href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-black hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-300">
<span class="mr-2">See all</span>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.75 10H15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10 4.75L15.25 10L10 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-1/2 xl:w-7/12 px-4 mb-8 lg:mb-0">
<div>
<img class="block w-full h-64 md:h-112 mb-8 rounded-3xl object-cover" src="flow-assets/blog/image-lg-post.png" alt="">
<div class="mb-6">
<a href="#" class="inline-block mr-2 px-2 text-sm font-medium hover:bg-gray-50 border rounded-full">Solar Power</a>
<a href="#" class="inline-block px-2 text-sm font-medium hover:bg-gray-50 border rounded-full">Solutions</a>
</div>
<a href="#" class="block group max-w-2xl">
<h3 class="text-3xl font-medium group-hover:text-teal-600 transition duration-200 mb-4">Harnessing the Power of the Sun: Exploring the World of Solar Energy</h3>
<p class="text-lg text-gray-700 mb-6">Solar energy is revolutionizing the way we power our world. In this blog post, we'll delve into the incredible potential of solar technology, its environmental...</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full" src="flow-assets/blog/avatar-1.png" alt="">
<div class="flex items-center ml-4">
<span class="text-sm font-medium">Leslie Alexander</span>
<span class="mx-2 sm:mx-4">
<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2" cy="2" r="2" fill="#929C9A"></circle>
</svg>
</span>
<span class="text-sm font-medium">9 min read</span>
</div>
</div>
</a>
</div>
</div>
<div class="w-full lg:w-1/2 xl:w-5/12 px-4">
<div class="max-w-lg">
<a href="#" class="flex flex-wrap sm:flex-nowrap group mb-8 items-center">
<img class="block w-44 h-44 rounded-2xl" src="flow-assets/blog/image-sm-1.png" alt="">
<div class="mt-6 sm:mt-0 sm:ml-8">
<h3 class="text-2xl font-medium group-hover:text-teal-600 transition duration-200 mb-6">Wind Power: A Breath of Fresh Air for Clean Energy Enthusiasts</h3>
<div class="flex items-center">
<img class="w-8 h-8 rounded-full" src="flow-assets/blog/circle-avatar-1.png" alt="">
<div class="flex items-center ml-4">
<span class="text-sm font-medium">Wade Warren</span>
<span class="mx-2 sm:mx-4">
<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2" cy="2" r="2" fill="#929C9A"></circle>
</svg>
</span>
<span class="text-sm font-medium">7 min read</span>
</div>
</div>
</div>
</a>
<a href="#" class="flex flex-wrap sm:flex-nowrap group mb-8 items-center">
<img class="block w-44 h-44 rounded-2xl" src="flow-assets/blog/image-sm-2.png" alt="">
<div class="mt-6 sm:mt-0 sm:ml-8">
<h3 class="text-2xl font-medium group-hover:text-teal-600 transition duration-200 mb-6">From Trash to Treasure: The Promising World of Biomass Energy</h3>
<div class="flex items-center">
<img class="w-8 h-8 rounded-full" src="flow-assets/blog/circle-avatar-2.png" alt="">
<div class="flex items-center ml-4">
<span class="text-sm font-medium">Jenny Wilson</span>
<span class="mx-2 sm:mx-4">
<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2" cy="2" r="2" fill="#929C9A"></circle>
</svg>
</span>
<span class="text-sm font-medium">7 min read</span>
</div>
</div>
</div>
</a>
<a href="#" class="flex flex-wrap sm:flex-nowrap group items-center">
<img class="block w-44 h-44 rounded-2xl" src="flow-assets/blog/image-sm-3.png" alt="">
<div class="mt-6 sm:mt-0 sm:ml-8">
<h3 class="text-2xl font-medium group-hover:text-teal-600 transition duration-200 mb-6">Hydrogen: Fueling the Green Energy Revolution</h3>
<div class="flex items-center">
<img class="w-8 h-8 rounded-full" src="flow-assets/blog/circle-avatar-3.png" alt="">
<div class="flex items-center ml-4">
<span class="text-sm font-medium">Leslie Alexander</span>
<span class="mx-2 sm:mx-4">
<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2" cy="2" r="2" fill="#929C9A"></circle>
</svg>
</span>
<span class="text-sm font-medium">5 min read</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div :class="{'hidden': !showContent}" class="hidden flex flex-wrap mt-16 -mx-4">
<div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
<div class="max-w-lg">
<a href="#" class="flex flex-wrap sm:flex-nowrap group mb-8 items-center">
<img class="block w-44 h-44 rounded-2xl" src="flow-assets/blog/image-sm-1.png" alt="">
<div class="mt-6 sm:mt-0 sm:ml-8">
<h3 class="text-2xl font-medium group-hover:text-teal-600 transition duration-200 mb-6">Wind Power: A Breath of Fresh Air for Clean Energy Enthusiasts</h3>
<div class="flex items-center">
<img class="w-8 h-8 rounded-full" src="flow-assets/blog/circle-avatar-1.png" alt="">
<div class="flex items-center ml-4">
<span class="text-sm font-medium">Wade Warren</span>
<span class="mx-2 sm:mx-4">
<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2" cy="2" r="2" fill="#929C9A"></circle>
</svg>
</span>
<span class="text-sm font-medium">7 min read</span>
</div>
</div>
</div>
</a>
<a href="#" class="flex flex-wrap sm:flex-nowrap group items-center">
<img class="block w-44 h-44 rounded-2xl" src="flow-assets/blog/image-sm-2.png" alt="">
<div class="mt-6 sm:mt-0 sm:ml-8">
<h3 class="text-2xl font-medium group-hover:text-teal-600 transition duration-200 mb-6">From Trash to Treasure: The Promising World of Biomass Energy</h3>
<div class="flex items-center">
<img class="w-8 h-8 rounded-full" src="flow-assets/blog/circle-avatar-2.png" alt="">
<div class="flex items-center ml-4">
<span class="text-sm font-medium">Jenny Wilson</span>
<span class="mx-2 sm:mx-4">
<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2" cy="2" r="2" fill="#929C9A"></circle>
</svg>
</span>
<span class="text-sm font-medium">7 min read</span>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="w-full lg:w-1/2 px-4">
<div class="max-w-lg">
<a href="#" class="flex flex-wrap sm:flex-nowrap group mb-8 items-center">
<img class="block w-44 h-44 rounded-2xl" src="flow-assets/blog/image-sm-1.png" alt="">
<div class="mt-6 sm:mt-0 sm:ml-8">
<h3 class="text-2xl font-medium group-hover:text-teal-600 transition duration-200 mb-6">Wind Power: A Breath of Fresh Air for Clean Energy Enthusiasts</h3>
<div class="flex items-center">
<img class="w-8 h-8 rounded-full" src="flow-assets/blog/circle-avatar-1.png" alt="">
<div class="flex items-center ml-4">
<span class="text-sm font-medium">Wade Warren</span>
<span class="mx-2 sm:mx-4">
<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2" cy="2" r="2" fill="#929C9A"></circle>
</svg>
</span>
<span class="text-sm font-medium">7 min read</span>
</div>
</div>
</div>
</a>
<a href="#" class="flex flex-wrap sm:flex-nowrap group items-center">
<img class="block w-44 h-44 rounded-2xl" src="flow-assets/blog/image-sm-2.png" alt="">
<div class="mt-6 sm:mt-0 sm:ml-8">
<h3 class="text-2xl font-medium group-hover:text-teal-600 transition duration-200 mb-6">From Trash to Treasure: The Promising World of Biomass Energy</h3>
<div class="flex items-center">
<img class="w-8 h-8 rounded-full" src="flow-assets/blog/circle-avatar-2.png" alt="">
<div class="flex items-center ml-4">
<span class="text-sm font-medium">Jenny Wilson</span>
<span class="mx-2 sm:mx-4">
<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2" cy="2" r="2" fill="#929C9A"></circle>
</svg>
</span>
<span class="text-sm font-medium">7 min read</span>
</div>
</div>
</div>
</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
