Blog Components in Acros library

<section class="section py-16">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">
      <span>Recent on</span>
      <span class="has-text-primary">blog</span>
    </small>
    <div class="columns is-align-items-center mb-12">
      <div class="column is-7">
        <h2 class="title">Finish what you started today before you forget to do it</h2>
      </div>
      <div class="column is-5">
        <div class="buttons"><a class="button is-primary is-outlined ml-auto-tablet" href="#">Check all posts</a></div>
      </div>
    </div>
    <div class="columns is-vcentered">
      <div class="column is-narrow-widescreen">
        <a class="is-block is-relative" href="#">
          <div class="is-absolute p-8 is-bottom-0" style="z-index: 1;">
            <p class="has-text-white is-size-6 title mb-2">
              <span>#people</span>
              <span class="ml-4">#family</span>
            </p>
            <h3 class="title is-size-3 has-text-white mb-4">Take care of the relationship</h3>
            <p class="subtitle has-text-white has-mw-sm mb-6 is-hidden-touch">The best way to archive better skills is by challenging yourself with exciting projects on the side.</p>
            <p class="title is-size-6 has-text-weight-medium has-text-white is-flex is-align-items-center">
              Read more
              <img class="ml-4" src="acros-assets/icons/blog/arrow-right-light.svg" alt="">
            </p>
          </div>
          <img class="image is-fullwidth" src="acros-assets/images/blog/robot-635x558.jpg" alt="">
        </a>
      </div>
      <div class="column">
        <div class="columns is-multiline">
          <div class="column is-12-tablet is-narrow-widescreen">
            <a class="is-block is-relative" href="#">
              <div class="is-absolute p-6 is-bottom-0" style="z-index: 1;">
                <p class="has-text-white is-size-6 title mb-2">
                  <span>#people</span>
                  <span class="ml-4">#family</span>
                </p>
                <h4 class="title is-size-4 has-text-white mb-4">Take care of the relationship</h4>
                <p class="title is-size-6 has-text-weight-medium has-text-white is-flex is-align-items-center">
                  Read more
                  <img class="ml-4" src="acros-assets/icons/blog/arrow-right-light.svg" alt="">
                </p>
              </div>
              <img class="image is-fullwidth" src="acros-assets/images/blog/work-man-445x264.jpg" alt="">
            </a>
          </div>
          <div class="column is-12-tablet is-narrow-widescreen">
            <a class="is-block is-relative" href="#">
              <div class="is-absolute p-6 is-bottom-0" style="z-index: 1;">
                <p class="has-text-white is-size-6 title mb-2">
                  <span>#people</span>
                  <span class="ml-4">#family</span>
                </p>
                <h4 class="title is-size-4 has-text-white mb-4">Take care of the relationship</h4>
                <p class="title is-size-6 has-text-weight-medium has-text-white is-flex is-align-items-center">
                  Read more
                  <img class="ml-4" src="acros-assets/icons/blog/arrow-right-light.svg" alt="">
                </p>
              </div>
              <img class="image is-fullwidth" src="acros-assets/images/blog/woman-445x264.jpg" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-16" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-12">
      <div class="w-full xl:w-2/3 px-4 mb-8 xl:mb-0">
        <div class="text-sm mb-2 font-semibold text-gray-900 uppercase">
          <span>Recent on</span>
          <span class="text-green-500">Blog</span>
        </div>
        <h2 class="max-w-xl font-heading text-3xl sm:text-4xl">Finish what you started today before you forget to do it</h2>
      </div>
      <div class="w-full xl:w-auto ml-auto px-4 xl:text-right"><a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent }" class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-gray-900 hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-150" href="#">Check all posts</a></div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <div class="relative flex items-end h-full pt-24 overflow-hidden rounded-md">
          <img class="absolute top-0 left-0 h-full w-full object-cover" src="acros-assets/images/blog/robot-540x540.jpg" alt="">
          <div class="relative max-w-lg p-6 sm:p-8">
            <div class="mb-2"><a class="inline-block font-heading text-white hover:text-gray-100 mr-4" href="#">#people</a><a class="inline-block font-heading text-white hover:text-gray-100" href="#">#family</a></div>
            <h3 class="font-heading text-3xl text-white mb-4">Take care of the relationship</h3>
            <p class="leading-7 text-white mb-6">The best way to archive better skills is by challenging yourself with exciting projects.</p>
            <a class="group inline-flex items-center font-heading font-medium text-white" href="#">
              <span class="mr-4">Read more</span>
              <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-400 bg-opacity-70 group-hover:bg-opacity-100">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.5 6H9.5M9.5 6L6.5 3M9.5 6L6.5 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <div class="relative flex h-64 mb-8 items-end overflow-hidden rounded-md">
          <img class="absolute top-0 left-0 h-full w-full object-cover object-top" src="acros-assets/images/blog/work-man-445x318.jpg" alt="">
          <div class="absolute top-0 left-0 h-full w-full bg-gray-900 bg-opacity-20"></div>
          <div class="relative max-w-lg p-6 pt-24">
            <div class="mb-2"><a class="inline-block font-heading text-white hover:text-gray-100 mr-4" href="#">#people</a><a class="inline-block font-heading text-white hover:text-gray-100" href="#">#family</a></div>
            <h3 class="font-heading text-2xl text-white mb-4">Take care of the relationship</h3>
            <a class="group inline-flex items-center font-heading font-medium text-white" href="#">
              <span class="mr-4">Read more</span>
              <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-400 bg-opacity-70 group-hover:bg-opacity-100">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.5 6H9.5M9.5 6L6.5 3M9.5 6L6.5 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
        <div class="relative flex h-64 items-end overflow-hidden rounded-md">
          <img class="absolute top-0 left-0 h-full w-full object-cover object-top" src="acros-assets/images/blog/woman-445x264.jpg" alt="">
          <div class="absolute top-0 left-0 h-full w-full bg-gray-900 bg-opacity-20"></div>
          <div class="relative max-w-lg p-6">
            <div class="mb-2"><a class="inline-block font-heading text-white hover:text-gray-100 mr-4" href="#">#people</a><a class="inline-block font-heading text-white hover:text-gray-100" href="#">#family</a></div>
            <h3 class="font-heading text-2xl text-white mb-4">Take care of the relationship</h3>
            <a class="group inline-flex items-center font-heading font-medium text-white" href="#">
              <span class="mr-4">Read more</span>
              <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-400 bg-opacity-70 group-hover:bg-opacity-100">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.5 6H9.5M9.5 6L6.5 3M9.5 6L6.5 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="hidden w-full lg:w-1/2 px-4 mb-8 lg:mb-0" :class="{ 'hidden': !showContent }">
        <div class="relative flex h-64 mb-8 items-end overflow-hidden rounded-md">
          <img class="absolute top-0 left-0 h-full w-full object-cover object-top" src="acros-assets/images/blog/work-man-445x318.jpg" alt="">
          <div class="absolute top-0 left-0 h-full w-full bg-gray-900 bg-opacity-20"></div>
          <div class="relative max-w-lg p-6 pt-24">
            <div class="mb-2"><a class="inline-block font-heading text-white hover:text-gray-100 mr-4" href="#">#people</a><a class="inline-block font-heading text-white hover:text-gray-100" href="#">#family</a></div>
            <h3 class="font-heading text-2xl text-white mb-4">A Guide to Relationship Maintenance</h3>
            <a class="group inline-flex items-center font-heading font-medium text-white" href="#">
              <span class="mr-4">Read more</span>
              <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-400 bg-opacity-70 group-hover:bg-opacity-100">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.5 6H9.5M9.5 6L6.5 3M9.5 6L6.5 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
        <div class="relative flex h-64 items-end overflow-hidden rounded-md">
          <img class="absolute top-0 left-0 h-full w-full object-cover object-top" src="acros-assets/images/blog/woman-445x264.jpg" alt="">
          <div class="absolute top-0 left-0 h-full w-full bg-gray-900 bg-opacity-20"></div>
          <div class="relative max-w-lg p-6">
            <div class="mb-2"><a class="inline-block font-heading text-white hover:text-gray-100 mr-4" href="#">#people</a><a class="inline-block font-heading text-white hover:text-gray-100" href="#">#family</a></div>
            <h3 class="font-heading text-2xl text-white mb-4">A Guide to Relationship Maintenance</h3>
            <a class="group inline-flex items-center font-heading font-medium text-white" href="#">
              <span class="mr-4">Read more</span>
              <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-400 bg-opacity-70 group-hover:bg-opacity-100">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.5 6H9.5M9.5 6L6.5 3M9.5 6L6.5 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="hidden w-full lg:w-1/2 px-4" :class="{ 'hidden': !showContent }">
        <div class="relative flex items-end h-full pt-24 overflow-hidden rounded-md">
          <img class="absolute top-0 left-0 h-full w-full object-cover" src="acros-assets/images/blog/robot-540x540.jpg" alt="">
          <div class="relative max-w-lg p-6 sm:p-8">
            <div class="mb-2"><a class="inline-block font-heading text-white hover:text-gray-100 mr-4" href="#">#people</a><a class="inline-block font-heading text-white hover:text-gray-100" href="#">#family</a></div>
            <h3 class="font-heading text-3xl text-white mb-4">A Guide to Relationship Maintenance</h3>
            <p class="leading-7 text-white mb-6">Elevating your interpersonal skills through mindful engagement and meaningful projects.</p>
            <a class="group inline-flex items-center font-heading font-medium text-white" href="#">
              <span class="mr-4">Read more</span>
              <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-400 bg-opacity-70 group-hover:bg-opacity-100">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.5 6H9.5M9.5 6L6.5 3M9.5 6L6.5 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>