<section class="py-24 relative" x-data="{ category: '' }" x-init="category = $refs.category1.textContent">
<div class="container px-4 mx-auto relative z-10">
<div class="flex flex-wrap -mx-4 items-center">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-20 md:mb-0">
<ul>
<li class="flex items-center mb-6 xl:mb-10">
<a x-ref="category1" x-on:click.prevent="category = $refs.category1.textContent" class="text-2xl md:text-3xl text-indigo-200 font-heading" :class="{ 'text-indigo-200': category == $refs.category1.textContent, 'text-black hover:text-gray-800': category != $refs.category1.textContent }" href="#" >All</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-200 text-white rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category1.textContent, 'bg-indigo-100': category != $refs.category1.textContent }" >41</span>
</li>
<li class="flex items-center mb-6 xl:mb-10">
<a x-ref="category2" x-on:click.prevent="category = $refs.category2.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category2.textContent, 'text-black hover:text-gray-800': category != $refs.category2.textContent }" href="#" >Art Direction</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category2.textContent, 'bg-indigo-100': category != $refs.category2.textContent }" >6</span>
</li>
<li class="flex items-center mb-6 xl:mb-10">
<a x-ref="category3" x-on:click.prevent="category = $refs.category3.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category3.textContent, 'text-black hover:text-gray-800': category!= $refs.category3.textContent }" href="#" >Branding</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category3.textContent, 'bg-indigo-100': category != $refs.category3.textContent }" >4</span>
</li>
<li class="flex items-center mb-6 xl:mb-10">
<a x-ref="category4" x-on:click.prevent="category = $refs.category4.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category4.textContent, 'text-black hover:text-gray-800': category!= $refs.category4.textContent }" href="#" >Video</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category4.textContent, 'bg-indigo-100': category != $refs.category4.textContent }" >12</span>
</li>
<li class="flex items-center mb-6 xl:mb-10">
<a x-ref="category5" x-on:click.prevent="category = $refs.category5.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category5.textContent, 'text-black hover:text-gray-800': category != $refs.category5.textContent }" href="#" >Event</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category5.textContent, 'bg-indigo-100': category != $refs.category5.textContent }" >3</span>
</li>
<li class="flex items-center">
<a x-ref="category6" x-on:click.prevent="category = $refs.category6.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category6.textContent, 'text-black hover:text-gray-800': category != $refs.category6.textContent }" href="#" >Development</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category6.textContent, 'bg-indigo-100': category != $refs.category6.textContent }" >16</span>
</li>
</ul>
</div>
<div class="w-full md:w-1/2 lg:w-2/3 px-4">
<div class="flex flex-wrap justify-center -mx-4">
<div class="w-full md:w-1/2 px-4 mb-16 md:mt-16">
<div class="max-w-xs mx-auto mb-16">
<img class="block w-full mb-6" src="pstls-assets/images/portfolio/portfolio-1-room.jpg" alt="" >
<h5 class="text-lg font-heading mb-2" >Lorem Ipsum Random Name</h5>
<p class="text-xs text-gray-500 uppercase" >Art direction</p>
</div>
<div class="max-w-xs mx-auto">
<img class="block w-full mb-6" src="pstls-assets/images/portfolio/portfolio-1-forest.jpg" alt="" >
<h5 class="text-lg font-heading mb-2" >Lorem Ipsum Random Name</h5>
<p class="text-xs text-gray-500 uppercase" style="font-size: 12px;" >Art direction</p>
</div>
</div>
<div class="w-full md:w-1/2 px-4">
<div class="max-w-xs mx-auto mb-16">
<img class="block w-full mb-6" src="pstls-assets/images/portfolio/portfolio-1-design.jpg" alt="" >
<h5 class="text-lg font-heading mb-2" >Lorem Ipsum Random Name</h5>
<p class="text-xs text-gray-500 uppercase" >Art direction</p>
</div>
<div class="max-w-xs mx-auto">
<img class="block w-full mb-6" src="pstls-assets/images/portfolio/portfolio-1-design2.jpg" alt="" >
<h5 class="text-lg font-heading mb-2" >Lorem Ipsum Random Name</h5>
<p class="text-xs text-gray-500 uppercase" >Art direction</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="absolute top-0 left-0 bg-lime-100 p-10 md:p-20 xl:p-40"></div>
<div class="absolute bottom-0 left-0 bg-indigo-100 p-10 md:p-20 xl:p-40"></div>
<div class="absolute top-0 right-0 bg-red-100 p-10 md:p-20 xl:p-40"></div>
</section>
