Tailwind Projects Components in Asitrastudio library

<section class="py-12 md:py-24 bg-coolGray-50" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <div class="max-w-lg mx-auto lg:max-w-none mb-20">
      <div class="flex flex-wrap -mx-4 items-end">
        <div class="w-full 2xl:w-7/12 px-4 mb-16 2xl:mb-0">
          <div class="inline-flex mx-auto items-start">
            <h1 class="font-heading text-3xl xs:text-5xl md:text-6xl lg:text-10xl tracking-tighter pt-4">Selected projects</h1>
            <span class="block -mb-4 mr-12 lg:mr-8 text-right text-xl sm:text-2xl text-coolGray-600">(21)</span>
          </div>
        </div>
        <div class="w-full 2xl:w-5/12 px-4">
          <ul class="flex flex-wrap -mb-2 items-center justify-end">
            <li class="mb-2 mr-2 sm:mr-8"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{'bg-black text-white': $refs.tab1.textContent == tab, 'hover:bg-black hover:text-white': $refs.tab1.textContent != tab}" class="inline-block py-2.5 px-5 text-lg leading-none bg-black text-white rounded-full transition duration-100" href="#">All</a></li>
            <li class="mb-2 mr-2 sm:mr-8"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{'bg-black text-white': $refs.tab2.textContent == tab }" class="inline-block py-2.5 px-5 text-lg hover:text-white leading-none hover:bg-black rounded-full transition duration-100" href="#">Villa</a></li>
            <li class="mb-2 mr-2 sm:mr-8"><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{'bg-black text-white': $refs.tab3.textContent == tab }" class="inline-block py-2.5 px-5 text-lg hover:text-white leading-none hover:bg-black rounded-full transition duration-100" href="#">Residance</a></li>
            <li class="mb-2"><a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" :class="{'bg-black text-white': $refs.tab4.textContent == tab }" class="inline-block py-2.5 px-5 text-lg hover:text-white leading-none hover:bg-black rounded-full transition duration-100" href="#">Apartaments</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="md:max-w-xl mx-auto lg:max-w-none">
      <div class="flex flex-wrap -mx-3 mb-20">
        <div :class="{'block': $refs.tab1.textContent == tab || $refs.tab2.textContent == tab, 'hidden': $refs.tab1.textContent != tab &amp;&amp; $refs.tab2.textContent != tab}" class="w-full lg:w-7/12 px-3 mb-20 lg:mb-0">
          <a class="group block" href="#">
            <div class="relative h-112 md:h-200 mb-8 rounded-5xl overflow-hidden">
              <div class="absolute left-0 top-0 h-full w-full group-hover:bg-opacity-10 group-hover:bg-black transition duration-200"></div>
              <img class="block w-full h-full object-cover" src="asitrastudio-assets/projects/photo-square3.png" alt="">
            </div>
            <div class="max-w-xs lg:max-w-md">
              <span class="inline-block mb-3 py-2 px-3 text-sm leading-none border-1.5 border-black group-hover:bg-black group-hover:text-white rounded-full transition duration-200">Apartament</span>
              <h3 class="text-4xl mb-6 tracking-tight leading-none">Althhorpe Street Leamigton Spa</h3>
              <span class="block text-coolGray-600">Girona, Spain</span>
            </div>
          </a>
        </div>
        <div :class="{'block': $refs.tab1.textContent == tab || $refs.tab3.textContent == tab, 'hidden': $refs.tab1.textContent != tab &amp;&amp; $refs.tab3.textContent != tab}" class="w-full lg:w-5/12 px-3">
          <a class="group block" href="#">
            <div class="relative h-112 md:h-135 mb-8 rounded-5xl overflow-hidden">
              <div class="absolute left-0 top-0 h-full w-full group-hover:bg-opacity-10 group-hover:bg-black transition duration-200"></div>
              <img class="block w-full h-full object-cover" src="asitrastudio-assets/projects/photo-view5.png" alt="">
            </div>
            <div class="max-w-xs lg:max-w-md">
              <span class="inline-block mb-3 py-2 px-3 text-sm leading-none border-1.5 border-black group-hover:bg-black group-hover:text-white rounded-full transition duration-200">Apartament</span>
              <h3 class="text-4xl mb-6 tracking-tight leading-none">Althhorpe Street Leamigton Spa</h3>
              <span class="block text-coolGray-600">Girona, Spain</span>
            </div>
          </a>
        </div>
      </div>
      <div class="mb-20">
        <div class="flex flex-wrap -mx-3">
          <div class="w-full lg:w-1/3 px-3 mb-20 lg:mb-0">
            <a class="group block" href="#">
              <div class="relative h-96 md:h-112 mb-8 rounded-5xl overflow-hidden">
                <div class="absolute left-0 top-0 h-full w-full group-hover:bg-opacity-10 group-hover:bg-black transition duration-200"></div>
                <img class="block w-full h-full object-cover" src="asitrastudio-assets/projects/photo-square2.png" alt="">
              </div>
              <div class="max-w-xs">
                <span class="inline-block mb-3 py-2 px-3 text-sm leading-none border-1.5 border-black group-hover:bg-black group-hover:text-white rounded-full transition duration-200">Apartament</span>
                <h3 class="text-3xl mb-6 tracking-tight leading-none">Althhorpe Street Leamigton Spa</h3>
                <span class="block text-coolGray-600">Girona, Spain</span>
              </div>
            </a>
          </div>
          <div class="w-full lg:w-1/3 px-3 mb-20 lg:mb-0">
            <a class="group block" href="#">
              <div class="relative h-112 md:h-135 mb-8 rounded-5xl overflow-hidden">
                <div class="absolute left-0 top-0 h-full w-full group-hover:bg-opacity-10 group-hover:bg-black transition duration-200"></div>
                <img class="block w-full h-full object-cover" src="asitrastudio-assets/projects/photo-view3.png" alt="">
              </div>
              <div class="max-w-xs">
                <span class="inline-block mb-3 py-2 px-3 text-sm leading-none border-1.5 border-black group-hover:bg-black group-hover:text-white rounded-full transition duration-200">Apartament</span>
                <h3 class="text-3xl mb-6 tracking-tight leading-none">Althhorpe Street Leamigton Spa</h3>
                <span class="block text-coolGray-600">Girona, Spain</span>
              </div>
            </a>
          </div>
          <div class="w-full lg:w-1/3 px-3">
            <a class="group block" href="#">
              <div class="relative h-96 md:h-112 mb-8 rounded-5xl overflow-hidden">
                <div class="absolute left-0 top-0 h-full w-full group-hover:bg-opacity-10 group-hover:bg-black transition duration-200"></div>
                <img class="block w-full h-full object-cover" src="asitrastudio-assets/projects/photo-view2.png" alt="">
              </div>
              <div class="max-w-xs">
                <span class="inline-block mb-3 py-2 px-3 text-sm leading-none border-1.5 border-black group-hover:bg-black group-hover:text-white rounded-full transition duration-200">Apartament</span>
                <h3 class="text-3xl mb-6">Althhorpe Street Leamigton Spa</h3>
                <span class="block text-coolGray-600">Girona, Spain</span>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="text-center">
        <a class="group inline-flex items-center leading-none font-medium pb-2 border-b-2 border-black" href="#">
          <span class="mr-4">See all projects</span>
          <span class="group-hover:rotate-45 transform transition duration-100">
            <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
        </a>
      </div>
    </div>
  </div>
</section>