Tailwind Services Components in Mirga library

<section x-data="{ showContent: false }" class="py-12 md:py-24 bg-neutral-50">
  <div class="container mx-auto px-4">
    <div class="mb-12 md:mb-24 text-center max-w-6xl mx-auto">
      <h1 class="mb-16 font-semibold text-6xl sm:text-9xl xl:text-11xl font-heading">
        <span>Join the community, and change</span>
        <span class="bg-orange-50 rounded-lg px-4 inline-block">the future.</span>
      </h1>
      <p class="font-semibold text-2xl text-neutral-600 tracking-tight">Your journey to digital excellence starts here.</p>
    </div>
    <img class="mb-16 mx-auto object-cover rounded-3xl" style="height: 480px" src="mirga-assets/images/services/woman.jpg" alt="">
    <div class="mb-16 max-w-7xl mx-auto">
      <div class="flex flex-wrap -m-2.5">
        <div class="w-full md:w-1/3 p-2.5">
          <div class="h-full py-12 px-10 text-center bg-white border border-neutral-100 rounded-4xl">
            <h3 class="mb-10 font-semibold text-3xl tracking-tight font-heading">Service 1. Data Analysis and Reporting</h3>
            <p class="font-medium text-lg text-neutral-600 tracking-tight">Our data analysis service provides accurate insights into the results of your marketing efforts.</p>
          </div>
        </div>
        <div class="w-full md:w-1/3 p-2.5">
          <div class="h-full py-12 px-10 text-center bg-white border border-neutral-100 rounded-4xl">
            <h3 class="mb-10 font-semibold text-3xl tracking-tight font-heading">Service 2. Social Media Advertising Campaigns</h3>
            <p class="font-medium text-lg text-neutral-600 tracking-tight">Our data analysis service provides accurate insights into the results of your marketing efforts.</p>
          </div>
        </div>
        <div class="w-full md:w-1/3 p-2.5">
          <div class="h-full py-12 px-10 text-center bg-white border border-neutral-100 rounded-4xl">
            <h3 class="mb-10 font-semibold text-3xl tracking-tight font-heading">Service 3. Website Optimization (SEO)</h3>
            <p class="font-medium text-lg text-neutral-600 tracking-tight">Our company offers comprehensive website optimization services, helping yo...</p>
          </div>
        </div>
        <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/3 p-2.5">
            <div class="h-full py-12 px-10 text-center bg-white border border-neutral-100 rounded-4xl">
              <h3 class="mb-10 font-semibold text-3xl tracking-tight font-heading">Service 4. Digital app</h3>
              <p class="font-medium text-lg text-neutral-600 tracking-tight">Can create, connect, verify, and search across all you knowledge platforms is one centralized, secure place - accelarating productivity.</p>
            </div>
        </div>
        <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/3 p-2.5">
            <div class="h-full py-12 px-10 text-center bg-white border border-neutral-100 rounded-4xl">
              <h3 class="mb-10 font-semibold text-3xl tracking-tight font-heading">Service 5. Content marketing</h3>
              <p class="font-medium text-lg text-neutral-600 tracking-tight">Our company provides content strategies and creates valuable...</p>
            </div>
        </div>
        <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/3 p-2.5">
            <div class="h-full py-12 px-10 text-center bg-white border border-neutral-100 rounded-4xl">
              <h3 class="mb-10 font-semibold text-3xl tracking-tight font-heading">Service 6. Email marketing</h3>
              <p class="font-medium text-lg text-neutral-600 tracking-tight">We design personalized email marketing campaigns that help build lasting customer...</p>
            </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap justify-center">
      <div class="w-auto"><a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent }" class="inline-flex justify-center items-center text-center h-20 p-5 font-semibold tracking-tight text-2xl text-white bg-neutral-900 hover:bg-neutral-800 focus:bg-neutral-800 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">All services</a></div>
    </div>
  </div>
</section>