<section class="py-26 bg-white" x-data="{ category: '', showContent: false }" x-init="category = $refs.category1.textContent">
<div class="container px-4 mx-auto">
<div class="max-w-4xl mx-auto mb-16 text-center">
<span class="text-lg font-extrabold text-indigo-500">Section label</span>
<h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-4">Our mission is to make knowledge and news accessible for everyone.</h1>
<p class="text-xl font-extrabold leading-8 mb-12">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
<div class="inline-flex w-full max-w-md p-4 items-center bg-white border-2 border-indigo-900 rounded shadow">
<a class="text-indigo-900 hover:text-indigo-800" href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.94731 18.6997 5.81279 16.9855 4.27665C15.2714 2.74051 13.0338 1.91951 10.7329 1.98247C8.43203 2.04543 6.24272 2.98757 4.61514 4.61515C2.98756 6.24273 2.04543 8.43204 1.98247 10.7329C1.91951 13.0338 2.7405 15.2714 4.27664 16.9855C5.81278 18.6997 7.9473 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7737 20.4936 21.8481 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5064 21.8481 21.617 21.7737 21.71 21.68C21.8902 21.4935 21.991 21.2443 21.991 20.985C21.991 20.7257 21.8902 20.4765 21.71 20.29ZM11 18C9.61553 18 8.26215 17.5895 7.111 16.8203C5.95986 16.0511 5.06265 14.9579 4.53284 13.6788C4.00303 12.3997 3.8644 10.9922 4.1345 9.63437C4.4046 8.2765 5.07128 7.02922 6.05025 6.05026C7.02922 5.07129 8.2765 4.4046 9.63436 4.13451C10.9922 3.86441 12.3997 4.00303 13.6788 4.53285C14.9579 5.06266 16.0511 5.95987 16.8203 7.11101C17.5895 8.26216 18 9.61553 18 11C18 12.8565 17.2625 14.637 15.9497 15.9498C14.637 17.2625 12.8565 18 11 18Z" fill="#171952"></path>
</svg>
</a>
<input class="bg-transparent px-3 text-lg font-extrabold text-indigo-900 placeholder-indigo-900 outline-none" type="search" placeholder="Search">
</div>
</div>
<div class="mb-10">
<div class="lg:flex items-center -mb-4">
<a x-ref="category1" x-on:click.prevent="category = $refs.category1.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category != $refs.category1.textContent }" href="#">All Categories</a>
<a x-ref="category2" x-on:click.prevent="category = $refs.category2.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-gray-400 hover:text-gray-500 font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category != $refs.category2.textContent }" href="#">Technology</a>
<a x-ref="category3" x-on:click.prevent="category = $refs.category3.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-gray-400 hover:text-gray-500 font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category != $refs.category3.textContent }" href="#">Development</a>
<a x-ref="category4" x-on:click.prevent="category = $refs.category4.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-gray-400 hover:text-gray-500 font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category != $refs.category4.textContent }" href="#">Marketing</a>
<a x-ref="category5" x-on:click.prevent="category = $refs.category5.textContent" class="inline-block mb-4 text-xl text-gray-400 hover:text-gray-500 font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category != $refs.category5.textContent }" href="#">Startup</a>
</div>
</div>
<div class="flex flex-wrap -mx-4 -mb-8">
<div class="w-full lg:w-1/2 px-4 mb-8">
<div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
<img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/laptops.jpeg" alt="">
<div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
<span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
<p class="text-xl font-bold text-gray-400 mb-2">John Doe • 19 Jan 2022</p>
<h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
<p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
<a class="inline-block text-xl font-bold text-indigo-500 hover:text-indigo-600" href="#">Read More</a>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-4 mb-8">
<div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
<img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/laptops2.jpeg" alt="">
<div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
<span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
<p class="text-xl font-bold text-gray-400 mb-2">John Doe • 19 Jan 2022</p>
<h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
<p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
<a class="inline-block text-xl font-bold text-indigo-500 hover:text-indigo-600" href="#">Read More</a>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-4 mb-8">
<div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
<img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/office1.jpeg" alt="">
<div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
<span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
<p class="text-xl font-bold text-gray-400 mb-2">John Doe • 19 Jan 2022</p>
<h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
<p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
<a class="inline-block text-xl font-bold text-indigo-500 hover:text-indigo-600" href="#">Read More</a>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-4 mb-8">
<div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
<img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/office2.jpeg" alt="">
<div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
<span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
<p class="text-xl font-bold text-gray-400 mb-2">John Doe • 19 Jan 2022</p>
<h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
<p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
<a class="inline-block text-xl font-bold text-indigo-500 hover:text-indigo-600" href="#">Read More</a>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-4 mb-8">
<div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
<img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/office3.jpeg" alt="">
<div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
<span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
<p class="text-xl font-bold text-gray-400 mb-2">John Doe • 19 Jan 2022</p>
<h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
<p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
<a class="inline-block text-xl font-bold text-indigo-500 hover:text-indigo-600" href="#">Read More</a>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-4 mb-8">
<div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
<img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/office2.jpeg" alt="">
<div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
<span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
<p class="text-xl font-bold text-gray-400 mb-2">John Doe • 19 Jan 2022</p>
<h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
<p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
<a class="inline-block text-xl font-bold text-indigo-500 hover:text-indigo-600" href="#">Read More</a>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-4 hidden" :class="{ 'hidden': !showContent }">
<div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
<img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/laptops.jpeg" alt="">
<div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
<span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
<p class="text-xl font-bold text-gray-400 mb-2">John Doe • 19 Jan 2022</p>
<h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
<p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
<a class="inline-block text-xl font-bold text-indigo-500 hover:text-indigo-600" href="#">Read More</a>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-4 hidden" :class="{ 'hidden': !showContent }">
<div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
<img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/laptops2.jpeg" alt="">
<div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
<span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
<p class="text-xl font-bold text-gray-400 mb-2">John Doe • 19 Jan 2022</p>
<h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
<p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
<a class="inline-block text-xl font-bold text-indigo-500 hover:text-indigo-600" href="#">Read More</a>
</div>
</div>
</div>
</div>
<div class="mt-20 text-center"><a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent }" class="inline-block py-4 px-12 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Show more</a></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
