Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
AdminKit Horizon UI Dashboard Chakra UI Dashboard Motion Landing Library Asteria Dashboard Soft UI Dashboard Motion Landing Library React Riva Dashboard Tailwind Soft UI Design System Argon Dashboard Soft UI Dashboard Tailwind
All 689
Forms 16
Charts 21
Navbars 45
Sidebars 27
Typography 42
Components 62
Tables 34
Cards 70
Contact Us 9
Testimonials 19
General 6
Features 25
Cards Section 38
Teams Section 11
Faq 9
Headers 47
Blogs 15
Contacts Section 9
Profiles Section 13
Charts Section 7
Tables Section 15
Contents 18
Logo Areas 12
Projects Section 14
Stats 13
Authentication 15
Call To Actions 21
Http Codes 6
Teams 16
Pricing 13

UI Components Library

Discover 689 components available in Loopple’s library! Create modern templates without creativity of a designer

Profile Card

Component from Horizon UI Dashboard Builder 
<div data-type=”div” className="flex flex-col justify-center items-center w-full h-[100vh] draggable">
  <div data-type=”div” className="relative flex flex-col items-center rounded-[20px] w-full mx-auto p-4 bg-white bg-clip-border shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:!shadow-none">
    <div data-type=”div” className="relative flex h-32 w-full justify-center rounded-xl bg-cover">
      <img data-type=”img” src="https://horizon-tailwind-react-git-tailwind-components-horizon-ui.vercel.app/static/media/banner.ef572d78f29b0fee0a09.png" className="absolute flex h-32 w-full justify-center rounded-xl bg-cover" /> 
      <div data-type=”div” className="absolute -bottom-12 flex h-[87px] w-[87px] items-center justify-center rounded-full border-[4px] border-white bg-pink-400 dark:!border-navy-700">
        <img data-type=”img” className="h-full w-full rounded-full" src="https://horizon-tailwind-react-git-tailwind-components-horizon-ui.vercel.app/static/media/avatar11.1060b63041fdffa5f8ef.png" alt="" />
      </div>
    </div> 
    <div data-type=”div” className="mt-16 flex flex-col items-center">
      <h4 data-type=”h4” className="text-xl font-bold text-navy-700 dark:text-white">
        Adela Parkson
      </h4>
      <p data-type=”p” className="text-base font-normal text-gray-600">Product Manager</p>
    </div> 
    <div data-type=”div” className="mt-6 mb-3 flex gap-5">
      <div data-type=”div” className="flex flex-col items-center justify-center">
        <p data-type=”p” className="text-2xl font-bold text-navy-700 dark:text-white">17</p>
        <p data-type=”p” className="text-sm font-normal text-gray-600">Posts</p>
      </div>
      <div data-type=”div” className="flex flex-col items-center justify-center">
        <p data-type=”p” className="text-2xl font-bold text-navy-700 dark:text-white">
          9.7K
        </p>
        <p data-type=”p” className="text-sm font-normal text-gray-600">Followers</p>
      </div>
      <div data-type=”div” className="flex flex-col items-center justify-center">
        <p data-type=”p” className="text-2xl font-bold text-navy-700 dark:text-white">
          434
        </p>
        <p data-type=”p” className="text-sm font-normal text-gray-600">Following</p>
      </div>
    </div>
  </div>
</div>

Teams Section With Text In The Left And Big Profile Images On The Right

Component from Motion Landing Library Builder
PRO Component

Footer With Logo Input And Multiple Links

Component from Motion Landing Library Builder
Requires JavaScript

Pricing 1

Component from Soft UI Design System Builder 
<section class="py-4 bg-gray-100 draggable">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-8 mx-auto mb-4 text-center">
        <h3>Pick the best plan for you</h3>
        <p>You have Free Unlimited Updates and Premium Support on each package.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 col-md-6">
        <div class="card card-pricing">
          <div class="card-header bg-gradient-dark text-center pt-4 pb-5 position-relative">
            <div class="z-index-1 position-relative">
              <h5 class="text-white">Freelancer</h5>
              <h1 class="text-white mt-2 mb-0">
                <small>$</small><span>199</span></h1>
              <h6 class="text-white">per year</h6>
            </div>
          </div>
          <div class="position-relative mt-n5" style="height: 50px;">
            <div class="position-absolute w-100">
                <svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
                  <defs>
                    <path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
                  </defs>
                  <g class="moving-waves">
                    <use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
                    <use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
                    <use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
                    <use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
                    <use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
                    <use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
                  </g>
                </svg>
              </div>
          </div>
          <div class="card-body text-center">
            <ul class="list-unstyled max-width-200 mx-auto">
              <li>
                <b>10</b> Projects
                <hr class="horizontal dark">
              </li>
              <li>
                <b>1</b> Team Members
                <hr class="horizontal dark">
              </li>
              <li>
                <b>5</b> Personal Contacts
                <hr class="horizontal dark">
              </li>
              <li>
                <b>500</b> Messages
              </li>
            </ul>
            <a href="javascript:;" class="btn bg-gradient-dark w-100 mt-4 mb-0">
              Get started
            </a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 mt-5 mt-sm-0 ">
        <div class="card card-pricing">
          <div class="card-header text-center pt-4 pb-5 position-relative" style="background-image: url('https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/curved-images/curved6-small.jpg');background-size: cover;">
            <span class="mask bg-gradient-dark opacity-4 border-radius-lg"></span>
            <div class="z-index-1 position-relative">
              <h5 class="text-white">Startup</h5>
              <h1 class="text-white mt-2 mb-0">
                <small>$</small><span>349</span></h1>
              <h6 class="text-white">per year</h6>
            </div>
          </div>
          <div class="position-relative mt-n5" style="height: 50px;">
            <div class="position-absolute w-100">
                <svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
                  <defs>
                    <path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
                  </defs>
                  <g class="moving-waves">
                    <use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
                    <use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
                    <use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
                    <use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
                    <use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
                    <use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
                  </g>
                </svg>
              </div>
          </div>
          <div class="card-body text-center">
            <ul class="list-unstyled max-width-200 mx-auto">
              <li>
                <b>10</b> Projects
                <hr class="horizontal dark">
              </li>
              <li>
                <b>1</b> Team Members
                <hr class="horizontal dark">
              </li>
              <li>
                <b>5</b> Personal Contacts
                <hr class="horizontal dark">
              </li>
              <li>
                <b>500</b> Messages
              </li>
            </ul>
            <a href="javascript:;" class="btn bg-gradient-primary w-100 mt-4 mb-0">
              Get started
            </a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 mt-5 mt-lg-0 mx-md-auto">
        <div class="card card-pricing">
          <div class="card-header bg-gradient-dark text-center pt-4 pb-5 position-relative">
            <div class="z-index-1 position-relative">
              <h5 class="text-white">Company</h5>
              <h1 class="text-white mt-2 mb-0">
                <small>$</small><span>779</span></h1>
              <h6 class="text-white">per year</h6>
            </div>
          </div>
          <div class="position-relative mt-n5" style="height: 50px;">
            <div class="position-absolute w-100">
                <svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
                  <defs>
                    <path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
                  </defs>
                  <g class="moving-waves">
                    <use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
                    <use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
                    <use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
                    <use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
                    <use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
                    <use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
                  </g>
                </svg>
              </div>
          </div>
          <div class="card-body text-center">
            <ul class="list-unstyled max-width-200 mx-auto">
              <li>
                <b>10</b> Projects
                <hr class="horizontal dark">
              </li>
              <li>
                <b>1</b> Team Members
                <hr class="horizontal dark">
              </li>
              <li>
                <b>5</b> Personal Contacts
                <hr class="horizontal dark">
              </li>
              <li>
                <b>500</b> Messages
              </li>
            </ul>
            <a href="javascript:;" class="btn bg-gradient-dark w-100 mt-4 mb-0">
              Get started
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
var total = document.querySelectorAll('.nav-pills');

total.forEach(function(item, i){
  var moving_div = document.createElement('div');
  var first_li = item.querySelector('li .nav-link.active');
  var tab = first_li.cloneNode();
  tab.innerHTML = "-";

  moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link');
  moving_div.appendChild(tab);
  item.appendChild(moving_div);

  var list_length = item.getElementsByTagName("li").length;
  let nodes = Array.from( first_li.closest('ul').children )
  let index = nodes.indexOf( first_li.closest('li') )+1;
  let sum = 0;

  moving_div.style.padding = '0px';
  moving_div.style.width = item.querySelector('li .nav-link.active').offsetWidth+'px';

  if(item.classList.contains('flex-column')){
    for(var j = 1; j<index; j++){
      sum +=  item.querySelector('li:nth-child('+j+')').offsetHeight;
    }
    moving_div.style.transform = 'translate3d(0px,'+sum+'px, 0px)';
  } else {
    for(var j = 1; j<index; j++){
      sum +=  item.querySelector('li:nth-child('+j+')').offsetWidth;
    }
    moving_div.style.transform = 'translate3d('+sum+'px, 0px, 0px)';
  }

  moving_div.style.transition = '.5s ease';

  item.onmouseover = function(event) {
    let target = getEventTarget(event);
    let li = target.closest('li'); // get reference
    if(li){
      let nodes = Array.from( li.closest('ul').children ); // get array
      let index = nodes.indexOf( li )+1;
      item.querySelector('li:nth-child('+index+') .nav-link').onclick = function(){
        moving_div = item.querySelector('.moving-tab');
        let sum = 0;
        if(item.classList.contains('flex-column')){
          for(var j = 1; j<=nodes.indexOf( li ); j++){
            sum +=  item.querySelector('li:nth-child('+j+')').offsetHeight;
          }
          moving_div.style.transform = 'translate3d(0px,'+sum+'px, 0px)';
          moving_div.style.height = item.querySelector('li:nth-child('+j+')').offsetHeight;
        } else {
          for(var j = 1; j<=nodes.indexOf( li ); j++){
            sum +=  item.querySelector('li:nth-child('+j+')').offsetWidth;
          }
          moving_div.style.transform = 'translate3d('+sum+'px, 0px, 0px)';
          moving_div.style.width = item.querySelector('li:nth-child('+index+')').offsetWidth+'px';
        }
      }
    }
  }
});
</script>

Carousel

Component from Asteria Dashboard Builder

Radio

Component from Riva Dashboard Tailwind Builder 
<div class="flex items-center draggable">
    <input checked="" id="default-radio-2" type="radio" value="" name="default-radio" class="w-5 h-5 text-primary border-gray-100">
    <label for="default-radio-2" class="ml-2 text-gray-900 font-medium">Radio</label>
</div>

Header With Bank Cards And Dashboard Image

Component from Motion Landing Library Builder

History Card

Component from Horizon UI Dashboard Builder 
<div data-type='div' className="!z-5 max-w-[378px] max-h-[368px] relative flex w-full flex-col rounded-[20px] bg-white bg-clip-border p-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:shadow-none draggable">
       <div data-type='div' className="flex items-center justify-between rounded-t-3xl w-full">
         <div data-type='div' className="text-lg font-bold text-navy-700 dark:text-white">
            History
          </div>
         <button data-type='button' className="linear rounded-[20px] bg-lightPrimary px-4 py-2 text-base font-medium text-brand-500 transition duration-200 hover:bg-gray-100 active:bg-gray-200 dark:bg-white/5 dark:text-white dark:hover:bg-white/10 dark:active:bg-white/20">
            See all
          </button>
        </div>
       <div data-type='div' className="flex h-full w-full items-start justify-between rounded-md border-[1px] border-[transparent] dark:hover:border-white/20 bg-white px-3 py-[20px] transition-all duration-150 hover:border-gray-200 dark:!bg-navy-800 dark:hover:!bg-navy-700">
         <div data-type='div' className="flex items-center gap-3">
           <div data-type='div' className="flex h-16 w-16 items-center justify-center">
             <img data-type='img' className="h-full w-full rounded-xl" src="https://horizon-tailwind-react-corporate-7s21b54hb-horizon-ui.vercel.app/static/media/Nft1.0fea34cca5aed6cad72b.png" alt="" />
            </div>
           <div data-type='div' className="flex flex-col">
             <h5 data-type='h5' className="text-base font-bold text-navy-700 dark:text-white">
                Colorful Heaven
              </h5>
              <p data-type='p' className="mt-1 text-sm font-normal text-gray-600">
                Mark Benjamin
              </p>
            </div>
          </div> 
         <div data-type='div' className="mt-1 flex items-center justify-center text-navy-700 dark:text-white">
           <div data-type='div'>
             <svg data-type='svg' stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"<path data-type='path' d="M311.9 260.8L160 353.6 8 260.8 160 0l151.9 260.8zM160 383.4L8 290.6 160 512l152-221.4-152 92.8z" /></svg>
            </div>
           <div data-type='div' className="ml-1 flex items-center text-sm font-bold text-navy-700 dark:text-white">
              <p data-type='p'> Test</p>
              <p data-type='p' className="ml-1">ETH</p>
            </div>
           <div data-type='div' className="ml-2 flex items-center text-sm font-normal text-gray-600 dark:text-white">
              <p data-type='p' >30s</p>
              <p data-type='p' className="ml-1">ago</p>
            </div>
          </div>
        </div>
       <div data-type='div' className="flex h-full w-full items-start justify-between rounded-md border-[1px] border-[transparent] dark:hover:border-white/20 bg-white px-3 py-[20px] transition-all duration-150 hover:border-gray-200 dark:!bg-navy-800 dark:hover:!bg-navy-700">
         <div data-type='div' className="flex items-center gap-3">
           <div data-type='div' className="flex h-16 w-16 items-center justify-center">
             <img data-type='img' className="h-full w-full rounded-xl" src="https://horizon-tailwind-react-corporate-7s21b54hb-horizon-ui.vercel.app/static/media/Nft6.9ff5403226e81a6fd390.png" alt="" />
            </div>
           <div data-type='div' className="flex flex-col">
             <h5 data-type='h5' className="text-base font-bold text-navy-700 dark:text-white">
                3D Cubes Art
              </h5>
              <p data-type='p' className="mt-1 text-sm font-normal text-gray-600">
                Esthera Jackson
              </p>
            </div>
          </div> 
         <div data-type='div' className="mt-1 flex items-center justify-center text-navy-700 dark:text-white">
           <div data-type='div'>
             <svg data-type='svg' stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"<path data-type='path' d="M311.9 260.8L160 353.6 8 260.8 160 0l151.9 260.8zM160 383.4L8 290.6 160 512l152-221.4-152 92.8z" /></svg>
            </div>
           <div data-type='div' className="ml-1 flex items-center text-sm font-bold text-navy-700 dark:text-white">
              <p data-type='p'> 0.4 </p>
              <p data-type='p' className="ml-1">ETH</p>
            </div>
           <div data-type='div' className="ml-2 flex items-center text-sm font-normal text-gray-600 dark:text-white">
              <p data-type='p' >30s</p>
              <p data-type='p' className="ml-1">ago</p>
            </div>
          </div>
        </div>
       <div data-type='div' className="flex h-full w-full items-start justify-between rounded-md border-[1px] border-[transparent] dark:hover:border-white/20 bg-white px-3 py-[20px] transition-all duration-150 hover:border-gray-200 dark:!bg-navy-800 dark:hover:!bg-navy-700">
         <div data-type='div' className="flex items-center gap-3">
           <div data-type='div' className="flex h-16 w-16 items-center justify-center">
             <img data-type='img' className="h-full w-full rounded-xl" src="https://horizon-tailwind-react-corporate-7s21b54hb-horizon-ui.vercel.app/static/media/Nft4.5fc37877b25c9fb9a52d.png" alt="" />
            </div>
           <div data-type='div' className="flex flex-col">
             <h5 data-type='h5' className="text-base font-bold text-navy-700 dark:text-white">
                Swipe Circles
              </h5>
              <p data-type='p' className="mt-1 text-sm font-normal text-gray-600">
                Peter Will
              </p>
            </div>
          </div> 
         <div data-type='div' className="mt-1 flex items-center justify-center text-navy-700 dark:text-white">
           <div data-type='div'>
             <svg data-type='svg' stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"<path data-type='path' d="M311.9 260.8L160 353.6 8 260.8 160 0l151.9 260.8zM160 383.4L8 290.6 160 512l152-221.4-152 92.8z" /></svg>
            </div>
           <div data-type='div' className="ml-1 flex items-center text-sm font-bold text-navy-700 dark:text-white">
              <p data-type='p' > 0.4 </p>
              <p data-type='p' className="ml-1">ETH</p>
            </div>
           <div data-type='div' className="ml-2 flex items-center text-sm font-normal text-gray-600 dark:text-white">
              <p data-type='p' >4h</p>
              <p data-type='p' className="ml-1">ago</p>
            </div>
          </div>
        </div>
       <div data-type='div' className="flex h-full w-full items-start justify-between rounded-md border-[1px] border-[transparent] dark:hover:border-white/20 bg-white px-3 py-[20px] transition-all duration-150 hover:border-gray-200 dark:!bg-navy-800 dark:hover:!bg-navy-700">
         <div data-type='div' className="flex items-center gap-3">
           <div data-type='div' className="flex h-16 w-16 items-center justify-center">
             <img data-type='img' className="h-full w-full rounded-xl" src="https://horizon-tailwind-react-corporate-7s21b54hb-horizon-ui.vercel.app/static/media/Nft3.3b3e6a4b3ada7618de6c.png" alt="" />
            </div>
           <div data-type='div' className="flex flex-col">
             <h5 data-type='h5' className="text-base font-bold text-navy-700 dark:text-white">
                Swipe Circles
              </h5>
              <p data-type='p' className="mt-1 text-sm font-normal text-gray-600">
                Manny Gates
              </p>
            </div>
          </div> 
         <div data-type='div' className="mt-1 flex items-center justify-center text-navy-700 dark:text-white">
           <div data-type='div'>
             <svg data-type='svg' stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"<path data-type='path' d="M311.9 260.8L160 353.6 8 260.8 160 0l151.9 260.8zM160 383.4L8 290.6 160 512l152-221.4-152 92.8z" /></svg>
            </div>
           <div data-type='div' className="ml-1 flex items-center text-sm font-bold text-navy-700 dark:text-white">
              <p data-type='p' > 0.4 </p>
              <p data-type='p' className="ml-1">ETH</p>
            </div>
           <div data-type='div' className="ml-2 flex items-center text-sm font-normal text-gray-600 dark:text-white">
              <p data-type='p' >30s</p>
              <p data-type='p' className="ml-1">ago</p>
            </div>
          </div>
        </div>
       <div data-type='div' className="flex h-full w-full items-start justify-between rounded-md border-[1px] border-[transparent] dark:hover:border-white/20 bg-white px-3 py-[20px] transition-all duration-150 hover:border-gray-200 dark:!bg-navy-800 dark:hover:!bg-navy-700">
         <div data-type='div' className="flex items-center gap-3">
           <div data-type='div' className="flex h-16 w-16 items-center justify-center">
             <img data-type='img' className="h-full w-full rounded-xl" src="https://horizon-tailwind-react-corporate-7s21b54hb-horizon-ui.vercel.app/static/media/Nft5.62dbaf7dd91b4180035c.png" alt="" />
            </div>
           <div data-type='div' className="flex flex-col">
             <h5 data-type='h5' className="text-base font-bold text-navy-700 dark:text-white">
                Mesh Gradients
              </h5>
              <p data-type='p' className="mt-1 text-sm font-normal text-gray-600">
                Will Smith
              </p>
            </div>
          </div> 
         <div data-type='div' className="mt-1 flex items-center justify-center text-navy-700 dark:text-white">
           <div data-type='div'>
             <svg data-type='svg' stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"<path data-type='path' d="M311.9 260.8L160 353.6 8 260.8 160 0l151.9 260.8zM160 383.4L8 290.6 160 512l152-221.4-152 92.8z" /></svg>
            </div>
           <div data-type='div' className="ml-1 flex items-center text-sm font-bold text-navy-700 dark:text-white">
              <p data-type='p' > 0.4 </p>
              <p data-type='p' className="ml-1">ETH</p>
            </div>
           <div data-type='div' className="ml-2 flex items-center text-sm font-normal text-gray-600 dark:text-white">
              <p data-type='p' >30s</p>
              <p data-type='p' className="ml-1">ago</p>
            </div>
          </div>
        </div>
      </div>

Team Section With Images

Component from Motion Landing Library React Builder 
<div data-type='div' className="w-full draggable">
 <div data-type='div' className="container flex flex-col mx-auto my-20 gap-14">
   <div data-type='div' className="w-full text-center md:text-start">
     <h2 data-type='h2' className="mb-6 text-4xl font-extrabold leading-tight md:text-5xl text-dark-grey-900">
        Meet the Exceptional Team
      </h2>
      <p data-type='p' className="text-lg font-normal md:w-7/12 text-dark-grey-500">
        Our dedicated professionals bring unparalleled expertise and commitment
        to every endeavor. We believe in the art of innovation, and our passion
        propels us forward. Experience the excellence that sets us apart.
      </p>
    </div>
   <div data-type='div' className="grid w-full grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
     <div data-type='div' className="flex flex-col items-start gap-4">
       <div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
         <img data-type='img'
            src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-1.jpeg"
            className="object-cover"
          />
        </div>
       <div data-type='div' className="flex flex-col items-start">
          <p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
            Olivia Baker
          </p>
          <p data-type='p' className="text-lg font-bold text-purple-blue-500">
            Director of Finance
          </p>
        </div>
       <div data-type='div'>
          <p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
            Olivia is our financial wizard, meticulously managing our finances,
            investments, and budgets.
          </p>
        </div>
      </div>
     <div data-type='div' className="flex flex-col items-start gap-4">
       <div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
         <img data-type='img'
            src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-2.jpeg"
            className="object-cover"
          />
        </div>
       <div data-type='div' className="flex flex-col items-start">
          <p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
            Andrew Foster
          </p>
          <p data-type='p' className="text-lg font-bold text-purple-blue-500">
            Senior Product Manager
          </p>
        </div>
       <div data-type='div'>
          <p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
            Andrew oversees our product development, turning ideas into
            market-ready solutions.
          </p>
        </div>
      </div>
     <div data-type='div' className="flex flex-col items-start gap-4">
       <div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
         <img data-type='img'
            src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-3.jpeg"
            className="object-cover"
          />
        </div>
       <div data-type='div' className="flex flex-col items-start">
          <p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
            Jessica Lee
          </p>
          <p data-type='p' className="text-lg font-bold text-purple-blue-500">
            Customer Relations Manager
          </p>
        </div>
       <div data-type='div'>
          <p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
            Jessica is our customer champion, ensuring every client interaction
            is a positive one.
          </p>
        </div>
      </div>
     <div data-type='div' className="flex flex-col items-start gap-4">
       <div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
         <img data-type='img'
            src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-4.jpeg"
            className="object-cover"
          />
        </div>
       <div data-type='div' className="flex flex-col items-start">
          <p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
            Richard Ward
          </p>
          <p data-type='p'  className="text-lg font-bold text-purple-blue-500">
            Creative Design Lead
          </p>
        </div>
       <div data-type='div'>
          <p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
            Richard is our creative genius, transforming ideas into captivating
            visuals.
          </p>
        </div>
      </div>
     <div data-type='div' className="flex flex-col items-start gap-4">
       <div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
         <img data-type='img'
            src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-6.jpg"
            className="object-cover"
          />
        </div>
       <div data-type='div' className="flex flex-col items-start">
          <p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
            Michael Chang
          </p>
          <p data-type='p' className="text-lg font-bold text-purple-blue-500">
            Head of Operations
          </p>
        </div>
       <div data-type='div'>
          <p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
            Michael is the mastermind behind our efficient operations. He
            ensures our processes run like a well-oiled machine.
          </p>
        </div>
      </div>
     <div data-type='div' className="flex flex-col items-start gap-4">
       <div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
         <img data-type='img'
            src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-9.jpg"
            className="object-cover"
          />
        </div>
       <div data-type='div' className="flex flex-col items-start">
          <p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
            Sarah Mitchell
          </p>
          <p data-type='p' className="text-lg font-bold text-purple-blue-500">
            Chief Marketing Officer (CMO)
          </p>
        </div>
       <div data-type='div'>
          <p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
            Sarah is the creative force behind our brand. Her marketing prowess
            and strategic thinking drive business growth.
          </p>
        </div>
      </div>
     <div data-type='div' className="flex flex-col items-start gap-4">
       <div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
         <img data-type='img'
            src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-14.jpg"
            className="object-cover"
          />
        </div>
       <div data-type='div' className="flex flex-col items-start">
          <p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
            David Rodriguez
          </p>
          <p data-type='p' className="text-lg font-bold text-purple-blue-500">
            Chief Technology Officer (CTO)
          </p>
        </div>
       <div data-type='div'>
          <p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
            David is our tech guru, spearheading innovation and ensuring our
            products are cutting-edge.{""}
          </p>
        </div>
      </div>
     <div data-type='div' className="flex flex-col items-start gap-4">
       <div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
         <img data-type='img'
            src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-11.jpg"
            className="object-cover"
          />
        </div>
       <div data-type='div' className="flex flex-col items-start">
          <p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
            Emily Clarke
          </p>
          <p data-type='p' className="text-lg font-bold text-purple-blue-500">
            Chief Executive Officer (CEO)
          </p>
        </div>
       <div data-type='div'>
          <p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
            Emily leads our company with a visionary zeal, setting the strategic
            direction and inspiring our team to achieve greatness.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Notifications Card

Component from Horizon UI Dashboard Builder 
<div data-type="div" className="flex flex-col justify-center items-center h-[100vh] w-full draggable">
        <div data-type="div" className="relative flex flex-col items-center rounded-[20px] w-full mx-auto bg-white bg-clip-border shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:!shadow-none p-5 pb-8 transition duration-200 linear">
          <div data-type="div" className="relative mb-3 flex items-center justify-between w-full pt-1>
            <h4 data-type="h4" className="text-xl font-bold text-navy-700 dark:text-white">
              Notifications
            </h4> 
            <button data-type="button" className="flex items-center text-xl hover:cursor-pointer bg-lightPrimary p-2 text-brand-500 hover:bg-gray-100 dark:bg-navy-700 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/10 rounded-lg">
              <svg data-type="svg" stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 16 16" className="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"<path data-type='path' d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" /></svg>
            </button>
          </div>
          <div data-type="div" className="flex flex-col w-full"> 
            <div data-type="div" className="mt-3 flex items-center gap-3"> 
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox1" />
              <label data-type="label" htmlFor="checkbox1" className="text-base font-medium text-navy-700 dark:text-white">
                Item comment notifications
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox2" />
              <label data-type="label" htmlFor="checkbox2" className="text-base font-medium text-navy-700 dark:text-white">
                Buyer review notifications
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox3" />
              <label data-type="label" htmlFor="checkbox3" className="text-base font-medium text-navy-700 dark:text-white">
                Rating reminders notifications
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox4" />
              <label data-type="label" htmlFor="checkbox4" className="text-base font-medium text-navy-700 dark:text-white">
                Meetups near you notifications
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox5" />
              <label data-type="label" htmlFor="checkbox5" className="text-base font-medium text-navy-700 dark:text-white">
                Company news notifications
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox6" />
              <label data-type="label" htmlFor="checkbox6" className="text-base font-medium text-navy-700 dark:text-white">
                New launches and projects
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox7" />
              <label data-type="label" htmlFor="checkbox7" className="text-base font-medium text-navy-700 dark:text-white">
                Monthly product changes
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox8" />
              <label data-type="label" htmlFor="checkbox8" className="text-base font-medium text-navy-700 dark:text-white">
                Subscribe to newsletter
              </label>
            </div>
            <div data-type="div" className="mt-4 flex items-center gap-3">
              <input data-type="input" type="checkbox" className="relative h-5 w-10 appearance-none rounded-[20px] bg-[#e0e5f2] outline-none transition duration-[0.5s] 
                    before:absolute before:top-[50%] before:h-4 before:w-4 before:translate-x-[2px] before:translate-y-[-50%] before:rounded-[20px]
                    before:bg-white before:shadow-[0_2px_5px_rgba(0,_0,_0,_.2)] before:transition before:content-[&quot;&quot;]
                    checked:before:translate-x-[22px] hover:cursor-pointer checked:bg-brand-500 dark:checked:bg-brand-400" name="weekly" id="checkbox8" />
              <label data-type="label" htmlFor="checkbox8" className="text-base font-medium text-navy-700 dark:text-white">
                Email me when someone follows me
              </label>
            </div>
          </div> 
        </div>
      </div>