Blog UI Components – Pstls Library

<section class="section py-28 has-background-white">
  <div class="container">
    <div class="mb-16 mb-20-tablet columns is-vcentered is-multiline">
      <div class="column is-6-tablet">
        <h2 class="title mb-0 is-size-2-touch is-size-1-tablet">Recent articles</h2>
      </div>
      <div class="column is-6-tablet">
        <p class="subtitle">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
      </div>
    </div>
    <div class="mb-20 columns is-multiline">
      <div class="column is-6-tablet is-4-desktop mb-8-touch">
        <a href="#">
          <span class="tag is-primary">Category</span>
        </a>
        <a class="mb-6 is-inline-block" href="#">
          <h2 class="title mt-6 mb-4 is-size-3">Lorem ipsum random blog article</h2>
          <div class="mb-4 is-flex is-align-items-center">
            <span class="has-text-primary">6 min read</span>
            <span class="has-text-primary mx-2">•</span>
            <span class="has-text-primary">10 July 2022</span>
          </div>
          <p class="subtitle">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
        </a>

<section class="py-24" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-20 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-6">
        <h2 class="text-5xl md:text-6xl font-heading" >Recent articles</h2>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <p class="max-w-lg leading-8" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 mb-16">
      
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="lg:max-w-sm lg:mx-auto"><a class="inline-block mb-6 px-2 py-1 text-xs bg-indigo-200 text-dark uppercase" href="#"><span >Category</span></a><a class="block mb-6" href="#">
            <h2 class="text-4xl font-heading mb-4" >Lorem ipsum random blog article</h2>
            <div class="mb-4 text-indigo-200"><span >6 min read</span><span class="mx-2">•</span><span >10 July 2022</span></div>
            <p class="leading-8" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p></a><a class="inline-flex items-center" href="#">
            <div class="mr-3"><img src="pstls-assets/images/blog/men-avatar.png" alt="" ></div>
            <div>
              <p class="text-gray-400">Published by</p>
              <p  >John Doe</p>
            </div></a></div>
      </div>

<section class="py-28 bg-white">
  <div class="container">
    <div class="row align-items-center mb-16 mb-md-20">
      <div class="col-12 col-md-6">
        <h2 class="display-4 font-heading" >Recent articles</h2>
      </div>
      <div class="col-12 col-md-6">
        <p class="lh-lg" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
      </div>
    </div>
    <div class="row mb-20">
      <div class="col-12 col-md-4 mb-12 mb-md-0"><a class="text-decoration-none" href="#"><span class="badge bg-primary text-uppercase" >Category</span></a><a class="d-inline-block text-decoration-none mb-6" href="#">
          <h2 class="mb-4 lh-sm mt-6 font-heading" >Lorem ipsum random blog article</h2>
          <div class="d-flex align-items-center mb-4"><span class="text-primary" >6 min read</span><span class="mx-2 text-primary">&bull;</span><span class="text-primary" >10 July 2021</span></div>
          <p class="mb-0 lh-lg text-dark" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p></a><a class="d-flex align-items-center text-decoration-none" href="#">
          <div class="me-4"><img class="img-fluid" src="pstls-assets/images/blog/men-avatar.png" alt="" /></div>
          <div>
            <p class="mb-1 text-light-dark">Published by</p>
            <p class="mb-0 text-dark"  >John Doe</p>
          </div></a></div>
      <div class="col-12 col-md-4 mb-12 mb-md-0"><a class="text-decoration-none" href="#"><span class="badge bg-secondary text-uppercase" >Category</span></a><a class="d-inline-block text-decoration-none mb-6" href="#">
          <h2 class="mb-4 lh-sm mt-6" >Lorem ipsum random blog article</h2>
          <div class="d-flex align-items-center mb-4"><span class="text-primary" >6 min read</span><span class="mx-2 text-primary">&bull;</span><span class="text-primary" >10 July 2021</span></div>
          <p class="mb-0 lh-lg text-dark" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p></a><a class="d-flex align-items-center text-decoration-none" href="#">