Tailwind Careers Components in Mirga library

<section x-data="{ showContent: false }" class="bg-neutral-50 py-12 md:py-24">
  <div class="container mx-auto px-4">
    <h1 class="text-6xl sm:text-9xl xl:text-11xl font-semibold mb-14 tracking-tight font-heading">Careers</h1>
    <div class="w-full h-px bg-neutral-900 mb-2"></div>
    <h2 class="text-4xl font-semibold mb-8 tracking-tight font-heading">Open positions</h2>
    <div class="bg-white rounded-3xl px-12 py-10 mb-2">
      <div class="flex flex-wrap items-center -m-4">
        <div class="w-full lg:w-1/2 p-4">
          <h2 class="text-4xl font-medium tracking-tight font-heading">Senior Product Designer</h2>
        </div>
        <div class="w-full lg:w-1/2 p-4">
          <div class="flex items-center lg:justify-end flex-wrap gap-12">
            <h3 class="text-neutral-600 text-xl font-semibold tracking-tight font-heading">Lincoln, United Kingdom</h3>
            <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-lg 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="#">More</a>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white rounded-3xl px-12 py-10 mb-2">
      <div class="flex flex-wrap items-center -m-4">
        <div class="w-full lg:w-1/2 p-4">
          <h2 class="text-4xl font-medium tracking-tight font-heading">Project Manager</h2>
        </div>
        <div class="w-full lg:w-1/2 p-4">
          <div class="flex items-center lg:justify-end flex-wrap gap-12">
            <h3 class="text-neutral-600 text-xl font-semibold tracking-tight font-heading">Remote</h3>
            <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-lg 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="#">More</a>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white rounded-3xl px-12 py-10">
      <div class="flex flex-wrap items-center -m-4">
        <div class="w-full lg:w-1/2 p-4">
          <h2 class="text-4xl font-medium tracking-tight font-heading">Content/Social Media Manager</h2>
        </div>
        <div class="w-full lg:w-1/2 p-4">
          <div class="flex items-center lg:justify-end flex-wrap gap-12">
            <h3 class="text-neutral-600 text-xl font-semibold tracking-tight font-heading">Caldas, Portugal</h3>
            <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-lg 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="#">More</a>
          </div>
        </div>
      </div>
    </div>
    <div :class="{ 'hidden': !showContent }" class="hidden mt-2">
        <div class="bg-white rounded-3xl px-12 py-10 mb-2">
            <div class="flex flex-wrap items-center -m-4">
              <div class="w-full lg:w-1/2 p-4">
                <h2 class="text-4xl font-medium tracking-tight font-heading">Product Designer</h2>
              </div>
              <div class="w-full lg:w-1/2 p-4">
                <div class="flex items-center lg:justify-end flex-wrap gap-12">
                  <h3 class="text-neutral-600 text-xl font-semibold tracking-tight font-heading">New York, United States</h3>
                  <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-lg 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="#">More</a>
                </div>
              </div>
            </div>
        </div>
        <div class="bg-white rounded-3xl px-12 py-10 mb-2">
            <div class="flex flex-wrap items-center -m-4">
              <div class="w-full lg:w-1/2 p-4">
                <h2 class="text-4xl font-medium tracking-tight font-heading">Senior UX Designer</h2>
              </div>
              <div class="w-full lg:w-1/2 p-4">
                <div class="flex items-center lg:justify-end flex-wrap gap-12">
                  <h3 class="text-neutral-600 text-xl font-semibold tracking-tight font-heading">Remote</h3>
                  <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-lg 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="#">More</a>
                </div>
              </div>
            </div>
        </div>
        <div class="bg-white rounded-3xl px-12 py-10">
            <div class="flex flex-wrap items-center -m-4">
              <div class="w-full lg:w-1/2 p-4">
                <h2 class="text-4xl font-medium tracking-tight font-heading">Marketing Designer</h2>
              </div>
              <div class="w-full lg:w-1/2 p-4">
                <div class="flex items-center lg:justify-end flex-wrap gap-12">
                  <h3 class="text-neutral-600 text-xl font-semibold tracking-tight font-heading">Lincoln, United Kingdom</h3>
                  <a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-lg 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="#">More</a>
                </div>
              </div>
            </div>
        </div>
    </div>
    <a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent }" class="inline-flex justify-center items-center text-center w-full mt-10 h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-transparent hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Show more</a>
  </div>
</section>