Blog Components in Nightsable library

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-2xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-tighter-xl">Blog</h2>
    </div>
    <div class="flex flex-nowrap justify-center">
      <div class="flex-shrink-0 w-full max-w-2xl p-5">
        <div class="mb-8 overflow-hidden rounded-5xl">
          <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/hand.png" alt="">
        </div>
        <a class="inline-block mb-4" href="#">
          <h2 class="font-heading text-3xl text-white tracking-tight leading-none hover:underline">Women in business: an interview with Sarah Townsend</h2>
        </a>
        <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        <div class="flex flex-wrap items-center -m-2">
          <div class="w-auto p-2">
            <img src="nightsable-assets/images/blog/avatar.png" alt="">
          </div>
          <div class="w-auto p-2">
            <p class="text-sm text-white font-medium tracking-tighter">Wade Warren</p>
          </div>
          <div class="w-auto p-2">
            <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
            </svg>
          </div>
          <div class="w-auto p-2">
            <p class="text-sm text-white font-medium tracking-tighter">9 min read</p>
          </div>
        </div>
      </div>
      <div class="flex-shrink-0 w-full max-w-2xl p-5">
        <div class="mb-8 overflow-hidden rounded-5xl">
          <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/skyscraper.png" alt="">
        </div>
        <a class="inline-block mb-4" href="#">
          <h2 class="font-heading text-3xl text-white tracking-tight leading-none hover:underline">Women in business: an interview with Sarah Townsend</h2>
        </a>
        <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        <div class="flex flex-wrap items-center -m-2">
          <div class="w-auto p-2">
            <img src="nightsable-assets/images/blog/avatar.png" alt="">
          </div>
          <div class="w-auto p-2">
            <p class="text-sm text-white font-medium tracking-tighter">Wade Warren</p>
          </div>
          <div class="w-auto p-2">
            <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
            </svg>
          </div>
          <div class="w-auto p-2">
            <p class="text-sm text-white font-medium tracking-tighter">9 min read</p>
          </div>
        </div>
      </div>
      <div class="flex-shrink-0 w-full max-w-2xl p-5">
        <div class="mb-8 overflow-hidden rounded-5xl">
          <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/cash.png" alt="">
        </div>
        <a class="inline-block mb-4" href="#">
          <h2 class="font-heading text-3xl text-white tracking-tight leading-none hover:underline">Women in business: an interview with Sarah Townsend</h2>
        </a>
        <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        <div class="flex flex-wrap items-center -m-2">
          <div class="w-auto p-2">
            <img src="nightsable-assets/images/blog/avatar.png" alt="">
          </div>
          <div class="w-auto p-2">
            <p class="text-sm text-white font-medium tracking-tighter">Wade Warren</p>
          </div>
          <div class="w-auto p-2">
            <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
            </svg>
          </div>
          <div class="w-auto p-2">
            <p class="text-sm text-white font-medium tracking-tighter">9 min read</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black overflow-hidden">
  <div class="container">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-6" style="letter-spacing: -0.2rem;">Blog</h1>
    </div>
    <div class="d-flex justify-content-center"><a class="btn mx-5 p-0 flex-shrink-0 w-100 mw-xs mw-md-md mw-lg-xl text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/hand.png" alt="">
        <div class="mw-md">
          <h6 class="mb-4">Women in business: an interview with Sarah Townsend</h6>
          <p class="mw-sm text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          <div class="d-flex align-items-center"><img class="img-fluid" src="nightsable-assets/images/blog/avatar.png" alt=""><span class="ms-4 lh-lg fs-9 fw-medium">Wade Warren</span><span class="mx-4">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
              </svg></span><span class="fs-9 lh-lg fw-medium">9 min read</span></div>
        </div></a><a class="btn mx-5 p-0 flex-shrink-0 w-100 mw-xs mw-md-md mw-lg-xl text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/skyscraper.png" alt="">
        <div class="mw-md">
          <h6 class="mb-4">Women in business: an interview with Sarah Townsend</h6>
          <p class="mw-sm text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          <div class="d-flex align-items-center"><img class="img-fluid" src="nightsable-assets/images/blog/avatar.png" alt=""><span class="ms-4 lh-lg fs-9 fw-medium">Wade Warren</span><span class="mx-4">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
              </svg></span><span class="fs-9 lh-lg fw-medium">9 min read</span></div>
        </div></a><a class="btn mx-5 p-0 flex-shrink-0 w-100 mw-xs mw-md-md mw-lg-xl text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/cash.png" alt="">
        <div class="mw-md">
          <h6 class="mb-4">Women in business: an interview with Sarah Townsend</h6>
          <p class="mw-sm text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          <div class="d-flex align-items-center"><img class="img-fluid" src="nightsable-assets/images/blog/avatar.png" alt=""><span class="ms-4 fs-9 lh-lg fw-medium">Wade Warren</span><span class="mx-4">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
              </svg></span><span class="fs-9 lh-lg fw-medium">9 min read</span></div>
        </div></a></div>
  </div>
</section>