Pricing Components in Mirga library

<section class="py-12 md:py-24 bg-neutral-900">
  <div class="container mx-auto px-4">
    <div class="mb-12 md:mb-20 max-w-3xl">
      <h1 class="mb-10 text-6xl sm:text-9xl xl:text-11xl text-white font-semibold font-heading">Pricing</h1>
      <p class="text-2xl text-neutral-300 font-semibold tracking-tight">Simple pricing that fits for everyone for the price of a cup of coffee.Start for free, no credit card required.</p>
    </div>
    <div class="max-w-8xl mx-auto">
      <div class="mx-auto overflow-x-auto overflow-y-hidden">
        <div class="min-w-max">
          <div class="flex flex-wrap">
            <div class="w-1/3 p-3">
              <div class="flex flex-wrap">
                <div class="w-full">
                  <div style="height: 64px;"></div>
                </div>
                <div class="w-full">
                  <div style="height: 114px;">
                    <div class="w-64">
                      <h5 class="mb-4 text-5xl sm:text-6xl text-white font-semibold font-heading">Lite</h5>
                      <p class="text-lg text-neutral-300 font-medium tracking-tight">The house by the pond cras ornare.</p>
                    </div>
                  </div>
                </div>
                <div class="w-full">
                  <div class="py-6 flex flex-col justify-end" style="height: 123px;">
                    <p class="text-lg text-white font-medium tracking-tight">Cloud storage</p>
                  </div>
                </div>
                <div class="w-full">
                  <div class="py-5 flex flex-col justify-center" style="height: 74px;">
                    <p class="text-lg text-white font-medium tracking-tight">Users</p>
                  </div>
                </div>
                <div class="w-full">
                  <div class="py-5 flex flex-col justify-center" style="height: 74px;">
                    <p class="text-lg text-white font-medium tracking-tight">Commercial rights</p>
                  </div>
                </div>
                <div class="w-full"></div>
              </div>
            </div>
            <div class="w-1/3 p-3">
              <div class="w-full">
                <div class="flex items-center px-10 bg-neutral-700 rounded-t-4xl border-b border-neutral-500" style="height: 64px;">
                  <h5 class="text-2xl text-white font-semibold tracking-tight font-heading">Starter</h5>
                </div>
              </div>
              <div class="w-full">
                <div class="px-10 pt-14 flex flex-col justify-center bg-neutral-800" style="height: 114px;">
                  <h5 class="text-5xl text-white font-semibold tracking-tight font-heading">
                    $19.99
                    <span class="ml-6 text-base text-neutral-300 font-medium">/per mo</span>
                  </h5>
                </div>
              </div>
              <div class="w-full">
                <div class="px-10 py-6 flex flex-col justify-end bg-neutral-800" style="height: 123px;">
                  <div class="flex items-center -m-2">
                    <div class="w-auto p-2">
                      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="13.5" stroke="white"></circle><line x1="7.35355" y1="14.6464" x2="11.3536" y2="18.6464" stroke="white"></line><line x1="21.3536" y1="9.35355" x2="11.3536" y2="19.3536" stroke="white"></line></svg>
                    </div>
                    <div class="w-auto p-2">
                      <p class="text-white font-medium tracking-tight">10TB</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="w-full">
                <div class="px-10 flex flex-col justify-center bg-neutral-800" style="height: 74px;">
                  <div class="flex items-center -m-2">
                    <div class="w-auto p-2">
                      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="13.5" stroke="white"></circle><line x1="7.35355" y1="14.6464" x2="11.3536" y2="18.6464" stroke="white"></line><line x1="21.3536" y1="9.35355" x2="11.3536" y2="19.3536" stroke="white"></line></svg>
                    </div>
                    <div class="w-auto p-2">
                      <p class="text-white font-medium tracking-tight">20 team members</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="w-full">
                <div class="px-10 flex flex-col justify-center bg-neutral-800" style="height: 74px;">
                  <div class="flex items-center -m-2">
                    <div class="w-auto p-2">
                      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="13.5" stroke="white"></circle><line x1="7.35355" y1="14.6464" x2="11.3536" y2="18.6464" stroke="white"></line><line x1="21.3536" y1="9.35355" x2="11.3536" y2="19.3536" stroke="white"></line></svg>
                    </div>
                    <div class="w-auto p-2">
                      <p class="text-white font-medium tracking-tight">Yes</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="w-full">
                <div style="height: 237px;">
                  <div class="bg-neutral-800 w-full h-full rounded-b-4xl"></div>
                </div>
              </div>
            </div>
            <div class="w-1/3 p-3">
              <div class="w-full">
                <div class="flex items-center px-10 bg-neutral-700 rounded-t-4xl border-b border-neutral-500" style="height: 64px;">
                  <h5 class="text-2xl text-white font-semibold tracking-tight font-heading">Professional</h5>
                </div>
              </div>
              <div class="w-full">
                <div class="px-10 pt-14 flex flex-col justify-center bg-neutral-800" style="height: 114px;">
                  <h5 class="text-5xl text-white font-semibold tracking-tight font-heading">
                    $19.99
                    <span class="ml-6 text-base text-neutral-300 font-medium">/per mo</span>
                  </h5>
                </div>
              </div>
              <div class="w-full">
                <div class="px-10 py-6 flex flex-col justify-end bg-neutral-800" style="height: 123px;">
                  <div class="flex items-center -m-2">
                    <div class="w-auto p-2">
                      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="13.5" stroke="white"></circle><line x1="7.35355" y1="14.6464" x2="11.3536" y2="18.6464" stroke="white"></line><line x1="21.3536" y1="9.35355" x2="11.3536" y2="19.3536" stroke="white"></line></svg>
                    </div>
                    <div class="w-auto p-2">
                      <p class="text-white font-medium tracking-tight">10TB</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="w-full">
                <div class="px-10 flex flex-col justify-center bg-neutral-800" style="height: 74px;">
                  <div class="flex items-center -m-2">
                    <div class="w-auto p-2">
                      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="13.5" stroke="white"></circle><line x1="7.35355" y1="14.6464" x2="11.3536" y2="18.6464" stroke="white"></line><line x1="21.3536" y1="9.35355" x2="11.3536" y2="19.3536" stroke="white"></line></svg>
                    </div>
                    <div class="w-auto p-2">
                      <p class="text-white font-medium tracking-tight">20 team members</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="w-full">
                <div class="px-10 flex flex-col justify-center bg-neutral-800" style="height: 74px;">
                  <div class="flex items-center -m-2">
                    <div class="w-auto p-2">
                      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="13.5" stroke="white"></circle><line x1="7.35355" y1="14.6464" x2="11.3536" y2="18.6464" stroke="white"></line><line x1="21.3536" y1="9.35355" x2="11.3536" y2="19.3536" stroke="white"></line></svg>
                    </div>
                    <div class="w-auto p-2">
                      <p class="text-white font-medium tracking-tight">Yes</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="w-full">
                <div style="height: 237px;">
                  <div class="bg-neutral-800 w-full h-full rounded-b-4xl"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-dark overflow-hidden">
  <div class="container mw-xl mw-lg-8xl">
    <div class="mw-3xl mb-20">
      <h2 class="font-heading text-white mb-10">Pricing</h2>
      <p class="lead fs-5 text-light text-opacity-50 mb-0">Simple pricing that fits for everyone for the price of a cup of coffee. Start for free, no credit card required.</p>
    </div>
    <div class="pb-5 overflow-x-scroll" style="max-width: 100%;">
      <div class="row flex-nowrap" style="min-width: 100%;">
        <div class="flex-shrink-0 col-4 overflow-hidden" style="min-width: 340px;">
          <div class="mw-xs pe-10 pt-20 mx-lg-auto">
            <span class="display-5 mb-4 fw-semibold text-white">Lite</span>
            <p class="lead text-light text-opacity-50 mb-24">The house by the pond cras ornare.</p>
            <div class="position-relative mb-12">
              <span class="fs-7 fw-medium text-white">Cloud storage</span>
            </div>
            <div class="position-relative mb-12">
              <span class="fs-7 fw-medium text-white">Users</span>
            </div>
            <div class="position-relative mb-12">
              <span class="fs-7 fw-medium text-white">Commercial rights</span>
            </div>
          </div>
        </div>
        <div class="flex-shrink-0 col-4" style="min-width: 380px;">
          <div>
            <div class="py-4 px-10 bg-light-dark bg-opacity-25 border-bottom border-light border-opacity-25 rounded-top-4">
              <span class="fs-5 fw-bold text-white">Starter</span>
            </div>
            <div class="pt-12 pb-40 px-10 bg-dark-light rounded-bottom-4">
              <div class="d-flex mb-24 align-items-center">
                <span class="fs-2 fw-bold text-white">$19.99</span>
                <span class="ms-4 mb-n4 fw-medium text-light text-opacity-50">/per mo</span>
              </div>
              <div class="position-relative mb-12">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="13.5" stroke="white"></circle><line x1="7.35355" y1="14.6464" x2="11.3536" y2="18.6464" stroke="white"></line><line x1="21.3536" y1="9.35355" x2="11.3536" y2="19.3536" stroke="white"></line></svg>
                <span class="ms-6 text-white fw-medium">10TB</span>
              </div>
              <div class="position-relative mb-12">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="13.5" stroke="white"></circle><line x1="7.35355" y1="14.6464" x2="11.3536" y2="18.6464" stroke="white"></line><line x1="21.3536" y1="9.35355" x2="11.3536" y2="19.3536" stroke="white"></line></svg>
                <span class="ms-6 text-white fw-medium">20 team members</span>
              </div>
              <div class="position-relative">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="13.5" stroke="white"></circle><line x1="7.35355" y1="14.6464" x2="11.3536" y2="18.6464" stroke="white"></line><line x1="21.3536" y1="9.35355" x2="11.3536" y2="19.3536" stroke="white"></line></svg>
                <span class="ms-6 text-white fw-medium">Yes</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-shrink-0 col-4" style="min-width: 380px;">
          <div>
            <div class="py-4 px-10 bg-light-dark bg-opacity-25 border-bottom border-light border-opacity-25 rounded-top-4">
              <span class="fs-5 fw-bold text-white">Professional</span>
            </div>
            <div class="pt-12 pb-40 px-10 bg-dark-light rounded-bottom-4">
              <div class="d-flex mb-24 align-items-center">
                <span class="fs-2 fw-bold text-white">$19.99</span>
                <span class="ms-4 mb-n4 fw-medium text-light text-opacity-50">/per mo</span>
              </div>
              <div class="position-relative mb-12">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="13.5" stroke="white"></circle><line x1="7.35355" y1="14.6464" x2="11.3536" y2="18.6464" stroke="white"></line><line x1="21.3536" y1="9.35355" x2="11.3536" y2="19.3536" stroke="white"></line></svg>
                <span class="ms-6 text-white fw-medium">10TB</span>
                <div class="position-absolute bottom-0 end-0 mb-n6 me-n10 w-100 border-bottom border-primary-light" style="min-width: 1900px;"></div>
              </div>
              <div class="position-relative mb-12">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="13.5" stroke="white"></circle><line x1="7.35355" y1="14.6464" x2="11.3536" y2="18.6464" stroke="white"></line><line x1="21.3536" y1="9.35355" x2="11.3536" y2="19.3536" stroke="white"></line></svg>
                <span class="ms-6 text-white fw-medium">20 team members</span>
                <div class="position-absolute bottom-0 end-0 mb-n6 me-n10 w-100 border-bottom border-primary-light" style="min-width: 1900px;"></div>
              </div>
              <div class="position-relative">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="13.5" stroke="white"></circle><line x1="7.35355" y1="14.6464" x2="11.3536" y2="18.6464" stroke="white"></line><line x1="21.3536" y1="9.35355" x2="11.3536" y2="19.3536" stroke="white"></line></svg>
                <span class="ms-6 text-white fw-medium">Yes</span>
                <div class="position-absolute bottom-0 end-0 mb-n6 me-n10 w-100 border-bottom border-primary-light" style="min-width: 1900px;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>