Tailwind Blog Components in Zanrly library

<section x-data="{ showContent: false }" class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-800 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="mb-12 md:max-w-4xl mx-auto text-center">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Blog</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Resources and stories center</h2>
          <p class="md:max-w-md mx-auto text-gray-400 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="flex flex-wrap -m-4 mb-6">
          <div class="w-full md:w-1/3 p-4">
            <div class="h-full bg-gray-900 rounded-3xl">
              <img class="w-full" src="zanrly-assets/images/blog/blog.png" alt="">
              <div class="p-8">
                <a class="group inline-block mb-4" href="#">
                  <h3 class="font-heading text-2xl text-white hover:text-gray-200 group-hover:underline font-black">You will never believe these bizarre truth of travel.</h3>
                </a>
                <p class="text-sm text-gray-500 font-bold">Design process • 4 min read</p>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/3 p-4">
            <div class="h-full bg-gray-900 rounded-3xl">
              <img class="w-full" src="zanrly-assets/images/blog/blog2.png" alt="">
              <div class="p-8">
                <a class="group inline-block mb-4" href="#">
                  <h3 class="font-heading text-2xl text-white hover:text-gray-200 group-hover:underline font-black">Five web design blogs you should be reading</h3>
                </a>
                <p class="text-sm text-gray-500 font-bold">Technology • 4 min read</p>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/3 p-4">
            <div class="h-full bg-gray-900 rounded-3xl">
              <img class="w-full" src="zanrly-assets/images/blog/blog3.png" alt="">
              <div class="p-8">
                <a class="group inline-block mb-4" href="#">
                  <h3 class="font-heading text-2xl text-white hover:text-gray-200 group-hover:underline font-black">80 Best Virtual Reality Blogs and Websites</h3>
                </a>
                <p class="text-sm text-gray-500 font-bold">Inspiration • 4 min read</p>
              </div>
            </div>
          </div>
          <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/3 p-4">
            <div class="h-full bg-gray-900 rounded-3xl">
              <img class="w-full" src="zanrly-assets/images/blog/blog.png" alt="">
              <div class="p-8">
                <a class="group inline-block mb-4" href="#">
                  <h3 class="font-heading text-2xl text-white hover:text-gray-200 group-hover:underline font-black">Unveiling the Bizarre Truths of Travel</h3>
                </a>
                <p class="text-sm text-gray-500 font-bold">Inspiration • 4 min read</p>
              </div>
            </div>
          </div>
          <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/3 p-4">
            <div class="h-full bg-gray-900 rounded-3xl">
              <img class="w-full" src="zanrly-assets/images/blog/blog2.png" alt="">
              <div class="p-8">
                <a class="group inline-block mb-4" href="#">
                  <h3 class="font-heading text-2xl text-white hover:text-gray-200 group-hover:underline font-black">80 Must-Follow Virtual Reality Blogs and Websites</h3>
                </a>
                <p class="text-sm text-gray-500 font-bold">Inspiration • 4 min read</p>
              </div>
            </div>
          </div>
          <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/3 p-4">
            <div class="h-full bg-gray-900 rounded-3xl">
              <img class="w-full" src="zanrly-assets/images/blog/blog3.png" alt="">
              <div class="p-8">
                <a class="group inline-block mb-4" href="#">
                  <h3 class="font-heading text-2xl text-white hover:text-gray-200 group-hover:underline font-black">Five Web Design Blogs You Can't Miss</h3>
                </a>
                <p class="text-sm text-gray-500 font-bold">Inspiration • 4 min read</p>
              </div>
            </div>
          </div>
        </div>
        <div :class="{ 'hidden': showContent }" class="flex flex-wrap md:justify-center -m-2">
          <div class="w-full md:w-auto p-2"><a x-on:click.prevent="showContent = true" class="block w-full px-12 py-3.5 text-lg text-center text-gray-900 font-bold bg-gray-100 hover:bg-gray-200 focus:ring-4 focus:ring-gray-600 rounded-full" href="#">Read more News</a></div>
        </div>
      </div>
    </div>
  </div>
</section>