Call to action UI Components – Flaro Library

<section class="pt-24 pb-28 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="text-center max-w-lg mx-auto">
      <h2 class="mb-5 text-6xl md:text-7xl font-bold font-heading text-center tracking-px-n leading-tight">Collaborate efficiently with the teams today</h2>
      <p class="mb-7 text-lg text-gray-600 font-medium">Amet minim mollit non deserunt ullamco.</p>
      <div class="mb-11 md:inline-block">
        <button class="py-4 px-6 w-full text-white font-semibold border border-indigo-700 rounded-xl shadow-4xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Join Free for 30 Days</button>
      </div>
      <div class="flex flex-wrap items-center justify-center -m-1">
        <div class="w-auto p-1">
          <div class="flex flex-wrap">
            <div class="w-auto">
              <img class="h-7 rounded-full" src="flaro-assets/images/cta/avatar-circle.png" alt="">
            </div>
            <div class="w-auto -ml-3">
              <img class="h-7 rounded-full" src="flaro-assets/images/cta/avatar-circle2.png" alt="">
            </div>
            <div class="w-auto -ml-3">
              <img class="h-7 rounded-full" src="flaro-assets/images/cta/avatar-circle3.png" alt="">
            </div>
          </div>
        </div>
        <div class="w-auto p-1">
          <p class="text-gray-600 font-medium">

<section class="has-background-white py-24 is-clipped">
    <div class="container px-8">
        <div class="has-text-centered mx-auto">
            <h2 class="mb-5 has-text-weight-bold has-text-centered title is-size-1">Collaborate efficiently with the teams today</h2>
            <p class="mb-7 has-text-weight-medium has-text-centered has-text-dark">Amet minim mollit non deserunt ullamco.</p>
            <a href="#" class="is-link button mb-11">Join Free for 30 Days</a>
            <div class="is-flex is-flex-wrap-wrap is-align-items-center is-justify-content-center -m-1">
                <div class="p-1">
                    <div class="is-flex is-flex-wrap-wrap">
                        <img src="flaro-assets/images/cta/avatar-circle.png" alt="">
                        <img src="flaro-assets/images/cta/avatar-circle2.png" alt="">
                        <img src="flaro-assets/images/cta/avatar-circle3.png" alt="">
                    </div>
                </div>
                <div class="p-1">
                    <p class="has-text-grey has-text-weight-semibold">
                        <span>Join</span>
                        <span class="has-text-weight-bold">250+</span>
                        <span>other startup founders</span>
                    </p>
                </div>
            </div>
        </div>
    </div>

<section class="py-12 py-sm-24">
  <div class="container">
    <div class="mw-xl mx-auto text-center">
      <h1 class="text-center h3 mb-5" >Collaborate efficiently with the teams today</h1>
      <p class="fs-8 text-secondary mb-8" >Amet minim mollit non deserunt ullamco.</p><a class="btn mb-8 btn-primary shadow" href="#" >Join Free for 30 Days</a>
      <div><img class="d-inline-block" src="flaro-assets/images/cta/avatar-circle.png" alt=""/><img class="d-inline-block ms-n4" src="flaro-assets/images/cta/avatar-circle2.png" alt=""/><img class="d-inline-block ms-n4" src="flaro-assets/images/cta/avatar-circle3.png" alt=""/><span class="d-inline-block ms-2 fs-9 text-secondary"><span >Join </span><span class="fw-bold" >250+</span><span >other startup founders</span></span></div>
    </div>
  </div>
</section>