Bootstrap 5 Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Bootstrap Component #201

Bootstrap

Flaro

<section class="py-12 py-sm-24 py-md-32 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="mw-lg mx-auto position-relative"><img class="position-absolute top-50 start-50 translate-middle" src="flaro-assets/images/sign-up/gradient2.svg" alt=""/>
      <div class="position-relative p-12 mb-8 rounded-4 border border-dark-light bg-black bg-opacity-25">
        <div class="mb-12 pb-12 text-center border-bottom border-dark-light">
          <h3 class="mb-4 fs-4 text-white" >Login to Flaro</h3>
          <p class="fs-8 text-secondary-light mb-0" >Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat the condim.</p>
        </div>
        <form action="">
          <div class="mb-4">
            <label class="form-label fw-light text-secondary-light" >Email Address *</label>
            <input class="form-control bg-transparent border-dark-light" type="email" placeholder="Enter email address"/>
          </div>
          <div class="mb-4">
            <label class="form-label fw-light text-secondary-light" >Password *</label>
            <input class="form-control bg-transparent border-dark-light" type="password" placeholder="*******"/>
          </div>
          <div class="d-flex mb-5 flex-wrap align-items-center justify-content-between">
            <div class="form-check">
              <input class="form-check-input bg-transparent border-dark-light" type="checkbox" value="" id=""/>
              <label class="form-check-label fs-9 text-white" for="" >Remember Me</label>
            </div>
            <div><a class="btn p-0 btn-link fs-9" href="#" >Forgot Password?</a></div>
          </div><a class="btn w-100 btn-primary" href="#" >Sign In</a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #202

Bootstrap

Flaro

<section class="py-12 py-sm-24 py-md-32">
  <div class="container position-relative">
    <div class="mw-6xl mx-auto">
      <div class="row">
        <div class="col-12 col-md-6 mb-16 mb-md-0">
          <div class="mw-md mw-md-lg mx-auto">
            <h2 class="mb-8" >Numbers telling the story</h2>
            <p class="mw-md text-secondary" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.</p>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="position-relative mw-md mx-auto">
            <div class="position-absolute bottom-0 start-0 mw-sm p-6">
              <div class="position-relative mb-6 p-6 bg-primary bg-opacity-75 rounded-4 border border-info overflow-hidden">
                <div class="position-absolute top-0 start-0 w-100 h-100" style="backdrop-filter: blur(10px);"></div>
                <div class="d-flex position-relative"><span class="me-4 fw-bold fs-5 text-white" >3M+</span>
                  <p class="fw-semibold fs-8 text-white mb-0" >Transactions over the period of 2022</p>
                </div>
              </div>
              <div class="position-relative p-6 bg-white bg-opacity-25 rounded-4 border border-secondary-light overflow-hidden">
                <div class="position-absolute top-0 start-0 w-100 h-100" style="backdrop-filter: blur(10px);"></div>
                <div class="d-flex position-relative"><span class="me-4 fw-bold fs-5 text-white" >3M+</span>
                  <p class="fw-semibold fs-8 text-white mb-0" >Transactions over the period of 2022</p>
                </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #203

Bootstrap

Flaro

<section class="py-12 py-sm-24 bg-primary position-relative overflow-hidden"><img class="position-absolute top-0 start-50 translate-middle-x h-100" src="flaro-assets/images/footers/gradient3.svg" alt=""/>
  <div class="container position-relative">
    <div class="row">
      <div class="col-12 col-lg-5 mb-16 mb-lg-0">
        <div class="mw-md">
          <h3 class="text-white mb-16" >Let&rsquo;s talk about your project.</h3><a class="btn btn-light" href="#" >Get A Free Quote</a>
        </div>
      </div>
      <div class="col-12 col-lg-7">
        <div class="row mb-16">
          <div class="col-6 col-md-4 mb-16 mb-md-0">
            <ul class="list-unstyled">
              <li class="mb-4"><a class="btn btn-link p-0 text-white" href="#" >Services</a></li>
              <li class="mb-4"><a class="btn btn-link p-0 text-white" href="#" >About Us</a></li>
              <li class="mb-4"><a class="btn btn-link p-0 text-white" href="#" >News &amp; Stories</a></li>
              <li><a class="btn btn-link p-0 text-white" href="#" >Roadmap</a></li>
            </ul>
          </div>
          <div class="col-6 col-md-4 mb-16 mb-md-0">
            <ul class="list-unstyled">
              <li class="mb-4"><a class="btn btn-link p-0 text-white" href="#" >Our Journeys</a></li>
              <li class="mb-4"><a class="btn btn-link p-0 text-white" href="#" >Pricing Plans</a></li>
              <li class="mb-4"><a class="btn btn-link p-0 text-white" href="#" >Roadmap</a></li>
              <li class="mb-4"><a class="btn btn-link p-0 text-white" href="#" >Terms &amp; Conditions</a></li>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #204

Bootstrap

Flaro

<section class="py-12 py-sm-24 pb-md-32 position-relative overflow-hidden">
  <div class="container position-relative"><img class="d-md-none position-absolute top-0 start-50 translate-middle-x" src="flaro-assets/images/testimonials/gradient3.svg" alt=""/>
    <div class="row mb-14 align-items-end position-relative">
      <div class="col-12 col-md-6 mb-6 mb-md-0">
        <h1 class="h3" >Customers love using Flaro.</h1>
      </div>
      <div class="col-12 col-md-6 text-md-end"><a class="btn p-0 btn-link" href="#" >See all our reviews</a></div>
    </div>
    <div class="row mb-n6 align-items-center position-relative"><img class="d-none d-md-block position-absolute top-0 start-50 mt-xl-n32 translate-middle-x" src="flaro-assets/images/testimonials/gradient3.svg" alt="" style="z-index: -1;"/>
      <div class="col-12 col-md-6 col-xl-3 mb-6 position-relative">
        <div class="mw-sm mx-auto h-100 py-6 px-8 bg-white bg-opacity-75 rounded-3">
          <svg width="114" height="18" viewbox="0 0 114 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.30769 0L12.1838 5.82662L18.6154 6.76111L13.9615 11.2977L15.0598 17.7032L9.30769 14.6801L3.55554 17.7032L4.65385 11.2977L0 6.76111L6.43162 5.82662L9.30769 0Z" fill="#F59E0B"></path>
            <path d="M32.923 0L35.7991 5.82662L42.2307 6.76111L37.5769 11.2977L38.6752 17.7032L32.923 14.6801L27.1709 17.7032L28.2692 11.2977L23.6154 6.76111L30.047 5.82662L32.923 0Z" fill="#F59E0B"></path>
            <path d="M56.5384 0L59.4145 5.82662L65.8461 6.76111L61.1923 11.2977L62.2906 17.7032L56.5384 14.6801L50.7863 17.7032L51.8846 11.2977L47.2307 6.76111L53.6623 5.82662L56.5384 0Z" fill="#F59E0B"></path>
            <path d="M80.1538 0L83.0298 5.82662L89.4615 6.76111L84.8076 11.2977L85.9059 17.7032L80.1538 14.6801L74.4016 17.7032L75.4999 11.2977L70.8461 6.76111L77.2777 5.82662L80.1538 0Z" fill="#F59E0B"></path>
            <path d="M103.769 0L106.645 5.82662L113.077 6.76111L108.423 11.2977L109.521 17.7032L103.769 14.6801L98.017 17.7032L99.1153 11.2977L94.4614 6.76111L100.893 5.82662L103.769 0Z" fill="#F59E0B"></path>
          </svg>
          <h5 class="mt-6 mb-6" >&ldquo;We love it.&rdquo;</h5>
          <p class="fs-7 mb-6" >If you haven&rsquo;t tried out Flaro App yet, I would definitely recommend it for both designers and developers!</p><span class="fs-9 fw-bold" >Jenny Wilson - Product Manager</span>
        </div>
      </div>
      <div class="col-12 col-md-6 col-xl-3 mb-6 position-relative">
        <div class="mw-sm mx-auto h-100 py-6 px-8 bg-white bg-opacity-75 rounded-3">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #205

Bootstrap

Flaro

<section class="py-20 py-md-32">
  <div class="container">
    <div class="row align-items-center mx-auto">
      <div class="col-12 col-md-6 mb-14 mb-md-0">
        <div class="mw-md mx-auto">
          <h1 class="h2 mb-8" >Get down to your business</h1>
          <p class="fs-7 mb-10" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p><a class="btn mb-12 btn-primary shadow" href="#" >Learn How to Save More</a>
          <div class="d-flex mw-sm align-items-start"><span>
              <svg width="45" height="45" viewbox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="39" height="27" rx="5" fill="#4ADE80"></rect>
                <rect width="39" height="27" rx="5" fill="#86EFAC"></rect>
                <rect x="26" y="18" width="18" height="26" rx="6" fill="white"></rect>
                <path d="M35 26C39.9706 26 44 24.2091 44 22C44 19.7909 39.9706 18 35 18C30.0294 18 26 19.7909 26 22C26 24.2091 30.0294 26 35 26Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M26 22V28C26 30.209 30.029 32 35 32C39.971 32 44 30.209 44 28V22" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M26 28V34C26 36.209 30.029 38 35 38C39.971 38 44 36.209 44 34V28" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M26 34V40C26 42.209 30.029 44 35 44C39.971 44 44 42.209 44 40V34" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M20 18C22.2091 18 24 16.2091 24 14C24 11.7909 22.2091 10 20 10C17.7909 10 16 11.7909 16 14C16 16.2091 17.7909 18 20 18Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span>
            <p class="ms-4 fs-9 text-secondary" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6"><img class="img-fluid" src="flaro-assets/images/features/feature2.png" alt=""/></div>
    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #206

Bootstrap

Flaro

<section class="pt-24 pb-lg-24 pt-md-40 bg-black position-relative"><img class="position-absolute bottom-0 end-0" src="flaro-assets/images/cta/gradient2.svg" alt=""/><img class="d-none d-lg-block position-absolute bottom-0 end-0 me-xl-64" src="flaro-assets/images/cta/man.png" alt=""/>
  <div class="container position-relative">
    <div class="mw-md mx-auto mb-16 mb-lg-0 mw-lg-none">
      <div class="row align-items-end">
        <div class="col-12 col-lg-6 col-xl-8 mb-16 mb-lg-0">
          <div class="mw-lg">
            <h1 class="h3 text-white mb-6" >Join &amp; get 30% discount right now</h1>
            <p class="text-secondary-light mb-8" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
            <div class="d-flex flex-column flex-md-row"><a class="btn mb-4 mb-md-0 me-md-4 btn-light fw-medium" href="#" >Try 30 days free trial</a><a class="btn btn-outline-secondary" href="#"><span class="ms-1 fw-medium text-white" >Chat with a member</span></a></div>
          </div>
        </div>
      </div>
    </div><img class="d-lg-none d-block w-100 mw-sm ms-auto" src="flaro-assets/images/cta/man.png" alt=""/>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #207

Bootstrap

Flaro

<section class="py-12 py-sm-24 position-relative overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="flaro-assets/images/blog/bg.jpeg" alt=""/>
  <div class="container">
    <div class="mw-lg mw-lg-xl py-12 px-8 px-md-12 rounded-4 bg-black bg-opacity-75 position-relative overflow-hidden">
      <div class="position-absolute top-0 start-0 w-100 h-100" style="backdrop-filter: blur(7px);"></div>
      <div class="position-relative"><span class="d-inline-block mb-8 py-1 px-2 fs-9 text-white text-uppercase border border-secondary rounded" >business</span>
        <h3 class="text-white mb-6" >How to handle your good employee for the business.</h3>
        <p class="text-secondary-light mb-12" >Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condim entum vitae vel purus.</p><a class="btn btn-link p-0 d-inline-flex align-items-center fw-light text-light" href="#"><span class="me-2" >Read Full Article</span>
          <svg width="16" height="14" viewbox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.5 1.75L14.75 7M14.75 7L9.5 12.25M14.75 7L1.25 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #208

Bootstrap

Flaro

<section class="py-12 py-sm-24 py-md-32 bg-info-light">
  <div class="container">
    <div class="position-relative py-24 px-6 rounded-4 overflow-hidden"><img class="position-absolute top-0 start-0 h-100 w-100" src="flaro-assets/images/logos/background-photo-blur.png" alt="" style="object-fit: cover;"/>
      <div class="position-relative">
        <div class="mw-xl mx-auto mb-24 mb-sm-40 text-center">
          <h2 class="mb-6 text-white" >Trusted by brands</h2>
          <p class="fs-7 text-light-dark mb-0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.</p>
        </div>
        <h6 class="text-center fs-9 fw-semibold text-light text-uppercase opacity-50 mb-6" >TRUSTED AND LOVED BY 300+ TECH FIRST TEAMS</h6>
        <div class="mw-3xl mx-auto">
          <div class="row mb-n6">
            <div class="col-12 col-sm-4 mb-6"><img class="img-fluid d-block mx-auto" src="flaro-assets/logos/brands/brand-large4.png" alt=""/></div>
            <div class="col-12 col-sm-4 mb-6"><img class="img-fluid d-block mx-auto" src="flaro-assets/logos/brands/brand-large2.png" alt=""/></div>
            <div class="col-12 col-sm-4 mb-6"><img class="img-fluid d-block mx-auto" src="flaro-assets/logos/brands/brand-large5.png" alt=""/></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #209

Bootstrap

Flaro

<section class="py-12 py-sm-24 py-md-32 overflow-hidden">
  <div class="container position-relative"><img class="position-absolute top-50 start-50 translate-middle" src="flaro-assets/images/http-codes/gradient3.svg" alt=""/>
    <div class="position-relative mw-lg mx-auto px-8 px-md-20 pt-10 pb-14 bg-white text-center rounded-4 shadow-lg"><img class="d-block mx-auto img-fluid" src="flaro-assets/images/http-codes/404.png" alt=""/>
      <p class="mt-n8 mb-32 fw-semibold text-secondary-light text-uppercase" >The page you are looking for is not found</p>
      <h4 class="fs-5 mb-4" >Try another page</h4>
      <p class="text-secondary-dark mb-8" >Lorem ipsum dolor sit amet consectrtur. Volutpat tempor condimentum vitae vel pur.</p><a class="btn p-0 btn-link fw-light d-inline-flex align-items-center" href="#">
        <svg width="14" height="12" viewbox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.66667 10.6667L1 6.00004M1 6.00004L5.66667 1.33337M1 6.00004L13 6.00004" stroke="#4F46E5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg><span class="ms-2" >Go Back to Homepage</span></a>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #210

Bootstrap

Flaro

<section class="py-12 py-sm-24 pb-md-32">
  <div class="container">
    <div class="mw-2xl mx-auto mb-24 text-center">
      <h2 class="mb-6" >Let&rsquo;s see how it works</h2>
      <p class="mw-md mx-auto text-secondary" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemen tum.</p>
    </div>
    <div class="position-relative rounded-4 overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100 img-fluid w-full" src="flaro-assets/images/how-it-works/woman-work.png" alt=""/>
      <div class="py-20 px-8 ps-md-24 position-relative"><img class="position-absolute top-0 start-0 h-100" src="flaro-assets/images/how-it-works/shadow-left-dark.png" alt=""/>
        <div class="mw-lg position-relative">
          <div class="d-flex">
            <div>
              <svg width="35" height="35" viewbox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="17.5" cy="17.5" r="17.5" fill="#4F46E5"></circle>
                <path d="M11.667 18.3333L15.0003 21.6666L23.3337 13.3333" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg><span class="d-block text-center">
                <svg width="2" height="150" viewbox="0 0 2 150" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <line x1="1.25" y1="3.27836e-08" x2="1.24999" y2="150" stroke="#52525B" stroke-width="1.5" stroke-dasharray="7 9"></line>
                </svg></span>
            </div>
            <div class="mw-sm ps-8 ps-sm-12"><span class="fs-9 text-secondary text-uppercase fw-semibold" >STEP 1</span>
              <h4 class="fs-6 mt-5 mb-3 text-white" >Choose A Package</h4>
              <p class="text-light-light" >Lorem ipsum dolor sit amet, to the  consectetur adipiscing elit.</p>
            </div>
          </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #211

Bootstrap

Flaro

<section class="py-12 py-sm-24 py-md-32 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="mw-lg mx-auto position-relative"><img class="position-absolute top-50 start-50 translate-middle" src="flaro-assets/images/sign-up/gradient2.svg" alt=""/>
      <div class="position-relative p-12 mb-8 rounded-4 border border-dark-light bg-black bg-opacity-25">
        <div class="mb-12 pb-12 text-center border-bottom border-dark-light">
          <h3 class="mb-4 fs-4 text-white" >Sign up</h3>
          <p class="fs-8 text-secondary-light mb-0" >Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat the condim.</p>
        </div>
        <form action="">
          <div class="mb-4">
            <label class="form-label fw-light text-secondary-light" >Full Name</label>
            <input class="form-control bg-transparent border-dark-light" type="text" placeholder="First &amp; last name"/>
          </div>
          <div class="mb-4">
            <label class="form-label fw-light text-secondary-light" >Email Address</label>
            <input class="form-control bg-transparent border-dark-light" type="email" placeholder="Enter email address"/>
          </div>
          <div class="mb-4">
            <label class="form-label fw-light text-secondary-light" >Password</label>
            <input class="form-control bg-transparent border-dark-light" type="password" placeholder="*******"/>
          </div>
          <div class="form-check mb-6">
            <input class="form-check-input" type="checkbox" value="" id=""/>
            <label class="form-check-label fs-9 text-white" for=""><span >By signing up, I agree to the</span><a class="btn btn-link p-0 fs-9" href="#" >Terms &amp; Conditions</a><span >of Flaro</span></label>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #212

Bootstrap

Flaro

<section class="py-12 py-sm-24">
  <div class="container">
    <div class="mw-md mx-auto text-center mb-20">
      <h3 class="mb-4" >Our Contacts</h3>
      <p class="fs-7 text-secondary" >Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condimentum.</p>
    </div>
    <div class="mw-6xl mx-auto">
      <div class="row align-items-center">
        <div class="col-md-6 order-last order-md-first">
          <div class="position-relative mw-lg mw-lg-none mx-auto">
            <div class="position-absolute top-0 start-0 m-6 mw-xs pe-sm-24">
              <div class="py-5 px-6 bg-white bg-opacity-25 rounded-4 border border-white" style="backdrop-filter: blur(10px);"><span class="fw-bold fs-2" >2014</span>
                <p class="mb-0" >Serving clients since last 10 years.</p>
              </div>
            </div><img class="d-block img-fluid w-100" src="flaro-assets/images/contact/man.png" alt=""/>
          </div>
        </div>
        <div class="col-md-6 mb-16 mb-md-0">
          <div class="mw-xs mx-auto">
            <div class="mb-12">
              <h6 class="fs-9 text-uppercase" >Email</h6><span class="d-block fs-8 text-secondary" >info@email.com</span><span class="fs-8 text-secondary" >support@gmail.com</span>
            </div>
            <div class="mb-12">
              <h6 class="fs-9 text-uppercase" >Phone</h6><span class="d-block fs-8 text-secondary" >+1 848 4125 690</span><span class="fs-8 text-secondary" >+1 848 4125 658</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #213

Bootstrap

Flaro

<section class="py-12 py-sm-24 bg-info-light position-relative overflow-hidden"><img class="d-none d-xl-block position-absolute top-0 h-100 start-0 ms-n20" src="flaro-assets/images/applications/manage.png" alt=""/><img class="position-absolute bottom-0 start-0" src="flaro-assets/images/applications/gradient3.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-md mx-auto me-xl-0">
      <h2 class="mb-6" >Manage all from anywhere</h2>
      <p class="fs-7 text-secondary mb-12" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus sagittis nulla duis non at sed eget. Tincidunt eget tempor nunc eget</p>
      <div class="d-flex mb-12 align-items-center"><a class="d-inline-block me-5" href="#"><img class="img-fluid" src="flaro-assets/images/applications/app-store.png" alt=""/></a><a class="d-inline-block" href="#"><img class="img-fluid" src="flaro-assets/images/applications/play-store.png" alt=""/></a></div>
      <ul class="list-unstyled mb-0">
        <li class="mb-3">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="10" cy="10" r="10" fill="#4F46E5"></circle>
            <path d="M5.91699 10.5834L8.25033 12.9167L14.0837 7.08337" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg><span class="ms-3" >Beautiful and awesome interface</span>
        </li>
        <li class="mb-3">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="10" cy="10" r="10" fill="#4F46E5"></circle>
            <path d="M5.91699 10.5834L8.25033 12.9167L14.0837 7.08337" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg><span class="ms-3" >Online collaborative anytime, anywhere.</span>
        </li>
        <li class="mb-3">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="10" cy="10" r="10" fill="#4F46E5"></circle>
            <path d="M5.91699 10.5834L8.25033 12.9167L14.0837 7.08337" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg><span class="ms-3" >More Plugins</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #214

Bootstrap

Flaro

<section class="py-12 py-sm-24 py-md-32">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 mb-16 mb-lg-0">
        <div class="mw-lg mx-auto">
          <div class="mw-md mb-24">
            <h3 class="mb-4" >Frequently Asked Questions</h3>
            <p class="text-secondary mb-0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat, tempor condimentum commodo.</p>
          </div>
          <button class="btn px-0 py-6 w-100 bg-white fw-medium text-start lh-base rounded-0 border-0 border-bottom">
            <div class="d-flex align-items-center justify-content-between">
              <div>
                <h6 class="fs-7 mb-0" >What happens if i go over my subscription limits?</h6>
              </div>
              <div class="ps-4">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="9" cy="9" r="9" fill="#2563EB"></circle>
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6 9.00002C6 8.66865 6.26863 8.40002 6.6 8.40002L11.4 8.40002C11.7314 8.40002 12 8.66865 12 9.00002C12 9.3314 11.7314 9.60002 11.4 9.60002L6.6 9.60002C6.26863 9.60002 6 9.3314 6 9.00002Z" fill="white"></path>
                </svg>
              </div>
            </div>
            <div class="mw-lg mt-4">
              <p class="mb-0 text-secondary" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat, tempor condimentum commodo tincidunt sit dictumst. Eu placerat to a arcu at sem vitae eros, purus nonprofit organizations for all,</p>
            </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #215

Bootstrap

Flaro

<section class="py-12 py-sm-24">
  <div class="container">
    <div class="mw-md mx-auto mb-16 text-center">
      <h2 class="mb-4" >Featured Jobs</h2>
      <p class="text-secondary" >Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condimentum vitae vel purus.</p>
    </div>
    <div class="mw-2xl mx-auto">
      <div class="mb-2 ps-5 py-5 pe-8 rounded-3 border">
        <div class="row justify-content-between align-items-center">
          <div class="col-12 col-sm-auto mb-8 mb-sm-0">
            <div><span class="d-inline-block mb-3 px-2 py-1 fs-10 text-primary text-uppercase bg-primary-light rounded" >Design</span>
              <h5 class="fs-6 mb-2" >Product Design</h5>
              <div class="d-flex align-items-center"><span class="fs-9 text-secondary" >Contract</span><span class="d-inline-block mx-2 fs-9 rounded-pill bg-secondary" style="width: 4px; height: 4px;"></span><span class="fs-9 text-secondary" >New York, USA</span></div>
            </div>
          </div>
          <div class="col-12 col-sm-auto"><a class="btn btn-primary d-flex ms-auto align-items-center justify-content-center p-0 rounded-pill" href="#" style="width: 44px; height: 44px;">
              <svg width="14" height="12" viewbox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.33333 1.33337L13 6.00004M13 6.00004L8.33333 10.6667M13 6.00004L1 6.00004" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></a></div>
        </div>
      </div>
      <div class="mb-2 ps-5 py-5 pe-8 rounded-3 border">
        <div class="row justify-content-between align-items-center">
          <div class="col-12 col-sm-auto mb-8 mb-sm-0">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #216

Bootstrap

Flaro

<section class="py-12 py-sm-24 pt-md-32 pt-xl-64 bg-info-light overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <div class="row mb-24">
        <div class="col-12 col-lg-4 mb-12">
          <div class="position-relative mw-sm mx-auto p-8 rounded-4 bg-white border border-primary-light border-opacity-25 overflow-hidden">
            <div class="position-absolute top-0 start-0 h-100 w-100" style="backdrop-filter: blur(23px);"></div>
            <div class="position-relative"><span class="fw-semibold fs-9 text-primary text-uppercase" >Basic</span>
              <h4 class="mt-8 mb-0" >Free</h4><span class="text-secondary fs-9" >No credit card required</span>
              <p class="mt-6 mb-4 text-secondary-dark" >Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Egestas lacus, blan dit pellentesque.</p><a class="btn w-100 btn-outline-light-dark text-dark" href="#" >Get Started Now</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4 mb-12">
          <div class="mw-sm mx-auto position-relative p-8 rounded-4 bg-white border border-primary-light border-opacity-25" style="box-shadow: 0px 53px 84px rgba(0, 0, 0, 0.2);"><img class="position-absolute top-0 end-0 mt-n9 mt-lg-n12 me-lg-n8" src="flaro-assets/images/pricing/popular.png" alt=""/>
            <div class="position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0 w-100" src="flaro-assets/images/pricing/gradient3.svg" alt=""/>
              <div class="position-relative"><span class="fw-semibold fs-9 text-primary text-uppercase" >Standard</span>
                <h4 class="mt-8 mb-0" >$19/mo</h4><span class="text-secondary fs-9" >No credit card required</span>
                <p class="mt-6 mb-4 text-secondary-dark" >Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Egestas lacus, blan dit pellentesque.</p><a class="btn w-100 btn-primary" href="#" >Get Started Now</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #217

Bootstrap

Flaro

<section class="py-12 py-sm-24 py-md-32 position-relative overflow-hidden"><img class="position-absolute start-50 bottom-0 translate-middle-x" src="flaro-assets/images/newsletter/gradient.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-lg mx-auto text-center"><span class="d-block mb-5 fs-9 fw-semibold text-primary text-uppercase" >Newsletter</span>
      <h3 class="mb-12" >Join to get exclusive contents for free.</h3>
      <form action="">
        <input class="form-control py-4 text-center mb-5" type="email" placeholder="Email address"/>
        <button class="btn mb-8 w-100 btn-primary" type="submit" >Join Now</button>
      </form>
    </div>
    <div class="d-sm-flex mb-n2 align-content-center justify-content-center">
      <div class="mb-2 me-8">
        <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3.75 9.75L6.75 12.75L14.25 5.25" stroke="#4F46E5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg><span class="ms-2" >Get weekly reports</span>
      </div>
      <div class="mb-2 me-8">
        <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3.75 9.75L6.75 12.75L14.25 5.25" stroke="#4F46E5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg><span class="ms-2" >Unlimited free resources</span>
      </div>
      <div class="mb-2">
        <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3.75 9.75L6.75 12.75L14.25 5.25" stroke="#4F46E5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg><span class="ms-2" >Premium contents</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #218

Bootstrap

Flaro

<section class="py-12 py-sm-24 py-md-32">
  <div class="container">
    <div class="mw-md mw-md-none mx-auto">
      <div class="row rounded-4 overflow-hidden">
        <div class="col-12 col-md-6 col-xl-6 mb-20 mb-md-0">
          <div class="ms-xl-24 mw-sm"><span class="fs-9 text-primary fw-semibold text-uppercase" >Meet The Team</span>
            <h2 class="mt-6 mb-6" >The team behind Flaro</h2>
            <p class="text-secondary" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
          </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3 p-md-0"><img class="img-fluid d-block w-100" src="flaro-assets/images/team/team-package4.png" alt="" style="object-fit: cover; height: 324px;"/></div>
        <div class="col-12 col-md-6 col-xl-3 p-md-0"><img class="img-fluid d-block w-100" src="flaro-assets/images/team/team-package3.png" alt="" style="object-fit: cover; height: 324px;"/></div>
        <div class="col-12 col-md-6 col-xl-3 p-md-0"><img class="img-fluid d-block w-100" src="flaro-assets/images/team/team-package1.png" alt="" style="object-fit: cover; height: 324px;"/></div>
        <div class="col-12 col-md-6 col-xl-3 p-md-0"><img class="img-fluid d-block w-100" src="flaro-assets/images/team/team-circle4.png" alt="" style="object-fit: cover; height: 324px;"/></div>
        <div class="col-12 col-md-6 col-xl-3 p-md-0"><img class="img-fluid d-block w-100" src="flaro-assets/images/team/team-circle5.png" alt="" style="object-fit: cover; height: 324px;"/></div>
        <div class="col-12 col-md-6 col-xl-3 p-md-0"><img class="img-fluid d-block w-100" src="flaro-assets/images/team/team-package2.png" alt="" style="object-fit: cover; height: 324px;"/></div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #219

Bootstrap

Flaro

<section class="py-16 position-relative overflow-hidden"><img class="position-absolute top-0 start-0 h-100" src="flaro-assets/images/footers/gradient4.svg" alt=""/>
  <div class="container position-relative">
    <div class="d-none d-md-inline-flex flex-wrap position-absolute top-50 start-50 translate-middle justify-content-center" style="z-index: 10;">
      <div class="p-4"><a class="btn p-0 btn-link text-secondary" href="#" >About</a></div>
      <div class="p-4"><a class="btn p-0 btn-link text-secondary" href="#" >Leadership</a></div>
      <div class="p-4"><a class="btn p-0 btn-link text-secondary" href="#" >Press/News</a></div>
      <div class="p-4"><a class="btn p-0 btn-link text-secondary" href="#" >Careers/Team</a></div>
      <div class="p-4"><a class="btn p-0 btn-link text-secondary" href="#" >Contact Us</a></div>
    </div>
    <div class="position-relative row justify-content-between align-items-center">
      <div class="col-auto"><a class="d-inline-block" href="#"><img src="flaro-assets/logos/flaro-logo-black-xl.svg" alt=""/></a></div>
      <div class="col-auto">
        <div class="d-flex align-items-center"><a class="btn p-0 btn-outline-secondary-dark d-inline-flex align-items-center justify-content-center me-2 rounded-pill" href="#" style="width: 35px; height: 35px;">
            <svg width="8" height="14" viewbox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.55736 5.2L5.55736 3.88C5.55736 3.308 5.69631 3 6.66894 3H7.87315V0.800003L6.02052 0.800003C3.70473 0.800003 2.77841 2.252 2.77841 3.88V5.2H0.925781L0.925781 7.4H2.77841L2.77841 14H5.55736L5.55736 7.4H7.59526L7.87315 5.2H5.55736Z" fill="#27272A"></path>
            </svg></a><a class="btn p-0 btn-outline-secondary-dark d-inline-flex align-items-center justify-content-center me-2 rounded-pill" href="#" style="width: 35px; height: 35px;">
            <svg width="14" height="11" viewbox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.6655 1.39641C13.1901 1.60149 12.6728 1.74907 12.1399 1.80656C12.6931 1.47788 13.1074 0.958619 13.3051 0.346204C12.7859 0.655036 12.2172 0.871595 11.6241 0.986274C11.3762 0.721276 11.0764 0.510168 10.7434 0.366102C10.4104 0.222036 10.0512 0.1481 9.68836 0.148902C8.22024 0.148902 7.03953 1.33893 7.03953 2.79928C7.03953 3.00436 7.06439 3.20943 7.10478 3.40673C4.90649 3.29177 2.94589 2.24155 1.64246 0.633614C1.40495 1.03927 1.2805 1.50117 1.28203 1.97123C1.28203 2.89094 1.74965 3.70191 2.46274 4.17885C2.0425 4.1623 1.63211 4.0468 1.26494 3.84173V3.87435C1.26494 5.16226 2.17533 6.22956 3.38866 6.47502C3.16084 6.5342 2.92649 6.56447 2.69111 6.56513C2.51866 6.56513 2.35554 6.54804 2.19086 6.52474C2.52643 7.57495 3.50362 8.33775 4.66724 8.3626C3.75685 9.07569 2.61654 9.49515 1.37835 9.49515C1.15619 9.49515 0.951119 9.48738 0.738281 9.46253C1.91278 10.216 3.30632 10.651 4.80706 10.651C9.67904 10.651 12.345 6.61484 12.345 3.11155C12.345 2.99659 12.345 2.88162 12.3372 2.76666C12.853 2.38914 13.3051 1.92152 13.6655 1.39641Z" fill="#27272A"></path>
            </svg></a><a class="btn p-0 btn-outline-secondary-dark d-inline-flex align-items-center justify-content-center rounded-pill" href="#" style="width: 35px; height: 35px;">
            <svg width="16" height="15" viewbox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.00094 0.360001C6.09046 0.360001 5.85022 0.368801 5.09958 0.402241C4.34894 0.437441 3.83766 0.555361 3.38974 0.729601C2.9199 0.906321 2.49433 1.18353 2.14278 1.54184C1.78468 1.89357 1.50751 2.31909 1.33054 2.7888C1.1563 3.23584 1.0375 3.748 1.00318 4.496C0.969738 5.2484 0.960937 5.48776 0.960937 7.40088C0.960937 9.31224 0.969738 9.5516 1.00318 10.3022C1.03838 11.052 1.1563 11.5633 1.33054 12.0112C1.51094 12.4741 1.75118 12.8666 2.14278 13.2582C2.5335 13.6498 2.92598 13.8909 3.38886 14.0704C3.83766 14.2446 4.34806 14.3634 5.09782 14.3978C5.84934 14.4312 6.0887 14.44 8.00094 14.44C9.91318 14.44 10.1517 14.4312 10.9032 14.3978C11.6521 14.3626 12.1651 14.2446 12.613 14.0704C13.0826 13.8936 13.5078 13.6164 13.8591 13.2582C14.2507 12.8666 14.4909 12.4741 14.6713 12.0112C14.8447 11.5633 14.9635 11.052 14.9987 10.3022C15.0321 9.5516 15.0409 9.31224 15.0409 7.4C15.0409 5.48776 15.0321 5.2484 14.9987 4.49688C14.9635 3.748 14.8447 3.23584 14.6713 2.7888C14.4944 2.31908 14.2172 1.89356 13.8591 1.54184C13.5077 1.1834 13.0821 0.906169 12.6121 0.729601C12.1633 0.555361 11.6512 0.436561 10.9023 0.402241C10.1508 0.368801 9.9123 0.360001 7.99918 0.360001H8.00182H8.00094ZM7.36998 1.62896H8.00182C9.8815 1.62896 10.1041 1.63512 10.846 1.66944C11.5324 1.70024 11.9055 1.81552 12.1537 1.91144C12.4819 2.03904 12.7169 2.19216 12.9633 2.43856C13.2097 2.68496 13.3619 2.91904 13.4895 3.24816C13.5863 3.49544 13.7007 3.86856 13.7315 4.55496C13.7658 5.2968 13.7729 5.51944 13.7729 7.39824C13.7729 9.27704 13.7658 9.50056 13.7315 10.2424C13.7007 10.9288 13.5854 11.301 13.4895 11.5492C13.3766 11.8549 13.1965 12.1313 12.9624 12.3579C12.716 12.6043 12.4819 12.7566 12.1528 12.8842C11.9064 12.981 11.5333 13.0954 10.846 13.127C10.1041 13.1605 9.8815 13.1684 8.00182 13.1684C6.12214 13.1684 5.89862 13.1605 5.15678 13.127C4.47038 13.0954 4.09814 12.981 3.84998 12.8842C3.54418 12.7715 3.26753 12.5916 3.04038 12.3579C2.80608 12.1309 2.62565 11.8543 2.51238 11.5483C2.41646 11.301 2.30118 10.9279 2.27038 10.2415C2.23694 9.49968 2.2299 9.27704 2.2299 7.39648C2.2299 5.5168 2.23694 5.29504 2.27038 4.5532C2.30206 3.8668 2.41646 3.49368 2.51326 3.24552C2.64086 2.91728 2.79398 2.68232 3.04038 2.43592C3.28678 2.18952 3.52086 2.03728 3.84998 1.90968C4.09814 1.81288 4.47038 1.69848 5.15678 1.6668C5.80622 1.63688 6.0579 1.62808 7.36998 1.6272V1.62896ZM11.7594 2.7976C11.6485 2.7976 11.5386 2.81945 11.4361 2.86191C11.3336 2.90436 11.2405 2.96659 11.1621 3.04504C11.0836 3.12348 11.0214 3.21661 10.9789 3.31911C10.9365 3.42161 10.9146 3.53146 10.9146 3.6424C10.9146 3.75334 10.9365 3.8632 10.9789 3.96569C11.0214 4.06819 11.0836 4.16132 11.1621 4.23976C11.2405 4.31821 11.3336 4.38044 11.4361 4.42289C11.5386 4.46535 11.6485 4.4872 11.7594 4.4872C11.9835 4.4872 12.1984 4.3982 12.3568 4.23976C12.5152 4.08133 12.6042 3.86646 12.6042 3.6424C12.6042 3.41835 12.5152 3.20347 12.3568 3.04504C12.1984 2.88661 11.9835 2.7976 11.7594 2.7976ZM8.00182 3.78496C7.52228 3.77748 7.04604 3.86547 6.60084 4.0438C6.15563 4.22214 5.75035 4.48726 5.40859 4.82373C5.06683 5.1602 4.79542 5.5613 4.61016 6.00367C4.4249 6.44604 4.32949 6.92084 4.32949 7.40044C4.32949 7.88004 4.4249 8.35484 4.61016 8.79721C4.79542 9.23958 5.06683 9.64068 5.40859 9.97715C5.75035 10.3136 6.15563 10.5787 6.60084 10.7571C7.04604 10.9354 7.52228 11.0234 8.00182 11.0159C8.95093 11.0011 9.85616 10.6137 10.5221 9.93726C11.1881 9.26084 11.5613 8.34967 11.5613 7.40044C11.5613 6.45121 11.1881 5.54004 10.5221 4.86362C9.85616 4.1872 8.95093 3.79977 8.00182 3.78496ZM8.00182 5.05304C8.62427 5.05304 9.22123 5.30031 9.66137 5.74045C10.1015 6.18059 10.3488 6.77755 10.3488 7.4C10.3488 8.02245 10.1015 8.61941 9.66137 9.05955C9.22123 9.49969 8.62427 9.74696 8.00182 9.74696C7.37937 9.74696 6.78241 9.49969 6.34227 9.05955C5.90213 8.61941 5.65486 8.02245 5.65486 7.4C5.65486 6.77755 5.90213 6.18059 6.34227 5.74045C6.78241 5.30031 7.37937 5.05304 8.00182 5.05304Z" fill="#27272A"></path>
            </svg></a></div>
      </div>
      <div class="col-12 d-md-none mt-10">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #220

Bootstrap

Flaro

<section class="py-12 py-sm-24 pb-md-32 overflow-hidden bg-info-light">
  <div class="container mb-20">
    <div class="mw-2xl mx-auto text-center">
      <h1 class="h3 mb-8" >See what others are saying</h1>
      <p class="fs-7" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam.</p>
    </div>
  </div>
  <div class="d-flex mb-3 justify-content-center">
    <div class="flex-shrink-0 mw-xs me-3">
      <div class="p-6 bg-white">
        <svg width="114" height="18" viewbox="0 0 114 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.30769 0L12.1838 5.82662L18.6154 6.76111L13.9615 11.2977L15.0598 17.7032L9.30769 14.6801L3.55554 17.7032L4.65385 11.2977L0 6.76111L6.43162 5.82662L9.30769 0Z" fill="#F59E0B"></path>
          <path d="M32.923 0L35.7991 5.82662L42.2307 6.76111L37.5769 11.2977L38.6752 17.7032L32.923 14.6801L27.1709 17.7032L28.2692 11.2977L23.6154 6.76111L30.047 5.82662L32.923 0Z" fill="#F59E0B"></path>
          <path d="M56.5384 0L59.4145 5.82662L65.8461 6.76111L61.1923 11.2977L62.2906 17.7032L56.5384 14.6801L50.7863 17.7032L51.8846 11.2977L47.2307 6.76111L53.6623 5.82662L56.5384 0Z" fill="#F59E0B"></path>
          <path d="M80.1538 0L83.0298 5.82662L89.4615 6.76111L84.8076 11.2977L85.9059 17.7032L80.1538 14.6801L74.4016 17.7032L75.4999 11.2977L70.8461 6.76111L77.2777 5.82662L80.1538 0Z" fill="#F59E0B"></path>
          <path d="M103.769 0L106.645 5.82662L113.077 6.76111L108.423 11.2977L109.521 17.7032L103.769 14.6801L98.017 17.7032L99.1153 11.2977L94.4614 6.76111L100.893 5.82662L103.769 0Z" fill="#F59E0B"></path>
        </svg>
        <p class="fs-7 mt-6 mb-6" >If you haven&rsquo;t tried out Flaro App yet, I would definitely recommend it for both designers and developers!</p>
        <div class="d-flex align-items-center mb-6">
          <div><img src="flaro-assets/images/testimonials/avatar.png" alt=""/></div>
          <div class="ps-4">
            <h6 class="mb-0" >Jacob Jones</h6><span class="fs-9 text-secondary" >@brooklysim</span>
          </div>
        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Framework

UI Library

Components

Bootstrap Component #201

Get the code for 13,400+ components

Bootstrap Component #202

Get the code for 13,400+ components

Bootstrap Component #203

Get the code for 13,400+ components

Bootstrap Component #204

Get the code for 13,400+ components

Bootstrap Component #205

Get the code for 13,400+ components

Bootstrap Component #206

Get the code for 13,400+ components

Bootstrap Component #207

Get the code for 13,400+ components

Bootstrap Component #208

Get the code for 13,400+ components

Bootstrap Component #209

Get the code for 13,400+ components

Bootstrap Component #210

Get the code for 13,400+ components

Bootstrap Component #211

Get the code for 13,400+ components

Bootstrap Component #212

Get the code for 13,400+ components

Bootstrap Component #213

Get the code for 13,400+ components

Bootstrap Component #214

Get the code for 13,400+ components

Bootstrap Component #215

Get the code for 13,400+ components

Bootstrap Component #216

Get the code for 13,400+ components

Bootstrap Component #217

Get the code for 13,400+ components

Bootstrap Component #218

Get the code for 13,400+ components

Bootstrap Component #219

Get the code for 13,400+ components

Bootstrap Component #220

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support