About Components in Mirga library

<section class="py-12 md:py-24 bg-neutral-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 lg:w-2/3 p-3">
        <div class="bg-white rounded-4xl py-16 px-12 h-full">
          <div class="flex flex-col justify-between h-full">
            <h1 class="font-heading mb-16 text-6xl sm:text-9xl xl:text-11xl text-neutral-800 font-semibold max-w-4xl font-heading">
              <span class="mr-3">Empowering through online</span>
              <span class="relative inline-block">
                <span class="relative z-10">learning.</span>
                <span class="absolute -bottom-2 left-0 h-2.5 w-full bg-green-100 rounded-full"></span>
              </span>
            </h1>
            <p class="text-neutral-600 text-2xl font-semibold tracking-tight">Your journey to digital excellence starts here.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-3">
        <div class="bg-white rounded-4xl py-16 px-12 h-full">
          <div class="flex flex-col items-start justify-between h-full">
            <div class="mb-16 lg:mb-44">
              <span class="inline-block text-neutral-600 text-2xl font-semibold mb-6 tracking-tight">Completed Projects</span>
              <h2 class="font-heading text-8xl md:text-10xl font-semibold mb-12 font-heading">400+</h2>
              <span class="inline-block text-neutral-600 text-2xl font-semibold mb-6 tracking-tight">Years of operation</span>
              <h2 class="font-heading text-8xl md:text-10xl font-semibold font-heading">35</h2>
            </div>
            <a class="inline-flex justify-center items-center text-center h-20 p-5 font-semibold tracking-tight text-2xl text-white bg-neutral-900 hover:bg-neutral-800 focus:bg-neutral-800 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-light bg-opacity-25">
  <div class="container mw-xl mw-md-7xl">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-7 col-xl-8 mb-8 mb-md-0">
        <div class="px-8 px-md-12 py-16 h-100 bg-white rounded-4">
          <div class="d-flex flex-column align-items-start h-100">
            <h2 class="d-none d-lg-inline-block font-heading mb-16 mb-lg-52">
              <span>Empowering through online</span>
              <span class="position-relative d-inline-block">
                <span>learning.</span>
                <div class="py-1 bg-success rounded-pill"></div>
              </span>
            </h2>
            <h2 class="h4 d-lg-none font-heading mb-16 mb-lg-52">
              <span>Empowering through online</span>
              <span class="position-relative d-inline-block">
                <span>learning.</span>
                <div class="py-1 bg-success rounded-pill"></div>
              </span>
            </h2>
            <p class="lead mt-auto mb-0">Your journey to digital excellence starts here.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-5 col-xl-4">
        <div class="px-8 px-md-12 py-16 h-100 bg-white rounded-4">
          <div class="d-flex flex-column align-items-start h-100">
            <span class="d-block fs-5 lead mb-4">Completed Projects</span>
            <span class="display-3 fw-bold text-dark mb-12">400+</span>
            <span class="d-block fs-5 lead mb-4">Years of operation</span>
            <span class="d-block mb-12 display-3 fw-bold text-dark">35</span>
            <a class="btn mt-auto btn-primary" href="#">More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>