Blog Components in Suncealand library

<section class="py-20 md:py-40 bg-gray-900" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <h2 class="text-5xl md:text-7xl lg:text-8xl font-heading font-semibold text-white mb-32">Our Blog</h2>
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-28">
        <div class="w-full lg:w-1/2 px-4 mb-8">
          <a class="group block max-w-lg lg:max-w-none mx-auto" href="#">
            <img class="h-64 sm:h-88 w-full transform group-hover:translate-y-3 transition ease-in-out duration-1000 rounded-4xl" src="suncealand-assets/images/woman-memory-photo.png" alt="">
            <div class="-mt-6 pt-14 px-8 md:px-14 pb-14 rounded-b-3xl bg-gray-800">
              <div class="max-w-xs">
                <span class="block mb-4 text-2xs text-gray-200 font-medium">24 AUG 22</span>
                <h4 class="text-3xl sm:text-4xl font-heading font-semibold text-white mb-10">How to Start a Podcast: Step by Step Guide</h4>
                <span class="inline-flex items-center font-base text-gray-200">
                  <span class="mr-2">The house by the pond cras ornare.</span>
                  <div class="relative transition duration-500 animate-pulse">
                    <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                    </svg>
                    <div class="absolute top-0 right-0 -mr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                      <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                      </svg>
                    </div>
                    <div class="absolute top-0 right-0 -mr-4 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                      <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                      </svg>
                    </div>
                  </div>
                </span>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full lg:w-1/2 px-4 mb-8">
          <a class="group block max-w-lg lg:max-w-none mx-auto" href="#">
            <img class="h-64 sm:h-88 w-full transform group-hover:translate-y-3 transition ease-in-out duration-1000 rounded-4xl" src="suncealand-assets/images/photograph-view.png" alt="">
            <div class="-mt-6 pt-14 px-8 md:px-14 pb-14 rounded-b-3xl bg-gray-800">
              <div class="max-w-xs">
                <span class="block mb-4 text-2xs text-gray-200 font-medium">15 JUN 22</span>
                <h4 class="text-3xl sm:text-4xl font-heading font-semibold text-white mb-10">Best Free Podcast Courses for 2022</h4>
                <span class="inline-flex items-center font-base text-gray-200">
                  <span class="mr-2">The house by the pond cras ornare.</span>
                  <div class="relative transition duration-500 animate-pulse">
                    <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                    </svg>
                    <div class="absolute top-0 right-0 -mr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                      <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                      </svg>
                    </div>
                    <div class="absolute top-0 right-0 -mr-4 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                      <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                      </svg>
                    </div>
                  </div>
                </span>
              </div>
            </div>
          </a>
        </div>
        <div :class="{ 'hidden': !showContent }" class="hidden w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
            <a class="group block max-w-lg lg:max-w-none mx-auto" href="#">
              <img class="h-64 sm:h-88 w-full transform group-hover:translate-y-3 transition ease-in-out duration-1000 rounded-4xl" src="suncealand-assets/images/photograph-view.png" alt="">
              <div class="-mt-6 pt-14 px-8 md:px-14 pb-14 rounded-b-3xl bg-gray-800">
                <div class="max-w-xs">
                  <span class="block mb-4 text-2xs text-gray-200 font-medium">29 JUN 22</span>
                  <h4 class="text-3xl sm:text-4xl font-heading font-semibold text-white mb-10">Unlocking Your Voice: The Ultimate Podcasting Primer</h4>
                  <span class="inline-flex items-center font-base text-gray-200">
                    <span class="mr-2">The house by the pond cras ornare.</span>
                    <div class="relative transition duration-500 animate-pulse">
                      <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                      </svg>
                      <div class="absolute top-0 right-0 -mr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                        </svg>
                      </div>
                      <div class="absolute top-0 right-0 -mr-4 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                        </svg>
                      </div>
                    </div>
                  </span>
                </div>
              </div>
            </a>
          </div>
        <div :class="{ 'hidden': !showContent }" class="hidden w-full lg:w-1/2 px-4">
            <a class="group block max-w-lg lg:max-w-none mx-auto" href="#">
              <img class="h-64 sm:h-88 w-full transform group-hover:translate-y-3 transition ease-in-out duration-1000 rounded-4xl" src="suncealand-assets/images/woman-memory-photo.png" alt="">
              <div class="-mt-6 pt-14 px-8 md:px-14 pb-14 rounded-b-3xl bg-gray-800">
                <div class="max-w-xs">
                  <span class="block mb-4 text-2xs text-gray-200 font-medium">28 AUG 22</span>
                  <h4 class="text-3xl sm:text-4xl font-heading font-semibold text-white mb-10">Podcasting 101: A Beginner's Guide to Launching Your Show</h4>
                  <span class="inline-flex items-center font-base text-gray-200">
                    <span class="mr-2">The house by the pond cras ornare.</span>
                    <div class="relative transition duration-500 animate-pulse">
                      <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                      </svg>
                      <div class="absolute top-0 right-0 -mr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                        </svg>
                      </div>
                      <div class="absolute top-0 right-0 -mr-4 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                        </svg>
                      </div>
                    </div>
                  </span>
                </div>
              </div>
            </a>
          </div>
      </div>
      <div class="text-center">
        <a x-on:click.prevent="showContent=true" :class="{ 'hidden': showContent }" class="group relative inline-block h-16 w-full sm:w-48 bg-white rounded" href="#">
          <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
            <div class="flex h-full w-full items-center justify-center bg-gray-900 border-2 border-white rounded">
              <span class="text-base font-semibold text-white uppercase">SEE MORE</span>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>