Pricing UI Components – Flaro Library

<section class="relative py-36 bg-blueGray-50 overflow-hidden">
  <img class="absolute top-1/2 right-0 transform -translate-y-1/2" src="flaro-assets/images/pricing/gradient.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <h2 class="mb-16 lg:mb-52 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Pick a plan</h2>
          <h3 class="mb-6 text-lg text-gray-900 font-semibold leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemen.</h3>
          <p class="font-medium text-gray-600 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volut pat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros, purus non, eu. Adipiscing vitae amet nunc volutpat sit. Enim eu integer duis arcu.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md mx-auto overflow-hidden rounded-3xl shadow-8xl">
          <div class="p-9">
            <span class="mb-7 inline-block text-sm text-gray-500 font-semibold uppercase tracking-px">Features included:</span>
            <ul>
              <li class="mb-4 flex items-center">
                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <p class="font-semibold leading-normal">3 Team Members</p>
              </li>
              <li class="mb-4 flex items-center">
                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="has-background-light py-24 is-clipped is-relative">
    <img class="is-absolute is-right-0" style="top: 50%; transform: translateY(-50%);" src="flaro-assets/images/pricing/gradient.svg" alt="">
    <div class="container px-8">
        <div class="columns">
            <div class="column is-6">
                <h2 class="mb-16 title is-size-1 has-text-weight-bold">Pick a plan</h2>
                <h3 class="mb-6 has-text-dark has-text-weight-semibold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemen.</h3>
                <p class="has-text-weight-medium has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volut pat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros, purus non, eu. Adipiscing vitae amet nunc volutpat sit. Enim eu integer duis arcu.</p>
            </div>
            <div class="column is-6">
                <div class="mx-auto is-clipped" style="border-radius: 20px;">
                    <div class="p-9" style="background: rgba(255, 255, 255, 0.09);">
                        <span class="mb-7 is-inline-block has-text-grey has-text-weight-semibold">Features included:</span>
                        <ul>
                            <li class="mb-4 is-flex is-align-content-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                                <p class="has-text-weight-semibold has-text-dark">3 Team Members</p>
                            </li>
                            <li class="mb-4 is-flex is-align-content-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>

<section class="py-12 py-sm-24 py-md-32 bg-info-light">
  <div class="container">
    <div class="mw-6xl mx-auto">
      <div class="row">
        <div class="col-12 col-lg-6 mb-16 mb-lg-0">
          <div class="mw-md mx-auto">
            <h2 class="mb-24 mb-md-52" >Pick a plan</h2>
            <p class="fw-semibold fs-8 mb-6" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemen.</p>
            <p class="text-secondary mb-0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volut pat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros, purus non, eu. Adipiscing vitae amet nunc volutpat sit. Enim eu integer duis arcu.</p>
          </div>
        </div>
        <div class="col-12 col-lg-6">
          <div class="position-relative mw-md mx-auto"><img class="img-fluid position-absolute top-50 start-0 ms-n40 translate-middle-y" src="flaro-assets/images/pricing/gradient5.svg" alt=""/>
            <div class="mw-md rounded-4 overflow-hidden shadow-lg position-relative z-10">
              <div class="p-8 position-relative overflow-hidden"><img class="img-fluid position-absolute top-0 start-0 -bottom-2 opacity-25" src="flaro-assets/images/pricing/gradient.svg" alt="" style="min-width: 700px;"/>
                <h6 class="fs-9 text-uppercase text-secondary mb-6" >Features included:</h6>
                <ul class="list-unstyled">
                  <li class="mb-4">
                    <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg><span class="ms-2 fw-semibold" >3 Team Members</span>
                  </li>
                  <li class="mb-4">
                    <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">