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>

<section class="section has-background-white-ter" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container">
    <div class="mb-20 columns is-multiline is-align-items-end">
      <div class="column is-12-tablet is-7-fullhd mb-12 mb-0-fullhd">
        <h1 class="title is-relative is-inline-block is-size-2 is-size-1-desktop" style="letter-spacing: -0.04em;">
          <span>Selected projects</span>
          <span class="is-absolute is-top-0 is-right-0 -mt-5 -mr-2 is-block is-size-4 has-text-grey has-text-weight-medium">(21)</span>
        </h1>
      </div>
      <div class="column is-12-tablet is-5-fullhd">
        <ul class="is-flex-tablet -mb-3 is-justify-content-end is-align-items-center">
          <li class="mb-3 mr-6"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="button is-rounded px-5 is-size-6" :class="{ 'is-dark': tab == $refs.tab1.textContent, 'is-light has-background-white-ter': tab != $refs.tab1.textContent }" href="#" style="max-height: 38px;">All</a></li>
          <li class="mb-3 mr-6"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="button is-rounded px-5 is-size-6" :class="{ 'is-dark': tab == $refs.tab2.textContent, 'is-light has-background-white-ter': tab != $refs.tab2.textContent }" href="#" style="max-height: 38px;">Villa</a></li>
          <li class="mb-3 mr-6"><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" class="button is-rounded px-5 is-size-6" :class="{ 'is-dark': tab == $refs.tab3.textContent, 'is-light has-background-white-ter': tab != $refs.tab3.textContent }" href="#" style="max-height: 38px;">Residance</a></li>
          <li class="mb-3"><a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" class="button is-rounded px-5 is-size-6" :class="{ 'is-dark': tab == $refs.tab4.textContent, 'is-light has-background-white-ter': tab != $refs.tab4.textContent }" href="#" style="max-height: 38px;">Apartaments</a></li>
        </ul>
      </div>
    </div>
    <div class="mb-20 columns is-multiline">
      <div class="column is-7-tablet mb-12 mb-0-tablet" :class="{ 'is-block': $refs.tab1.textContent == tab || $refs.tab2.textContent == tab, 'is-hidden': $refs.tab1.textContent != tab && $refs.tab2.textContent != tab }">
        <a class="is-block" href="#">
          <img class="mb-8 image is-fullwidth" style="border-radius: 40px; max-height: 800px;" src="asitrastudio-assets/projects/photo-square3.png" alt="">
          <div class="has-mw-xs has-mw-md-desktop">
            <span class="mb-3 tag is-dark">Apartament</span>
            <h3 class="mb-6 is-size-4-mobile is-size-4-tablet is-size-3-widescreen">Althhorpe Street Leamigton Spa</h3>
            <span class="is-block has-text-grey">Girona, Spain</span>
          </div>
        </a>
      </div>
      <div class="column is-5-tablet" :class="{ 'is-block': $refs.tab1.textContent == tab || $refs.tab3.textContent == tab, 'is-hidden': $refs.tab1.textContent != tab && $refs.tab3.textContent != tab }">
        <a class="is-block" href="#">
          <img class="mb-8 image is-fullwidth" style="border-radius: 40px; object-fit: cover; max-height: 520px;" src="asitrastudio-assets/projects/photo-view5.png" alt="">
          <div class="has-mw-xs has-mw-md-desktop">
            <span class="mb-3 tag is-dark">Apartament</span>
            <h3 class="mb-6 is-size-4-mobile is-size-4-tablet is-size-3-widescreen">Althhorpe Street Leamigton Spa</h3>
            <span class="is-block has-text-grey">Girona, Spain</span>
          </div>
        </a>
      </div>
    </div>
    <div class="mb-20">
      <div class="columns is-multiline">
        <div class="column is-4-tablet mb-12 mb-0-tablet">
          <a class="is-block" href="#">
            <img class="mb-8 image is-fullwidth" style="border-radius: 40px; max-height: 444px;" src="asitrastudio-assets/projects/photo-square2.png" alt="">
            <div class="has-mw-xs has-mw-sm-desktop">
              <span class="mb-3 tag is-dark">Apartament</span>
              <h3 class="mb-6 is-size-4">Althhorpe Street Leamigton Spa</h3>
              <span class="is-block has-text-grey">Girona, Spain</span>
            </div>
          </a>
        </div>
        <div class="column is-4-tablet mb-12 mb-0-tablet">
          <a class="is-block" href="#">
            <img class="mb-8 image is-fullwidth" style="border-radius: 40px; max-height: 570px;" src="asitrastudio-assets/projects/photo-view3.png" alt="">
            <div class="has-mw-xs has-mw-sm-desktop">
              <span class="mb-3 tag is-dark">Apartament</span>
              <h3 class="mb-6 is-size-4">Althhorpe Street Leamigton Spa</h3>
              <span class="is-block has-text-grey">Girona, Spain</span>
            </div>
          </a>
        </div>
        <div class="column is-4-tablet">
          <a class="is-block" href="#">
            <img class="mb-8 image is-fullwidth" style="border-radius: 40px; max-height: 444px;" src="asitrastudio-assets/projects/photo-view2.png" alt="">
            <div class="has-mw-xs has-mw-sm-desktop">
              <span class="mb-3 tag is-dark">Apartament</span>
              <h3 class="mb-6 is-size-4">Althhorpe Street Leamigton Spa</h3>
              <span class="is-block has-text-grey">Girona, Spain</span>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="has-text-centered">
      <a class="button is-ghost px-0" href="#" style="height: 38px;">
        <span class="mr-2">See all projects</span>
        <svg class="is-rotate-45" 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>
      </a>
    </div>
  </div>
</section>

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="row align-items-end mb-20">
      <div class="col-12 col-xxl-7 mb-10 mb-xxl-0">
        <div class="d-inline-block"><span class="d-block mb-n4 me-sm-n10 text-end fs-4 fw-medium text-secondary-light" >(21)</span>
          <h1 >Selected projects</h1>
        </div>
      </div>
      <div class="col-12 col-xxl-5">
        <ul class="list-unstyled d-flex flex-wrap align-items-center justify-content-end">
          <li class="me-8"><a class="btn btn-dark py-2 px-5 fs-7" href="#" >All</a></li>
          <li class="me-8"><a class="btn py-2 px-5 fs-7" href="#" >Villa</a></li>
          <li class="me-8"><a class="btn py-2 px-5 fs-7" href="#" >Residance</a></li>
          <li><a class="btn py-2 px-5 fs-7" href="#" >Apartaments</a></li>
        </ul>
      </div>
    </div>
    <div class="row mb-20">
      <div class="col-12 col-md-7 mb-20 mb-md-0"><a class="d-block" href="#"><img class="img-fluid mb-8 rounded-5" style="max-height: 800px;" src="asitrastudio-assets/projects/photo-square3.png" alt=""/>
          <div class="mw-xs mw-lg-md"><span class="badge mb-3 border border-dark" >Apartament</span>
            <h3 class="fs-3 mb-6" >Althhorpe Street Leamigton Spa</h3><span class="d-block text-secondary-light" >Girona, Spain</span>
          </div></a></div>
      <div class="col-12 col-md-5"><a class="d-block" href="#"><img class="img-fluid w-100 mb-8 rounded-5" style="object-fit: cover; max-height: 520px;" src="asitrastudio-assets/projects/photo-view5.png" alt=""/>
          <div class="mw-xs mw-lg-md"><span class="badge mb-3 border border-dark" >Apartament</span>
            <h3 class="fs-3 mb-6" >Althhorpe Street Leamigton Spa</h3><span class="d-block text-secondary-light" >Girona, Spain</span>
          </div></a></div>
    </div>
    <div class="mb-20">
      <div class="row">
        <div class="col-12 col-md-4 mb-20 mb-md-0"><a class="d-block" href="#"><img class="img-fluid w-100 mb-8 rounded-5" style="max-height: 444px;" src="asitrastudio-assets/projects/photo-square2.png" alt=""/>
            <div class="mw-xs mw-lg-sm"><span class="badge mb-3 border border-dark" >Apartament</span>
              <h3 class="fs-4 mb-6" >Althhorpe Street Leamigton Spa</h3><span class="d-block text-secondary-light" >Girona, Spain</span>
            </div></a></div>
        <div class="col-12 col-md-4 mb-20 mb-md-0"><a class="d-block" href="#"><img class="img-fluid w-100 mb-8 rounded-5" style="max-height: 570px;" src="asitrastudio-assets/projects/photo-view3.png" alt=""/>
            <div class="mw-xs mw-lg-sm"><span class="badge mb-3 border border-dark" >Apartament</span>
              <h3 class="fs-4 mb-6" >Althhorpe Street Leamigton Spa</h3><span class="d-block text-secondary-light" >Girona, Spain</span>
            </div></a></div>
        <div class="col-12 col-md-4"><a class="d-block" href="#"><img class="img-fluid w-100 mb-8 rounded-5" style="max-height: 444px;" src="asitrastudio-assets/projects/photo-view2.png" alt=""/>
            <div class="mw-xs mw-lg-sm"><span class="badge mb-3 border border-dark" >Apartament</span>
              <h3 class="fs-4 mb-6" >Althhorpe Street Leamigton Spa</h3><span class="d-block text-secondary-light" >Girona, Spain</span>
            </div></a></div>
      </div>
    </div>
    <div class="text-center"><a class="d-inline-block pb-2 fw-semibold border-0 border-2 border-dark border-bottom" href="#"><span class="me-3" >See all projects</span>
        <svg class="rotate-45" 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></a></div>
  </div>
</section>