UI Components in Trizzle library

Bootstrap Component #201

<section class="position-relative bg-dark-light overflow-hidden">
  <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 col-6"><img class="position-absolute top-0 end-0 img-fluid d-block w-100 h-100" src="trizzle-assets/images/background-blue-gradient.png" alt="">
    <div class="position-relative ps-xl-24 px-12 pt-24 h-100">
      <div class="mw-xl h-100 position-relative"><img class="position-absolute top-0 start-0 img-fluid" src="trizzle-assets/logos/trizzle-white-logo.svg" alt="">
        <div class="d-flex align-items-center h-100">
          <div>
            <p class="fs-4 fw-semibold text-white mb-8">Trizzle is easy to use and has a lot of great features that make it a valuable tool for any developer.</p>
            <div class="d-flex mb-14 align-items-center"><img class="img-fluid" style="width: 48px; height: 48px;" src="trizzle-assets/images/avatar-men-2.png" alt="">
              <div class="ms-3"><span class="d-block text-white fs-8 fw-semibold lh-sm">John Doe</span><span class="text-white fs-10 fw-semibold lh-sm">Front-End Developer</span></div>
            </div>
            <div>
              <button class="btn me-2 btn-light bg-white p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn me-2 btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn me-2 btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn me-2 btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 col-xl-5 pt-12 pt-md-24 pb-24 py-lg-40">
        <div class="mw-sm mw-xl-md mx-auto text-center">
          <div class="d-inline-flex mb-10 align-items-center justify-content-center bg-primary rounded-3" style="width: 64px; height: 64px;">
            <svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_477_4243)">
                <path d="M9.51378 21.5224L5.26933 21.5224L1.80985 15.5951L5.02136 9.85416L2.09284 9.85416L0 5.84631L14.0948 5.84631L16.2995 9.62501L9.61522 9.62501L6.15051 15.6598L9.51378 21.5224Z" fill="#E8EDFF"></path>
                <path d="M8.69727 15.563L10.9076 11.7249L14.2552 17.8138L20.9661 17.8138L24.5218 11.919L26.6041 15.401L23.0802 21.7329L16.4012 21.7329L17.7787 23.8058L15.6967 28.0001L8.69727 15.563Z" fill="#E8EDFF"></path>
                <path d="M15.4236 15.4982L19.7002 15.4982L26.833 3.20644L22.3591 3.08759L20.9707 5.61392L17.7249 -1.57947e-06L10.5387 -3.2299e-07L8.69141 3.63828L15.4184 3.63828L18.8138 9.54403L15.4236 15.4982Z" fill="#E8EDFF"></path>
              </g>
            </svg>
          </div>
          <div class="text-center mb-10">
            <h6 class="fs-5 fw-semibold text-light mb-2">Sign up with new account</h6>
            <p class="fw-medium text-secondary-light mb-0">Start your journey with us</p>
          </div>
          <form action="">
            <div class="position-relative mb-10">
              <input class="form-control text-light fs-9 bg-transparent" type="text"><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-secondary-light bg-dark-light">Name</span>
            </div>
            <div class="position-relative mb-10">
              <input class="form-control text-light fs-9 bg-transparent" type="email"><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-secondary-light bg-dark-light">Email*</span>
            </div>
            <div class="position-relative mb-4">
              <input class="form-control text-light fs-9 bg-transparent" type="password"><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-secondary-light bg-dark-light">Password*</span>
            </div><span class="d-block text-start mb-6 fs-10 fw-medium text-secondary-light">Must be at least 12 characters.</span><a class="btn mb-4 btn-primary lh-sm w-100" href="#">Create account</a><a class="btn mb-8 btn-secondary lh-sm w-100" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 2H2V14H14V2Z" fill="#ECEFF1"></path>
                <path d="M8 9.262L14 14V4.646L8 9.262Z" fill="#CFD8DC"></path>
                <path d="M14.5 2H14L8 6.738L2 2H1.5C0.672 2 0 2.672 0 3.5V12.5C0 13.328 0.672 14 1.5 14H2V4.646L8 9.261L14 4.645V14H14.5C15.328 14 16 13.328 16 12.5V3.5C16 2.672 15.328 2 14.5 2Z" fill="#F44336"></path>
              </svg><span class="ms-3">Sign Up with Gmail</span></a>
            <p class="text-center fw-medium mb-0 text-secondary-light"><span>Already have an acoount?</span><a class="btn btn-link fw-medium p-0" href="#">Sign in</a></p>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="d-lg-none position-relative"><img class="position-absolute top-0 end-0 img-fluid d-block w-100 h-100" src="trizzle-assets/images/background-blue-gradient.png" alt="">
    <div class="position-relative px-12 py-24">
      <div class="mw-xl mx-auto pt-24 position-relative"><img class="position-absolute top-0 start-0 img-fluid" src="trizzle-assets/logos/trizzle-white-logo.svg" alt="">
        <div class="d-flex align-items-center h-100">
          <div>
            <p class="fs-4 fw-semibold text-white mb-8">Trizzle is easy to use and has a lot of great features that make it a valuable tool for any developer.</p>
            <div class="d-flex mb-14 align-items-center"><img class="img-fluid" style="width: 48px; height: 48px;" src="trizzle-assets/images/avatar-men-2.png" alt="">
              <div class="ms-3"><span class="d-block text-white fs-8 fw-semibold lh-sm">John Doe</span><span class="text-white fs-10 fw-semibold lh-sm">Front-End Developer</span></div>
            </div>
            <div>
              <button class="btn me-2 btn-light bg-white p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn me-2 btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn me-2 btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn me-2 btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
              <button class="btn btn-primary-light p-0 rounded-pill" style="width: 8px; height: 8px;"></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #202

Bootstrap

Trizzle

<section class="py-8">
  <div class="container">
    <div class="bg-dark-light py-6 px-5 rounded-3">
      <nav class="w-100" aria-label="pagination">
        <ul class="pagination d-flex w-100 justify-content-center mb-0">
          <li class="page-item me-auto"><a class="page-link d-flex h-100 align-items-center fs-10 border-secondary text-secondary-light bg-transparent rounded-start-3" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.3329 7.33338H6.27294L8.47294 5.14004C8.59847 5.01451 8.669 4.84424 8.669 4.66671C8.669 4.48917 8.59847 4.31891 8.47294 4.19338C8.3474 4.06784 8.17714 3.99731 7.99961 3.99731C7.82207 3.99731 7.65181 4.06784 7.52627 4.19338L4.19294 7.52671C4.13224 7.59011 4.08467 7.66487 4.05294 7.74671C3.98626 7.90902 3.98626 8.09107 4.05294 8.25338C4.08467 8.33521 4.13224 8.40997 4.19294 8.47338L7.52627 11.8067C7.58825 11.8692 7.66198 11.9188 7.74322 11.9526C7.82446 11.9865 7.9116 12.0039 7.99961 12.0039C8.08761 12.0039 8.17475 11.9865 8.25599 11.9526C8.33723 11.9188 8.41096 11.8692 8.47294 11.8067C8.53542 11.7447 8.58502 11.671 8.61887 11.5898C8.65271 11.5085 8.67014 11.4214 8.67014 11.3334C8.67014 11.2454 8.65271 11.1582 8.61887 11.077C8.58502 10.9958 8.53542 10.922 8.47294 10.86L6.27294 8.66671H11.3329C11.5097 8.66671 11.6793 8.59647 11.8043 8.47145C11.9294 8.34642 11.9996 8.17685 11.9996 8.00004C11.9996 7.82323 11.9294 7.65366 11.8043 7.52864C11.6793 7.40361 11.5097 7.33338 11.3329 7.33338Z" fill="#3D485B"></path>
              </svg><span class="ms-1 fw-semibold text-light">Previous</span></a></li>
          <li class="page-item"><a class="page-link border-secondary d-flex h-100 align-items-center fs-10 text-light bg-transparent" href="#">1</a></li>
          <li class="page-item"><a class="page-link border-secondary d-flex h-100 align-items-center fs-10 text-light bg-transparent" href="#">2</a></li>
          <li class="page-item"><a class="page-link border-secondary d-flex h-100 align-items-center fs-10 text-light bg-transparent" href="#">3</a></li>
          <li class="page-item"><a class="page-link border-secondary d-flex h-100 align-items-center fs-10 text-secondary-light bg-transparent" href="#">...</a></li>
          <li class="page-item"><a class="page-link border-secondary d-flex h-100 align-items-center fs-10 text-light bg-transparent" href="#">44</a></li>
          <li class="page-item"><a class="page-link border-secondary d-flex h-100 align-items-center fs-10 text-light bg-transparent" href="#">45</a></li>
          <li class="page-item ms-auto"><a class="page-link fs-10 border-secondary text-secondary-light bg-transparent rounded-end-3" href="#"><span class="me-1 fw-semibold text-light">Next</span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.66706 8.66663L9.72706 8.66662L7.52706 10.86C7.40152 10.9855 7.331 11.1558 7.331 11.3333C7.331 11.5108 7.40152 11.6811 7.52706 11.8066C7.6526 11.9322 7.82286 12.0027 8.00039 12.0027C8.17793 12.0027 8.34819 11.9322 8.47373 11.8066L11.8071 8.47329C11.8678 8.40989 11.9153 8.33513 11.9471 8.25329C12.0137 8.09098 12.0137 7.90893 11.9471 7.74662C11.9153 7.66479 11.8678 7.59003 11.8071 7.52662L8.47373 4.19329C8.41175 4.13081 8.33802 4.08121 8.25678 4.04736C8.17554 4.01352 8.0884 3.99609 8.00039 3.99609C7.91239 3.99609 7.82525 4.01352 7.74401 4.04736C7.66277 4.08121 7.58904 4.13081 7.52706 4.19329C7.46457 4.25527 7.41498 4.329 7.38113 4.41024C7.34729 4.49148 7.32986 4.57862 7.32986 4.66663C7.32986 4.75463 7.34729 4.84177 7.38113 4.92301C7.41498 5.00425 7.46457 5.07798 7.52706 5.13996L9.72706 7.33329L4.66706 7.33329C4.49025 7.33329 4.32068 7.40353 4.19566 7.52855C4.07063 7.65358 4.00039 7.82315 4.00039 7.99996C4.00039 8.17677 4.07063 8.34634 4.19566 8.47136C4.32068 8.59639 4.49025 8.66663 4.66706 8.66663Z" fill="#3D485B"></path>
              </svg></a></li>
        </ul>
      </nav>
    </div>
  </div>
</section>

Bootstrap Component #203

Bootstrap

Trizzle

<section class="py-8">
  <div class="container">
    <div class="position-relative p-6 bg-secondary rounded-4">
      <div class="d-flex mb-6 align-items-center justify-content-between">
        <div>
          <h6 class="fs-5 fw-semibold text-white mb-2">Team members</h6>
          <p class="fs-10 fw-medium text-secondary-light mb-0">Your subtitle text about team members goes here</p>
        </div><a class="btn btn-sm btn-dark-light text-secondary-light fs-9" href="#">See all</a>
      </div><a class="btn btn-dark-light border-0 text-start text-secondary-light d-flex align-items-center justify-content-between py-3 ps-4 pe-6 rounded-3" href="#">
        <div class="d-flex align-items-center"><img class="img-fluid" style="width: 48px; height: 48px;" src="trizzle-assets/images/avatar-men.png" alt="">
          <div class="ms-3"><span class="d-block lh-sm fs-9 fw-medium text-light">John Doe</span><span class="d-block lh-sm fs-10 fw-medium text-secondary-light">Frontend Developer</span></div>
        </div>
        <div><span>
            <svg width="4" height="12" viewBox="0 0 4 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.99999 2.66667C2.2637 2.66667 2.52148 2.58847 2.74075 2.44196C2.96002 2.29545 3.13091 2.08721 3.23183 1.84358C3.33275 1.59994 3.35915 1.33185 3.3077 1.07321C3.25626 0.814572 3.12927 0.576995 2.9428 0.390525C2.75633 0.204055 2.51875 0.0770672 2.26011 0.0256202C2.00147 -0.0258267 1.73338 0.000577708 1.48975 0.101495C1.24611 0.202411 1.03787 0.373308 0.891364 0.592574C0.744856 0.811839 0.666657 1.06963 0.666657 1.33333C0.666657 1.68696 0.807133 2.02609 1.05718 2.27614C1.30723 2.52619 1.64637 2.66667 1.99999 2.66667ZM1.99999 9.33333C1.73628 9.33333 1.4785 9.41153 1.25923 9.55804C1.03996 9.70455 0.869068 9.91279 0.768151 10.1564C0.667234 10.4001 0.64083 10.6681 0.692277 10.9268C0.743724 11.1854 0.870712 11.423 1.05718 11.6095C1.24365 11.7959 1.48123 11.9229 1.73987 11.9744C1.99851 12.0258 2.2666 11.9994 2.51023 11.8985C2.75387 11.7976 2.96211 11.6267 3.10862 11.4074C3.25512 11.1882 3.33332 10.9304 3.33332 10.6667C3.33332 10.313 3.19285 9.97391 2.9428 9.72386C2.69275 9.47381 2.35361 9.33333 1.99999 9.33333ZM1.99999 4.66667C1.73628 4.66667 1.4785 4.74487 1.25923 4.89137C1.03996 5.03788 0.869068 5.24612 0.768151 5.48976C0.667234 5.73339 0.64083 6.00148 0.692277 6.26012C0.743724 6.51876 0.870712 6.75634 1.05718 6.94281C1.24365 7.12928 1.48123 7.25627 1.73987 7.30771C1.99851 7.35916 2.2666 7.33276 2.51023 7.23184C2.75387 7.13092 2.96211 6.96003 3.10862 6.74076C3.25512 6.5215 3.33332 6.26371 3.33332 6C3.33332 5.64638 3.19285 5.30724 2.9428 5.05719C2.69275 4.80714 2.35361 4.66667 1.99999 4.66667Z" fill="currentColor"></path>
            </svg></span></div></a><a class="btn btn-dark-light bg-transparent border-0 text-start text-secondary-light d-flex align-items-center justify-content-between py-3 ps-4 pe-6 rounded-3" href="#">
        <div class="d-flex align-items-center"><img class="img-fluid" style="width: 48px; height: 48px;" src="trizzle-assets/images/avatar-men.png" alt="">
          <div class="ms-3"><span class="d-block lh-sm fs-9 fw-medium text-light">John Doe</span><span class="d-block lh-sm fs-10 fw-medium text-secondary-light">Frontend Developer</span></div>
        </div>
        <div><span>
            <svg width="4" height="12" viewBox="0 0 4 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.99999 2.66667C2.2637 2.66667 2.52148 2.58847 2.74075 2.44196C2.96002 2.29545 3.13091 2.08721 3.23183 1.84358C3.33275 1.59994 3.35915 1.33185 3.3077 1.07321C3.25626 0.814572 3.12927 0.576995 2.9428 0.390525C2.75633 0.204055 2.51875 0.0770672 2.26011 0.0256202C2.00147 -0.0258267 1.73338 0.000577708 1.48975 0.101495C1.24611 0.202411 1.03787 0.373308 0.891364 0.592574C0.744856 0.811839 0.666657 1.06963 0.666657 1.33333C0.666657 1.68696 0.807133 2.02609 1.05718 2.27614C1.30723 2.52619 1.64637 2.66667 1.99999 2.66667ZM1.99999 9.33333C1.73628 9.33333 1.4785 9.41153 1.25923 9.55804C1.03996 9.70455 0.869068 9.91279 0.768151 10.1564C0.667234 10.4001 0.64083 10.6681 0.692277 10.9268C0.743724 11.1854 0.870712 11.423 1.05718 11.6095C1.24365 11.7959 1.48123 11.9229 1.73987 11.9744C1.99851 12.0258 2.2666 11.9994 2.51023 11.8985C2.75387 11.7976 2.96211 11.6267 3.10862 11.4074C3.25512 11.1882 3.33332 10.9304 3.33332 10.6667C3.33332 10.313 3.19285 9.97391 2.9428 9.72386C2.69275 9.47381 2.35361 9.33333 1.99999 9.33333ZM1.99999 4.66667C1.73628 4.66667 1.4785 4.74487 1.25923 4.89137C1.03996 5.03788 0.869068 5.24612 0.768151 5.48976C0.667234 5.73339 0.64083 6.00148 0.692277 6.26012C0.743724 6.51876 0.870712 6.75634 1.05718 6.94281C1.24365 7.12928 1.48123 7.25627 1.73987 7.30771C1.99851 7.35916 2.2666 7.33276 2.51023 7.23184C2.75387 7.13092 2.96211 6.96003 3.10862 6.74076C3.25512 6.5215 3.33332 6.26371 3.33332 6C3.33332 5.64638 3.19285 5.30724 2.9428 5.05719C2.69275 4.80714 2.35361 4.66667 1.99999 4.66667Z" fill="currentColor"></path>
            </svg></span></div></a><a class="btn btn-dark-light border-0 text-start text-secondary-light d-flex align-items-center justify-content-between py-3 ps-4 pe-6 rounded-3" href="#">
        <div class="d-flex align-items-center"><img class="img-fluid" style="width: 48px; height: 48px;" src="trizzle-assets/images/avatar-men.png" alt="">
          <div class="ms-3"><span class="d-block lh-sm fs-9 fw-medium text-light">John Doe</span><span class="d-block lh-sm fs-10 fw-medium text-secondary-light">Frontend Developer</span></div>
        </div>
        <div><span>
            <svg width="4" height="12" viewBox="0 0 4 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.99999 2.66667C2.2637 2.66667 2.52148 2.58847 2.74075 2.44196C2.96002 2.29545 3.13091 2.08721 3.23183 1.84358C3.33275 1.59994 3.35915 1.33185 3.3077 1.07321C3.25626 0.814572 3.12927 0.576995 2.9428 0.390525C2.75633 0.204055 2.51875 0.0770672 2.26011 0.0256202C2.00147 -0.0258267 1.73338 0.000577708 1.48975 0.101495C1.24611 0.202411 1.03787 0.373308 0.891364 0.592574C0.744856 0.811839 0.666657 1.06963 0.666657 1.33333C0.666657 1.68696 0.807133 2.02609 1.05718 2.27614C1.30723 2.52619 1.64637 2.66667 1.99999 2.66667ZM1.99999 9.33333C1.73628 9.33333 1.4785 9.41153 1.25923 9.55804C1.03996 9.70455 0.869068 9.91279 0.768151 10.1564C0.667234 10.4001 0.64083 10.6681 0.692277 10.9268C0.743724 11.1854 0.870712 11.423 1.05718 11.6095C1.24365 11.7959 1.48123 11.9229 1.73987 11.9744C1.99851 12.0258 2.2666 11.9994 2.51023 11.8985C2.75387 11.7976 2.96211 11.6267 3.10862 11.4074C3.25512 11.1882 3.33332 10.9304 3.33332 10.6667C3.33332 10.313 3.19285 9.97391 2.9428 9.72386C2.69275 9.47381 2.35361 9.33333 1.99999 9.33333ZM1.99999 4.66667C1.73628 4.66667 1.4785 4.74487 1.25923 4.89137C1.03996 5.03788 0.869068 5.24612 0.768151 5.48976C0.667234 5.73339 0.64083 6.00148 0.692277 6.26012C0.743724 6.51876 0.870712 6.75634 1.05718 6.94281C1.24365 7.12928 1.48123 7.25627 1.73987 7.30771C1.99851 7.35916 2.2666 7.33276 2.51023 7.23184C2.75387 7.13092 2.96211 6.96003 3.10862 6.74076C3.25512 6.5215 3.33332 6.26371 3.33332 6C3.33332 5.64638 3.19285 5.30724 2.9428 5.05719C2.69275 4.80714 2.35361 4.66667 1.99999 4.66667Z" fill="currentColor"></path>
            </svg></span></div></a>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Bootstrap Component #204

Bootstrap

Trizzle

<section>
  <nav class="navbar d-lg-none navbar-dark-light bg-dark-light flex-wrap">
    <div class="container-fluid">
      <div class="d-flex w-100 align-items-center">
        <a class="navbar-brand" href="#">
          <img class="img-fluid" src="trizzle-assets/logos/trizzle-logo.svg" alt="alt" width="auto">
        </a>
        <button class="navbar-burger navbar-toggler bg-primary ms-auto" type="button">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </div>
  </nav>
  <div class="navbar-menu position-relative d-lg-block d-none" style="z-index: 9999">
    <div class="navbar-backdrop d-lg-none position-fixed top-0 end-0 bottom-0 start-0 bg-dark-light" style="opacity: .5"></div>
    <div class="position-fixed top-0 start-0 bottom-0 w-75 mw-sm-xs py-8 px-4 bg-dark-light overflow-auto">
      <div class="mb-6">
        <a class="mb-12 d-inline-block" href="#">
          <img class="img-fluid" src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <ul class="list-unstyled">
          <li class="mb-4"><a class="btn w-100 btn-outline-primary text-light border-0 d-flex align-items-center p-4 rounded-4" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 11H1C0.734784 11 0.48043 11.1054 0.292893 11.2929C0.105357 11.4804 0 11.7348 0 12V19C0 19.2652 0.105357 19.5196 0.292893 19.7071C0.48043 19.8946 0.734784 20 1 20H8C8.26522 20 8.51957 19.8946 8.70711 19.7071C8.89464 19.5196 9 19.2652 9 19V12C9 11.7348 8.89464 11.4804 8.70711 11.2929C8.51957 11.1054 8.26522 11 8 11ZM7 18H2V13H7V18ZM19 0H12C11.7348 0 11.4804 0.105357 11.2929 0.292893C11.1054 0.48043 11 0.734784 11 1V8C11 8.26522 11.1054 8.51957 11.2929 8.70711C11.4804 8.89464 11.7348 9 12 9H19C19.2652 9 19.5196 8.89464 19.7071 8.70711C19.8946 8.51957 20 8.26522 20 8V1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0ZM18 7H13V2H18V7ZM19 11H12C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V19C11 19.2652 11.1054 19.5196 11.2929 19.7071C11.4804 19.8946 11.7348 20 12 20H19C19.2652 20 19.5196 19.8946 19.7071 19.7071C19.8946 19.5196 20 19.2652 20 19V12C20 11.7348 19.8946 11.4804 19.7071 11.2929C19.5196 11.1054 19.2652 11 19 11ZM18 18H13V13H18V18ZM8 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V8C0 8.26522 0.105357 8.51957 0.292893 8.70711C0.48043 8.89464 0.734784 9 1 9H8C8.26522 9 8.51957 8.89464 8.70711 8.70711C8.89464 8.51957 9 8.26522 9 8V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0ZM7 7H2V2H7V7Z" fill="currentColor"></path>
              </svg><span class="ms-4 fs-9 fw-semibold">Overview</span></a></li>
          <li class="mb-4"><a class="btn w-100 btn-outline-primary text-light border-0 d-flex align-items-center p-4 rounded-4" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 4C9.73478 4 9.48043 4.10536 9.29289 4.29289C9.10536 4.48043 9 4.73478 9 5V15C9 15.2652 9.10536 15.5196 9.29289 15.7071C9.48043 15.8946 9.73478 16 10 16C10.2652 16 10.5196 15.8946 10.7071 15.7071C10.8946 15.5196 11 15.2652 11 15V5C11 4.73478 10.8946 4.48043 10.7071 4.29289C10.5196 4.10536 10.2652 4 10 4ZM5 10C4.73478 10 4.48043 10.1054 4.29289 10.2929C4.10536 10.4804 4 10.7348 4 11V15C4 15.2652 4.10536 15.5196 4.29289 15.7071C4.48043 15.8946 4.73478 16 5 16C5.26522 16 5.51957 15.8946 5.70711 15.7071C5.89464 15.5196 6 15.2652 6 15V11C6 10.7348 5.89464 10.4804 5.70711 10.2929C5.51957 10.1054 5.26522 10 5 10ZM15 8C14.7348 8 14.4804 8.10536 14.2929 8.29289C14.1054 8.48043 14 8.73478 14 9V15C14 15.2652 14.1054 15.5196 14.2929 15.7071C14.4804 15.8946 14.7348 16 15 16C15.2652 16 15.5196 15.8946 15.7071 15.7071C15.8946 15.5196 16 15.2652 16 15V9C16 8.73478 15.8946 8.48043 15.7071 8.29289C15.5196 8.10536 15.2652 8 15 8ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
              </svg><span class="ms-4 fs-9 fw-semibold">Analytics</span></a></li>
          <li class="mb-4"><a class="btn w-100 btn-outline-primary text-light border-0 d-flex align-items-center p-4 rounded-4" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 4.5H14V3.5C14 2.70435 13.6839 1.94129 13.1213 1.37868C12.5587 0.816071 11.7956 0.5 11 0.5H9C8.20435 0.5 7.44129 0.816071 6.87868 1.37868C6.31607 1.94129 6 2.70435 6 3.5V4.5H3C2.20435 4.5 1.44129 4.81607 0.87868 5.37868C0.316071 5.94129 0 6.70435 0 7.5V16.5C0 17.2956 0.316071 18.0587 0.87868 18.6213C1.44129 19.1839 2.20435 19.5 3 19.5H17C17.7956 19.5 18.5587 19.1839 19.1213 18.6213C19.6839 18.0587 20 17.2956 20 16.5V7.5C20 6.70435 19.6839 5.94129 19.1213 5.37868C18.5587 4.81607 17.7956 4.5 17 4.5ZM8 3.5C8 3.23478 8.10536 2.98043 8.29289 2.79289C8.48043 2.60536 8.73478 2.5 9 2.5H11C11.2652 2.5 11.5196 2.60536 11.7071 2.79289C11.8946 2.98043 12 3.23478 12 3.5V4.5H8V3.5ZM18 16.5C18 16.7652 17.8946 17.0196 17.7071 17.2071C17.5196 17.3946 17.2652 17.5 17 17.5H3C2.73478 17.5 2.48043 17.3946 2.29289 17.2071C2.10536 17.0196 2 16.7652 2 16.5V11C2.97544 11.3869 3.97818 11.7011 5 11.94V12.53C5 12.7952 5.10536 13.0496 5.29289 13.2371C5.48043 13.4246 5.73478 13.53 6 13.53C6.26522 13.53 6.51957 13.4246 6.70711 13.2371C6.89464 13.0496 7 12.7952 7 12.53V12.32C7.99435 12.4554 8.99649 12.5255 10 12.53C11.0035 12.5255 12.0057 12.4554 13 12.32V12.53C13 12.7952 13.1054 13.0496 13.2929 13.2371C13.4804 13.4246 13.7348 13.53 14 13.53C14.2652 13.53 14.5196 13.4246 14.7071 13.2371C14.8946 13.0496 15 12.7952 15 12.53V11.94C16.0218 11.7011 17.0246 11.3869 18 11V16.5ZM18 8.81C17.0274 9.22049 16.0244 9.55483 15 9.81V9.5C15 9.23478 14.8946 8.98043 14.7071 8.79289C14.5196 8.60536 14.2652 8.5 14 8.5C13.7348 8.5 13.4804 8.60536 13.2929 8.79289C13.1054 8.98043 13 9.23478 13 9.5V10.24C11.0113 10.54 8.98875 10.54 7 10.24V9.5C7 9.23478 6.89464 8.98043 6.70711 8.79289C6.51957 8.60536 6.26522 8.5 6 8.5C5.73478 8.5 5.48043 8.60536 5.29289 8.79289C5.10536 8.98043 5 9.23478 5 9.5V9.83C3.97562 9.57483 2.9726 9.24049 2 8.83V7.5C2 7.23478 2.10536 6.98043 2.29289 6.79289C2.48043 6.60536 2.73478 6.5 3 6.5H17C17.2652 6.5 17.5196 6.60536 17.7071 6.79289C17.8946 6.98043 18 7.23478 18 7.5V8.81Z" fill="currentColor"></path>
              </svg><span class="ms-4 fs-9 fw-semibold">Products</span></a></li>
          <li class="mb-4"><a class="btn w-100 btn-outline-primary text-light border-0 d-flex align-items-center p-4 rounded-4" href="#">
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 17C12.2653 17 12.5196 16.8947 12.7071 16.7071C12.8947 16.5196 13 16.2652 13 16V14C13 13.7348 12.8947 13.4805 12.7071 13.2929C12.5196 13.1054 12.2653 13 12 13C11.7348 13 11.4805 13.1054 11.2929 13.2929C11.1054 13.4805 11 13.7348 11 14V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4805 16.8947 11.7348 17 12 17ZM8.00004 17C8.26525 17 8.51961 16.8947 8.70714 16.7071C8.89468 16.5196 9.00004 16.2652 9.00004 16V14C9.00004 13.7348 8.89468 13.4805 8.70714 13.2929C8.51961 13.1054 8.26525 13 8.00004 13C7.73482 13 7.48047 13.1054 7.29293 13.2929C7.10539 13.4805 7.00004 13.7348 7.00004 14V16C7.00004 16.2652 7.10539 16.5196 7.29293 16.7071C7.48047 16.8947 7.73482 17 8.00004 17ZM17 5.00003H15.62L13.89 1.55003C13.8372 1.42308 13.7587 1.3084 13.6595 1.21316C13.5603 1.11791 13.4426 1.04414 13.3136 0.996469C13.1846 0.948794 13.0472 0.928235 12.9099 0.936075C12.7726 0.943915 12.6384 0.979987 12.5157 1.04204C12.3929 1.10408 12.2843 1.19078 12.1966 1.2967C12.1089 1.40261 12.044 1.52548 12.006 1.65762C11.9679 1.78976 11.9575 1.92833 11.9754 2.06467C11.9933 2.20102 12.0391 2.3322 12.11 2.45003L13.38 5.00003H6.62004L7.89004 2.45003C7.9871 2.21693 7.9924 1.95575 7.90486 1.71891C7.81732 1.48208 7.64343 1.28712 7.4181 1.17319C7.19277 1.05926 6.93268 1.03479 6.69005 1.10469C6.44742 1.17458 6.24022 1.33368 6.11004 1.55003L4.38004 5.00003H3.00004C2.29323 5.01078 1.61291 5.27077 1.07909 5.73416C0.545259 6.19755 0.192211 6.83455 0.0822073 7.53283C-0.0277959 8.23112 0.112313 8.94581 0.477823 9.55088C0.843332 10.1559 1.41076 10.6125 2.08004 10.84L2.82004 18.3C2.89466 19.0426 3.24338 19.7307 3.79811 20.2299C4.35284 20.7292 5.07374 21.0038 5.82004 21H14.2C14.9463 21.0038 15.6672 20.7292 16.222 20.2299C16.7767 19.7307 17.1254 19.0426 17.2 18.3L17.94 10.84C18.6108 10.6118 19.1791 10.1536 19.5443 9.54651C19.9096 8.93942 20.0482 8.22266 19.9356 7.52317C19.823 6.82368 19.4665 6.18661 18.9292 5.7248C18.3919 5.26299 17.7085 5.00624 17 5.00003ZM15.19 18.1C15.1652 18.3475 15.0489 18.5769 14.864 18.7433C14.6791 18.9098 14.4388 19.0013 14.19 19H5.81004C5.56127 19.0013 5.32097 18.9098 5.13606 18.7433C4.95115 18.5769 4.83491 18.3475 4.81004 18.1L4.10004 11H15.9L15.19 18.1ZM17 9.00003H3.00004C2.73482 9.00003 2.48047 8.89467 2.29293 8.70713C2.10539 8.5196 2.00004 8.26524 2.00004 8.00003C2.00004 7.73481 2.10539 7.48046 2.29293 7.29292C2.48047 7.10538 2.73482 7.00003 3.00004 7.00003H17C17.2653 7.00003 17.5196 7.10538 17.7071 7.29292C17.8947 7.48046 18 7.73481 18 8.00003C18 8.26524 17.8947 8.5196 17.7071 8.70713C17.5196 8.89467 17.2653 9.00003 17 9.00003Z" fill="currentColor"></path>
              </svg><span class="ms-4 me-auto fs-9 fw-semibold">Orders</span><span class="ms-2 d-flex align-items-center justify-content-center bg-secondary rounded-pill text-white fw-semibold fs-10" style="width: 22px; height: 22px;">4</span></a></li>
          <li><a class="btn w-100 btn-outline-primary text-light border-0 d-flex align-items-center p-4 rounded-4" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.81 10.28C13.443 9.60024 13.7996 8.70877 13.81 7.78C13.81 6.77748 13.4118 5.81602 12.7029 5.10714C11.994 4.39825 11.0325 4 10.03 4C9.02748 4 8.06602 4.39825 7.35714 5.10714C6.64825 5.81602 6.25 6.77748 6.25 7.78C6.26044 8.70877 6.61702 9.60024 7.25 10.28C6.36865 10.7189 5.61022 11.3699 5.04292 12.1746C4.47561 12.9793 4.11723 13.9124 4 14.89C3.97083 15.1552 4.0482 15.4212 4.21511 15.6293C4.38202 15.8375 4.62478 15.9708 4.89 16C5.15522 16.0292 5.42116 15.9518 5.62932 15.7849C5.83749 15.618 5.97083 15.3752 6 15.11C6.11933 14.1411 6.58885 13.2494 7.32009 12.6027C8.05133 11.956 8.99382 11.599 9.97 11.599C10.9462 11.599 11.8887 11.956 12.6199 12.6027C13.3512 13.2494 13.8207 14.1411 13.94 15.11C13.9678 15.3664 14.0936 15.6022 14.2911 15.768C14.4887 15.9339 14.7426 16.017 15 16H15.11C15.3721 15.9698 15.6117 15.8373 15.7766 15.6313C15.9414 15.4252 16.0181 15.1624 15.99 14.9C15.8815 13.9276 15.5344 12.997 14.9796 12.191C14.4248 11.3851 13.6796 10.7286 12.81 10.28ZM10 9.56C9.64795 9.56 9.3038 9.4556 9.01108 9.26002C8.71836 9.06443 8.49022 8.78643 8.35549 8.46118C8.22077 8.13592 8.18552 7.77803 8.2542 7.43274C8.32288 7.08745 8.49241 6.77029 8.74135 6.52135C8.99029 6.27241 9.30745 6.10288 9.65274 6.0342C9.99803 5.96552 10.3559 6.00077 10.6812 6.13549C11.0064 6.27022 11.2844 6.49837 11.48 6.79109C11.6756 7.0838 11.78 7.42795 11.78 7.78C11.78 8.25208 11.5925 8.70484 11.2586 9.03865C10.9248 9.37247 10.4721 9.56 10 9.56ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
              </svg><span class="ms-4 fs-9 fw-semibold">Customers</span></a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="mb-4 p-6 bg-primary rounded-4">
          <div class="d-flex mb-4 align-items-center justify-content-center rounded-4 bg-primary-dark bg-opacity-25" style="width: 48px; height: 48px;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.7098 12.5399C12.6168 12.4462 12.5062 12.3718 12.3844 12.321C12.2625 12.2703 12.1318 12.2441 11.9998 12.2441C11.8678 12.2441 11.7371 12.2703 11.6152 12.321C11.4933 12.3718 11.3827 12.4462 11.2898 12.5399L8.28978 15.5399C8.09617 15.7282 7.98529 15.9857 7.98154 16.2558C7.97779 16.5258 8.08147 16.7863 8.26978 16.9799C8.45808 17.1735 8.71558 17.2844 8.98564 17.2882C9.25569 17.2919 9.51617 17.1882 9.70978 16.9999L11.9998 14.6599L14.2898 16.9999C14.3827 17.0937 14.4933 17.1681 14.6152 17.2188C14.7371 17.2696 14.8678 17.2957 14.9998 17.2957C15.1318 17.2957 15.2625 17.2696 15.3844 17.2188C15.5062 17.1681 15.6168 17.0937 15.7098 16.9999C15.8035 16.907 15.8779 16.7964 15.9287 16.6745C15.9794 16.5527 16.0056 16.422 16.0056 16.2899C16.0056 16.1579 15.9794 16.0272 15.9287 15.9054C15.8779 15.7835 15.8035 15.6729 15.7098 15.5799L12.7098 12.5399ZM9.70978 11.4599L11.9998 9.15994L14.2898 11.4599C14.3827 11.5537 14.4933 11.6281 14.6152 11.6788C14.7371 11.7296 14.8678 11.7557 14.9998 11.7557C15.1318 11.7557 15.2625 11.7296 15.3844 11.6788C15.5062 11.6281 15.6168 11.5537 15.7098 11.4599C15.8035 11.367 15.8779 11.2564 15.9287 11.1345C15.9794 11.0127 16.0056 10.882 16.0056 10.7499C16.0056 10.6179 15.9794 10.4872 15.9287 10.3654C15.8779 10.2435 15.8035 10.1329 15.7098 10.0399L12.7098 7.03994C12.6168 6.94621 12.5062 6.87182 12.3844 6.82105C12.2625 6.77028 12.1318 6.74414 11.9998 6.74414C11.8678 6.74414 11.7371 6.77028 11.6152 6.82105C11.4933 6.87182 11.3827 6.94621 11.2898 7.03994L8.28978 10.0399C8.10147 10.2282 7.99569 10.4836 7.99569 10.7499C7.99569 11.0162 8.10147 11.2716 8.28978 11.4599C8.47808 11.6482 8.73348 11.754 8.99978 11.754C9.26608 11.754 9.52147 11.6482 9.70978 11.4599Z" fill="white"></path>
            </svg>
          </div><span class="d-block mb-2 fs-9 fw-bold text-white">Upgrade to PRO</span>
          <p class="mb-0 pe-lg-10 fs-10 fw-semibold text-light">One year support, monthly updates for up to 5 team members.</p>
        </div><a class="btn px-6 py-5 d-flex align-items-center bg-secondary rounded-4" href="#">
          <div class="d-flex me-2 align-items-center justify-content-center rounded-4 bg-dark-light" style="width: 32px; height: 32px;"><img src="trizzle-assets/logos/logo-shuffle-blue.svg" alt=""></div><span class="fs-9 fw-medium text-light">Shuffle</span><span class="ms-auto">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.0002 5.83333C10.3298 5.83333 10.652 5.73559 10.9261 5.55245C11.2002 5.36931 11.4138 5.10902 11.54 4.80447C11.6661 4.49993 11.6991 4.16482 11.6348 3.84152C11.5705 3.51822 11.4118 3.22124 11.1787 2.98816C10.9456 2.75507 10.6486 2.59633 10.3253 2.53203C10.002 2.46772 9.6669 2.50072 9.36236 2.62687C9.05781 2.75301 8.79752 2.96664 8.61438 3.24072C8.43125 3.5148 8.3335 3.83703 8.3335 4.16667C8.3335 4.6087 8.50909 5.03262 8.82165 5.34518C9.13421 5.65774 9.55814 5.83333 10.0002 5.83333ZM10.0002 14.1667C9.67053 14.1667 9.3483 14.2644 9.07421 14.4476C8.80013 14.6307 8.58651 14.891 8.46036 15.1955C8.33422 15.5001 8.30121 15.8352 8.36552 16.1585C8.42983 16.4818 8.58857 16.7788 8.82165 17.0118C9.05474 17.2449 9.35171 17.4037 9.67501 17.468C9.99831 17.5323 10.3334 17.4993 10.638 17.3731C10.9425 17.247 11.2028 17.0334 11.3859 16.7593C11.5691 16.4852 11.6668 16.163 11.6668 15.8333C11.6668 15.3913 11.4912 14.9674 11.1787 14.6548C10.8661 14.3423 10.4422 14.1667 10.0002 14.1667ZM10.0002 8.33333C9.67053 8.33333 9.3483 8.43108 9.07421 8.61422C8.80013 8.79735 8.58651 9.05765 8.46036 9.3622C8.33422 9.66674 8.30121 10.0019 8.36552 10.3252C8.42983 10.6485 8.58857 10.9454 8.82165 11.1785C9.05474 11.4116 9.35171 11.5703 9.67501 11.6346C9.99831 11.699 10.3334 11.6659 10.638 11.5398C10.9425 11.4137 11.2028 11.2 11.3859 10.926C11.5691 10.6519 11.6668 10.3296 11.6668 10C11.6668 9.55797 11.4912 9.13405 11.1787 8.82149C10.8661 8.50893 10.4422 8.33333 10.0002 8.33333Z" fill="#3D485B"></path>
            </svg></span></a>
      </div>
    </div>
  </div>
  <div class="mx-auto ms-lg-80"></div>
</section>

Bootstrap Component #205

Bootstrap

Trizzle

<section class="py-8 bg-dark-light">
  <div class="container">
    <div class="mw-xs mw-sm-xl mw-lg-6xl mx-auto">
      <div class="row mb-6">
        <div class="col-sm-6 col-lg-3 mb-6">
          <div class="py-8 px-6 h-100 bg-secondary rounded-4">
            <div class="text-center">
              <div class="d-inline-flex mb-4 align-items-center justify-content-center bg-primary-dark bg-opacity-50 rounded-4" style="width: 48px; height: 48px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22 17H2C1.73478 17 1.48043 17.1054 1.29289 17.2929C1.10536 17.4804 1 17.7348 1 18C1 18.2652 1.10536 18.5196 1.29289 18.7071C1.48043 18.8946 1.73478 19 2 19H22C22.2652 19 22.5196 18.8946 22.7071 18.7071C22.8946 18.5196 23 18.2652 23 18C23 17.7348 22.8946 17.4804 22.7071 17.2929C22.5196 17.1054 22.2652 17 22 17ZM22 21H2C1.73478 21 1.48043 21.1054 1.29289 21.2929C1.10536 21.4804 1 21.7348 1 22C1 22.2652 1.10536 22.5196 1.29289 22.7071C1.48043 22.8946 1.73478 23 2 23H22C22.2652 23 22.5196 22.8946 22.7071 22.7071C22.8946 22.5196 23 22.2652 23 22C23 21.7348 22.8946 21.4804 22.7071 21.2929C22.5196 21.1054 22.2652 21 22 21ZM6 7C5.80222 7 5.60888 7.05865 5.44443 7.16853C5.27998 7.27841 5.15181 7.43459 5.07612 7.61732C5.00043 7.80004 4.98063 8.00111 5.01921 8.19509C5.0578 8.38907 5.15304 8.56725 5.29289 8.70711C5.43275 8.84696 5.61093 8.9422 5.80491 8.98079C5.99889 9.01937 6.19996 8.99957 6.38268 8.92388C6.56541 8.84819 6.72159 8.72002 6.83147 8.55557C6.94135 8.39112 7 8.19778 7 8C7 7.73478 6.89464 7.48043 6.70711 7.29289C6.51957 7.10536 6.26522 7 6 7ZM20 1H4C3.20435 1 2.44129 1.31607 1.87868 1.87868C1.31607 2.44129 1 3.20435 1 4V12C1 12.7956 1.31607 13.5587 1.87868 14.1213C2.44129 14.6839 3.20435 15 4 15H20C20.7956 15 21.5587 14.6839 22.1213 14.1213C22.6839 13.5587 23 12.7956 23 12V4C23 3.20435 22.6839 2.44129 22.1213 1.87868C21.5587 1.31607 20.7956 1 20 1ZM21 12C21 12.2652 20.8946 12.5196 20.7071 12.7071C20.5196 12.8946 20.2652 13 20 13H4C3.73478 13 3.48043 12.8946 3.29289 12.7071C3.10536 12.5196 3 12.2652 3 12V4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4V12ZM12 5C11.4067 5 10.8266 5.17595 10.3333 5.50559C9.83994 5.83524 9.45542 6.30377 9.22836 6.85195C9.0013 7.40013 8.94189 8.00333 9.05764 8.58527C9.1734 9.16721 9.45912 9.70176 9.87868 10.1213C10.2982 10.5409 10.8328 10.8266 11.4147 10.9424C11.9967 11.0581 12.5999 10.9987 13.1481 10.7716C13.6962 10.5446 14.1648 10.1601 14.4944 9.66671C14.8241 9.17336 15 8.59334 15 8C15 7.20435 14.6839 6.44129 14.1213 5.87868C13.5587 5.31607 12.7956 5 12 5ZM12 9C11.8022 9 11.6089 8.94135 11.4444 8.83147C11.28 8.72159 11.1518 8.56541 11.0761 8.38268C11.0004 8.19996 10.9806 7.99889 11.0192 7.80491C11.0578 7.61093 11.153 7.43275 11.2929 7.29289C11.4327 7.15304 11.6109 7.0578 11.8049 7.01921C11.9989 6.98063 12.2 7.00043 12.3827 7.07612C12.5654 7.15181 12.7216 7.27998 12.8315 7.44443C12.9414 7.60888 13 7.80222 13 8C13 8.26522 12.8946 8.51957 12.7071 8.70711C12.5196 8.89464 12.2652 9 12 9ZM18 7C17.8022 7 17.6089 7.05865 17.4444 7.16853C17.28 7.27841 17.1518 7.43459 17.0761 7.61732C17.0004 7.80004 16.9806 8.00111 17.0192 8.19509C17.0578 8.38907 17.153 8.56725 17.2929 8.70711C17.4327 8.84696 17.6109 8.9422 17.8049 8.98079C17.9989 9.01937 18.2 8.99957 18.3827 8.92388C18.5654 8.84819 18.7216 8.72002 18.8315 8.55557C18.9414 8.39112 19 8.19778 19 8C19 7.73478 18.8946 7.48043 18.7071 7.29289C18.5196 7.10536 18.2652 7 18 7Z" fill="#194BFB"></path>
                </svg>
              </div>
              <div class="mb-4"><span class="d-block fs-10 fw-semibold text-secondary-light">Budget</span><span class="d-block fs-6 fw-semibold text-light">$28k</span></div>
              <div>
                <div class="d-inline-flex me-2 ps-2 pe-2 py-1 bg-success-dark bg-opacity-50 text-success rounded-pill"><span class="fs-10 fw-medium">1,0%</span></div><span class="fs-10 fw-medium text-secondary-light">Since last month</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-6">
          <div class="py-8 px-6 h-100 bg-secondary rounded-4">
            <div class="text-center">
              <div class="d-inline-flex mb-4 align-items-center justify-content-center bg-primary-dark bg-opacity-50 rounded-4" style="width: 48px; height: 48px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.3 12.22C12.8336 11.7581 13.2616 11.1869 13.5549 10.545C13.8482 9.90316 14 9.20571 14 8.5C14 7.17392 13.4732 5.90215 12.5355 4.96447C11.5979 4.02678 10.3261 3.5 9 3.5C7.67392 3.5 6.40215 4.02678 5.46447 4.96447C4.52678 5.90215 4 7.17392 4 8.5C3.99999 9.20571 4.1518 9.90316 4.44513 10.545C4.73845 11.1869 5.16642 11.7581 5.7 12.22C4.30014 12.8539 3.11247 13.8775 2.27898 15.1685C1.4455 16.4596 1.00147 17.9633 1 19.5C1 19.7652 1.10536 20.0196 1.29289 20.2071C1.48043 20.3946 1.73478 20.5 2 20.5C2.26522 20.5 2.51957 20.3946 2.70711 20.2071C2.89464 20.0196 3 19.7652 3 19.5C3 17.9087 3.63214 16.3826 4.75736 15.2574C5.88258 14.1321 7.4087 13.5 9 13.5C10.5913 13.5 12.1174 14.1321 13.2426 15.2574C14.3679 16.3826 15 17.9087 15 19.5C15 19.7652 15.1054 20.0196 15.2929 20.2071C15.4804 20.3946 15.7348 20.5 16 20.5C16.2652 20.5 16.5196 20.3946 16.7071 20.2071C16.8946 20.0196 17 19.7652 17 19.5C16.9985 17.9633 16.5545 16.4596 15.721 15.1685C14.8875 13.8775 13.6999 12.8539 12.3 12.22ZM9 11.5C8.40666 11.5 7.82664 11.3241 7.33329 10.9944C6.83994 10.6648 6.45542 10.1962 6.22836 9.64805C6.0013 9.09987 5.94189 8.49667 6.05764 7.91473C6.1734 7.33279 6.45912 6.79824 6.87868 6.37868C7.29824 5.95912 7.83279 5.6734 8.41473 5.55764C8.99667 5.44189 9.59987 5.5013 10.1481 5.72836C10.6962 5.95542 11.1648 6.33994 11.4944 6.83329C11.8241 7.32664 12 7.90666 12 8.5C12 9.29565 11.6839 10.0587 11.1213 10.6213C10.5587 11.1839 9.79565 11.5 9 11.5ZM18.74 11.82C19.38 11.0993 19.798 10.2091 19.9438 9.25634C20.0896 8.30362 19.9569 7.32907 19.5618 6.45C19.1666 5.57093 18.5258 4.8248 17.7165 4.30142C16.9071 3.77805 15.9638 3.49974 15 3.5C14.7348 3.5 14.4804 3.60536 14.2929 3.79289C14.1054 3.98043 14 4.23478 14 4.5C14 4.76522 14.1054 5.01957 14.2929 5.20711C14.4804 5.39464 14.7348 5.5 15 5.5C15.7956 5.5 16.5587 5.81607 17.1213 6.37868C17.6839 6.94129 18 7.70435 18 8.5C17.9986 9.02524 17.8593 9.5409 17.5961 9.99542C17.3328 10.4499 16.9549 10.8274 16.5 11.09C16.3517 11.1755 16.2279 11.2977 16.1404 11.4447C16.0528 11.5918 16.0045 11.7589 16 11.93C15.9958 12.0998 16.0349 12.2678 16.1137 12.4183C16.1924 12.5687 16.3081 12.6967 16.45 12.79L16.84 13.05L16.97 13.12C18.1754 13.6917 19.1923 14.596 19.901 15.7263C20.6096 16.8566 20.9805 18.1659 20.97 19.5C20.97 19.7652 21.0754 20.0196 21.2629 20.2071C21.4504 20.3946 21.7048 20.5 21.97 20.5C22.2352 20.5 22.4896 20.3946 22.6771 20.2071C22.8646 20.0196 22.97 19.7652 22.97 19.5C22.9782 17.9654 22.5938 16.4543 21.8535 15.1101C21.1131 13.7659 20.0413 12.6333 18.74 11.82Z" fill="#194BFB"></path>
                </svg>
              </div>
              <div class="mb-4"><span class="d-block fs-10 fw-semibold text-secondary-light">Total customers</span><span class="d-block fs-6 fw-semibold text-light">1.6K</span></div>
              <div>
                <div class="d-inline-flex me-2 ps-2 pe-2 py-1 bg-success-dark bg-opacity-50 text-success rounded-pill"><span class="fs-10 fw-medium">1,0%</span></div><span class="fs-10 fw-medium text-secondary-light">Since last month</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-6">
          <div class="py-8 px-6 h-100 bg-secondary rounded-4">
            <div class="text-center">
              <div class="d-inline-flex mb-4 align-items-center justify-content-center bg-primary-dark bg-opacity-50 rounded-4" style="width: 48px; height: 48px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17 4H15.82C15.6137 3.41645 15.2319 2.911 14.7271 2.55294C14.2222 2.19488 13.6189 2.00174 13 2H11C10.3811 2.00174 9.7778 2.19488 9.27293 2.55294C8.76807 2.911 8.38631 3.41645 8.18 4H7C6.20435 4 5.44129 4.31607 4.87868 4.87868C4.31607 5.44129 4 6.20435 4 7V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V7C20 6.20435 19.6839 5.44129 19.1213 4.87868C18.5587 4.31607 17.7956 4 17 4ZM10 5C10 4.73478 10.1054 4.48043 10.2929 4.29289C10.4804 4.10536 10.7348 4 11 4H13C13.2652 4 13.5196 4.10536 13.7071 4.29289C13.8946 4.48043 14 4.73478 14 5V6H10V5ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V7C6 6.73478 6.10536 6.48043 6.29289 6.29289C6.48043 6.10536 6.73478 6 7 6H8V7C8 7.26522 8.10536 7.51957 8.29289 7.70711C8.48043 7.89464 8.73478 8 9 8H15C15.2652 8 15.5196 7.89464 15.7071 7.70711C15.8946 7.51957 16 7.26522 16 7V6H17C17.2652 6 17.5196 6.10536 17.7071 6.29289C17.8946 6.48043 18 6.73478 18 7V19Z" fill="#194BFB"></path>
                </svg>
              </div>
              <div class="mb-4"><span class="d-block fs-10 fw-semibold text-secondary-light">Tasks Progress</span><span class="d-block fs-6 fw-semibold text-light">64.5%</span></div>
              <div>
                <div class="d-inline-flex me-2 ps-2 pe-2 py-1 bg-success-dark bg-opacity-50 text-success rounded-pill"><span class="fs-10 fw-medium">1,0%</span></div><span class="fs-10 fw-medium text-secondary-light">Since last month</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-6">
          <div class="py-8 px-6 h-100 bg-secondary rounded-4">
            <div class="text-center">
              <div class="d-inline-flex mb-4 align-items-center justify-content-center bg-primary-dark bg-opacity-50 rounded-4" style="width: 48px; height: 48px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20 1H4C3.20435 1 2.44129 1.31607 1.87868 1.87868C1.31607 2.44129 1 3.20435 1 4V20C1 20.7956 1.31607 21.5587 1.87868 22.1213C2.44129 22.6839 3.20435 23 4 23H20C20.7956 23 21.5587 22.6839 22.1213 22.1213C22.6839 21.5587 23 20.7956 23 20V4C23 3.20435 22.6839 2.44129 22.1213 1.87868C21.5587 1.31607 20.7956 1 20 1ZM8 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V18.82C3.32067 18.9364 3.65886 18.9973 4 19H8V21ZM8 17H4C3.73478 17 3.48043 16.8946 3.29289 16.7071C3.10536 16.5196 3 16.2652 3 16V14.82C3.32067 14.9364 3.65886 14.9973 4 15H8V17ZM8 13H4C3.73478 13 3.48043 12.8946 3.29289 12.7071C3.10536 12.5196 3 12.2652 3 12V4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3H8V13ZM14 21H10V15H14V21ZM14 13H10V3H14V13ZM21 20C21 20.2652 20.8946 20.5196 20.7071 20.7071C20.5196 20.8946 20.2652 21 20 21H16V19H20C20.3411 18.9973 20.6793 18.9364 21 18.82V20ZM21 16C21 16.2652 20.8946 16.5196 20.7071 16.7071C20.5196 16.8946 20.2652 17 20 17H16V15H20C20.3411 14.9973 20.6793 14.9364 21 14.82V16ZM21 12C21 12.2652 20.8946 12.5196 20.7071 12.7071C20.5196 12.8946 20.2652 13 20 13H16V3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4V12ZM18 7C17.8022 7 17.6089 7.05865 17.4444 7.16853C17.28 7.27841 17.1518 7.43459 17.0761 7.61732C17.0004 7.80004 16.9806 8.00111 17.0192 8.19509C17.0578 8.38907 17.153 8.56725 17.2929 8.70711C17.4327 8.84696 17.6109 8.9422 17.8049 8.98079C17.9989 9.01937 18.2 8.99957 18.3827 8.92388C18.5654 8.84819 18.7216 8.72002 18.8315 8.55557C18.9414 8.39112 19 8.19778 19 8C19 7.73478 18.8946 7.48043 18.7071 7.29289C18.5196 7.10536 18.2652 7 18 7ZM6 9C6.19778 9 6.39112 8.94135 6.55557 8.83147C6.72002 8.72159 6.84819 8.56541 6.92388 8.38268C6.99957 8.19996 7.01937 7.99889 6.98079 7.80491C6.9422 7.61093 6.84696 7.43275 6.70711 7.29289C6.56725 7.15304 6.38907 7.0578 6.19509 7.01921C6.00111 6.98063 5.80004 7.00043 5.61732 7.07612C5.43459 7.15181 5.27841 7.27998 5.16853 7.44443C5.05865 7.60888 5 7.80222 5 8C5 8.26522 5.10536 8.51957 5.29289 8.70711C5.48043 8.89464 5.73478 9 6 9Z" fill="#194BFB"></path>
                </svg>
              </div>
              <div class="mb-4"><span class="d-block fs-10 fw-semibold text-secondary-light">Total profit</span><span class="d-block fs-6 fw-semibold text-light">$23k</span></div>
              <div>
                <div class="d-inline-flex me-2 ps-2 pe-2 py-1 bg-success-dark bg-opacity-50 text-success rounded-pill"><span class="fs-10 fw-medium">1,0%</span></div><span class="fs-10 fw-medium text-secondary-light">Since last month</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-7 col-lg-8 mb-6">
          <div class="py-6 px-5 bg-secondary rounded-4">
            <div class="d-md-flex mb-6 flex-wrap align-items-center justify-content-between">
              <h6 class="fs-8 fw-semibold text-secondary-light mb-4 mb-md-0">Latest Sales</h6>
              <div class="d-sm-flex align-items-center">
                <div class="d-flex align-items-center mb-2 mb-sm-0 me-sm-4">
                  <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="4" cy="4" r="4" fill="#2563EB"></circle>
                  </svg><span class="ms-2 fs-10 fw-semibold text-secondary-light">This year</span>
                </div>
                <div class="d-flex mb-4 mb-sm-0 me-sm-4 align-items-center">
                  <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="4" cy="4" r="4" fill="#936DFF"></circle>
                  </svg><span class="ms-2 fs-10 fw-semibold text-secondary-light">Last year</span>
                </div>
                <div class="position-relative bg-dark-light rounded-4"><span class="position-absolute top-50 end-0 me-2 translate-middle-y">
                    <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M4.5 6L8.5 10L12.5 6" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg></span>
                  <select class="position-relative form-select py-3 ps-3 pe-8 fs-10 fw-semibold text-secondary-light bg-transparent border-0" name="" id="">
                    <option value="1">Last 7 days</option>
                    <option value="1">14 Days</option>
                    <option value="1">21 Days</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="chart" data-type="columns-thin" data-variant="two" style="min-height: 200px;"></div>
          </div>
        </div>
        <div class="col-md-5 col-lg-4 mb-6">
          <div class="h-100 py-6 px-5 bg-secondary rounded-4">
            <h6 class="fs-8 fw-semibold text-secondary-light mb-6">Latest Sales</h6>
            <div class="chart mb-10" data-type="donut" style="min-height: 180px;"></div>
            <div class="d-flex flex-wrap px-4 align-items-center justify-content-center gap-4 gap-lg-12">
              <div class="text-center">
                <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="4" cy="4" r="4" fill="#2563EB"></circle>
                </svg>
                <h6 class="mt-2 mb-1 fs-10 text-secondary-light fw-semibold">Desktop</h6>
                <h5 class="fs-6 mb-0 text-light fw-semibold">65%</h5>
              </div>
              <div class="text-center">
                <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="4" cy="4" r="4" fill="#936DFF"></circle>
                </svg>
                <h6 class="mt-2 mb-1 fs-10 text-secondary-light fw-semibold">Mobile</h6>
                <h5 class="fs-6 mb-0 text-light fw-semibold">20%</h5>
              </div>
              <div class="text-center">
                <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="4" cy="4" r="4" fill="#FACC15"></circle>
                </svg>
                <h6 class="mt-2 mb-1 fs-10 text-secondary-light fw-semibold">Tablet</h6>
                <h5 class="fs-6 mb-0 text-light fw-semibold">15%</h5>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 mb-6">
          <div class="h-100 py-6 px-5 bg-secondary rounded-4">
            <h6 class="fs-8 fw-semibold text-secondary-light mb-10">Latest Products</h6><a class="btn btn-secondary p-4 text-start d-flex align-items-center" href="#">
              <div class="d-flex me-3 align-items-center justify-content-center bg-secondary-dark bg-opacity-25 rounded-4" style="width: 40px; height: 40px;;">
                <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_130_317)">
                    <path d="M5 0L0 3.24L3.48 6.04L8.48 2.92L5 0ZM0 8.76L5 12.04L8.48 9.12L3.48 6.04L0 8.76ZM8.48 9.12L12 12.04L16.96 8.8L13.52 6.04L8.48 9.12ZM16.96 3.24L12 0L8.48 2.92L13.52 6.04L16.96 3.24ZM8.52 9.76L5 12.68L3.52 11.68V12.8L8.52 15.8L13.52 12.8V11.68L12 12.68L8.52 9.76Z" fill="#007EE5"></path>
                  </g>
                </svg>
              </div>
              <div class="me-2"><span class="d-block lh-sm fs-9 fw-medium text-light">Dropbox</span><span class="fs-10 fw-semibold text-secondary-light">Updated about 7 hours</span></div>
              <div class="ms-auto">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 7C12.3956 7 12.7822 6.8827 13.1111 6.66294C13.44 6.44318 13.6964 6.13082 13.8478 5.76537C13.9991 5.39992 14.0387 4.99778 13.9616 4.60982C13.8844 4.22186 13.6939 3.86549 13.4142 3.58579C13.1345 3.30608 12.7781 3.1156 12.3902 3.03843C12.0022 2.96126 11.6001 3.00087 11.2346 3.15224C10.8692 3.30362 10.5568 3.55996 10.3371 3.88886C10.1173 4.21776 10 4.60444 10 5C10 5.53043 10.2107 6.03914 10.5858 6.41421C10.9609 6.78929 11.4696 7 12 7ZM12 17C11.6044 17 11.2178 17.1173 10.8889 17.3371C10.56 17.5568 10.3036 17.8692 10.1522 18.2346C10.0009 18.6001 9.96126 19.0022 10.0384 19.3902C10.1156 19.7781 10.3061 20.1345 10.5858 20.4142C10.8655 20.6939 11.2219 20.8844 11.6098 20.9616C11.9978 21.0387 12.3999 20.9991 12.7654 20.8478C13.1308 20.6964 13.4432 20.44 13.6629 20.1111C13.8827 19.7822 14 19.3956 14 19C14 18.4696 13.7893 17.9609 13.4142 17.5858C13.0391 17.2107 12.5304 17 12 17ZM12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10Z" fill="#3D485B"></path>
                </svg>
              </div></a><a class="btn btn-secondary p-4 text-start d-flex align-items-center" href="#">
              <div class="d-flex me-3 align-items-center justify-content-center bg-secondary-dark bg-opacity-25 rounded-4" style="width: 40px; height: 40px;;">
                <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_130_319)">
                    <path d="M13.6719 0.128937C13.3721 -0.0139757 13.127 0.130207 13.127 0.45033V13.1816L18.5995 15.794C19.2017 16.0862 19.6901 15.883 19.6901 15.3494V3.09071C19.6901 3.0399 19.6584 2.99544 19.6114 2.97003L13.6726 0.137194V0.130842L13.6719 0.128937Z" fill="#32FC8D"></path>
                    <path d="M6.56323 10.049L12.8069 0.364613C12.9835 0.091492 13.3722 -0.0164862 13.6707 0.12325L19.6184 2.96244C19.6565 2.9815 19.6705 3.02596 19.6483 3.05772L13.1264 13.1829L6.56323 10.0503V10.049Z" fill="#0BE370"></path>
                    <path d="M0.908285 0.301737C0.409045 0.0635496 0.239456 0.240761 0.532267 0.695539L6.56317 10.049L13.1263 13.1816L6.57777 3.02342C6.56825 3.00881 6.55491 2.99674 6.53966 2.98912L0.908285 0.302372V0.301737Z" fill="#14C767"></path>
                    <path d="M6.56317 15.3444C6.56317 15.8779 6.15476 16.1193 5.65488 15.8805L0.544972 13.4414C0.245174 13.2991 0 12.9206 0 12.5998V0.644732C0 0.2179 0.32711 0.0248101 0.727265 0.215995L6.52823 2.98532C6.54983 2.99485 6.56317 3.01581 6.56317 3.03867V15.3418V15.3444Z" fill="#00AB6C"></path>
                  </g>
                </svg>
              </div>
              <div class="me-2"><span class="d-block lh-sm fs-9 fw-medium text-light">Medium</span><span class="fs-10 fw-semibold text-secondary-light">Updated about 7 hours</span></div>
              <div class="ms-auto">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 7C12.3956 7 12.7822 6.8827 13.1111 6.66294C13.44 6.44318 13.6964 6.13082 13.8478 5.76537C13.9991 5.39992 14.0387 4.99778 13.9616 4.60982C13.8844 4.22186 13.6939 3.86549 13.4142 3.58579C13.1345 3.30608 12.7781 3.1156 12.3902 3.03843C12.0022 2.96126 11.6001 3.00087 11.2346 3.15224C10.8692 3.30362 10.5568 3.55996 10.3371 3.88886C10.1173 4.21776 10 4.60444 10 5C10 5.53043 10.2107 6.03914 10.5858 6.41421C10.9609 6.78929 11.4696 7 12 7ZM12 17C11.6044 17 11.2178 17.1173 10.8889 17.3371C10.56 17.5568 10.3036 17.8692 10.1522 18.2346C10.0009 18.6001 9.96126 19.0022 10.0384 19.3902C10.1156 19.7781 10.3061 20.1345 10.5858 20.4142C10.8655 20.6939 11.2219 20.8844 11.6098 20.9616C11.9978 21.0387 12.3999 20.9991 12.7654 20.8478C13.1308 20.6964 13.4432 20.44 13.6629 20.1111C13.8827 19.7822 14 19.3956 14 19C14 18.4696 13.7893 17.9609 13.4142 17.5858C13.0391 17.2107 12.5304 17 12 17ZM12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10Z" fill="#3D485B"></path>
                </svg>
              </div></a><a class="btn btn-secondary p-4 text-start d-flex align-items-center" href="#">
              <div class="d-flex me-3 align-items-center justify-content-center bg-secondary-dark bg-opacity-25 rounded-4" style="width: 40px; height: 40px;;">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_130_325)">
                    <path d="M3.42681 10.0788C3.42681 10.9984 2.68351 11.7418 1.76382 11.7418C0.844137 11.7418 0.10083 10.9984 0.10083 10.0788C0.10083 9.15908 0.844137 8.41577 1.76382 8.41577H3.42681V10.0788ZM4.25831 10.0788C4.25831 9.15908 5.00162 8.41577 5.9213 8.41577C6.84099 8.41577 7.58429 9.15908 7.58429 10.0788V14.2362C7.58429 15.1559 6.84099 15.8992 5.9213 15.8992C5.00162 15.8992 4.25831 15.1559 4.25831 14.2362V10.0788Z" fill="#E01E5A"></path>
                    <path d="M5.92121 3.40155C5.00152 3.40155 4.25821 2.65824 4.25821 1.73855C4.25821 0.818869 5.00152 0.0755615 5.92121 0.0755615C6.84089 0.0755615 7.5842 0.818869 7.5842 1.73855V3.40155H5.92121ZM5.92121 4.24564C6.84089 4.24564 7.5842 4.98895 7.5842 5.90863C7.5842 6.82832 6.84089 7.57162 5.92121 7.57162H1.75113C0.831442 7.57162 0.0881348 6.82832 0.0881348 5.90863C0.0881348 4.98895 0.831442 4.24564 1.75113 4.24564H5.92121Z" fill="#36C5F0"></path>
                    <path d="M12.5859 5.90863C12.5859 4.98895 13.3293 4.24564 14.2489 4.24564C15.1686 4.24564 15.9119 4.98895 15.9119 5.90863C15.9119 6.82832 15.1686 7.57162 14.2489 7.57162H12.5859V5.90863ZM11.7545 5.90863C11.7545 6.82832 11.0111 7.57162 10.0915 7.57162C9.17177 7.57162 8.42847 6.82832 8.42847 5.90863V1.73855C8.42847 0.818869 9.17177 0.0755615 10.0915 0.0755615C11.0111 0.0755615 11.7545 0.818869 11.7545 1.73855V5.90863Z" fill="#2EB67D"></path>
                    <path d="M10.0915 12.5733C11.0111 12.5733 11.7545 13.3166 11.7545 14.2362C11.7545 15.1559 11.0111 15.8992 10.0915 15.8992C9.17177 15.8992 8.42847 15.1559 8.42847 14.2362V12.5733H10.0915ZM10.0915 11.7418C9.17177 11.7418 8.42847 10.9984 8.42847 10.0788C8.42847 9.15908 9.17177 8.41577 10.0915 8.41577H14.2615C15.1812 8.41577 15.9245 9.15908 15.9245 10.0788C15.9245 10.9984 15.1812 11.7418 14.2615 11.7418H10.0915Z" fill="#ECB22E"></path>
                  </g>
                </svg>
              </div>
              <div class="me-2"><span class="d-block lh-sm fs-9 fw-medium text-light">Slack</span><span class="fs-10 fw-semibold text-secondary-light">Updated about 7 hours</span></div>
              <div class="ms-auto">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 7C12.3956 7 12.7822 6.8827 13.1111 6.66294C13.44 6.44318 13.6964 6.13082 13.8478 5.76537C13.9991 5.39992 14.0387 4.99778 13.9616 4.60982C13.8844 4.22186 13.6939 3.86549 13.4142 3.58579C13.1345 3.30608 12.7781 3.1156 12.3902 3.03843C12.0022 2.96126 11.6001 3.00087 11.2346 3.15224C10.8692 3.30362 10.5568 3.55996 10.3371 3.88886C10.1173 4.21776 10 4.60444 10 5C10 5.53043 10.2107 6.03914 10.5858 6.41421C10.9609 6.78929 11.4696 7 12 7ZM12 17C11.6044 17 11.2178 17.1173 10.8889 17.3371C10.56 17.5568 10.3036 17.8692 10.1522 18.2346C10.0009 18.6001 9.96126 19.0022 10.0384 19.3902C10.1156 19.7781 10.3061 20.1345 10.5858 20.4142C10.8655 20.6939 11.2219 20.8844 11.6098 20.9616C11.9978 21.0387 12.3999 20.9991 12.7654 20.8478C13.1308 20.6964 13.4432 20.44 13.6629 20.1111C13.8827 19.7822 14 19.3956 14 19C14 18.4696 13.7893 17.9609 13.4142 17.5858C13.0391 17.2107 12.5304 17 12 17ZM12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10Z" fill="#3D485B"></path>
                </svg>
              </div></a><a class="btn btn-secondary p-4 text-start d-flex align-items-center" href="#">
              <div class="d-flex me-3 align-items-center justify-content-center bg-secondary-dark bg-opacity-25 rounded-4" style="width: 40px; height: 40px;;">
                <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_130_330)">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.20403 3.55206e-06C6.25446 -0.00197794 4.3679 0.690379 2.88244 1.95301C1.39698 3.21563 0.409707 4.96599 0.0975574 6.89041C-0.214592 8.81483 0.168785 10.7875 1.17898 12.4549C2.18917 14.1224 3.76015 15.3756 5.61039 15.9899C6.01832 16.0655 6.1694 15.8086 6.1694 15.5921C6.1694 15.3755 6.1694 14.882 6.1694 14.197C3.88801 14.7007 3.40453 13.0992 3.40453 13.0992C3.25251 12.6028 2.92956 12.1764 2.49298 11.8955C1.75266 11.3919 2.55341 11.3919 2.55341 11.3919C2.81292 11.4285 3.06069 11.5238 3.27796 11.6704C3.49522 11.8169 3.67628 12.011 3.80743 12.238C3.91886 12.44 4.06909 12.6181 4.2495 12.7619C4.42991 12.9058 4.63696 13.0126 4.85875 13.0762C5.08054 13.1398 5.31272 13.1591 5.54195 13.1328C5.77119 13.1064 5.99297 13.0351 6.19458 12.9229C6.22619 12.5086 6.4048 12.1192 6.6982 11.825C4.8751 11.6185 2.96134 10.9134 2.96134 7.77085C2.94882 6.95649 3.24995 6.1685 3.80239 5.57004C3.55585 4.86204 3.58461 4.08721 3.88297 3.39944C3.88297 3.39944 4.57292 3.17784 6.13918 4.24047C7.48414 3.8712 8.90376 3.8712 10.2487 4.24047C11.815 3.17784 12.4999 3.39944 12.4999 3.39944C12.8014 4.08623 12.832 4.86163 12.5855 5.57004C13.1379 6.1685 13.4391 6.95649 13.4266 7.77085C13.4266 10.9235 11.5078 11.6135 9.67963 11.7998C9.87565 11.9969 10.027 12.2338 10.1235 12.4944C10.2199 12.7551 10.2592 13.0335 10.2386 13.3107C10.2386 14.4086 10.2386 15.2949 10.2386 15.5619C10.2386 15.8288 10.3847 16.0353 10.8027 15.9597C12.6471 15.3396 14.2113 14.0844 15.2161 12.418C16.221 10.7517 16.6013 8.7826 16.2892 6.86191C15.977 4.94123 14.9927 3.1939 13.5119 1.93155C12.031 0.669203 10.1499 -0.0260534 8.20403 -0.0302124V3.55206e-06Z" fill="white"></path>
                  </g>
                </svg>
              </div>
              <div class="me-2"><span class="d-block lh-sm fs-9 fw-medium text-light">Github</span><span class="fs-10 fw-semibold text-secondary-light">Updated about 7 hours</span></div>
              <div class="ms-auto">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 7C12.3956 7 12.7822 6.8827 13.1111 6.66294C13.44 6.44318 13.6964 6.13082 13.8478 5.76537C13.9991 5.39992 14.0387 4.99778 13.9616 4.60982C13.8844 4.22186 13.6939 3.86549 13.4142 3.58579C13.1345 3.30608 12.7781 3.1156 12.3902 3.03843C12.0022 2.96126 11.6001 3.00087 11.2346 3.15224C10.8692 3.30362 10.5568 3.55996 10.3371 3.88886C10.1173 4.21776 10 4.60444 10 5C10 5.53043 10.2107 6.03914 10.5858 6.41421C10.9609 6.78929 11.4696 7 12 7ZM12 17C11.6044 17 11.2178 17.1173 10.8889 17.3371C10.56 17.5568 10.3036 17.8692 10.1522 18.2346C10.0009 18.6001 9.96126 19.0022 10.0384 19.3902C10.1156 19.7781 10.3061 20.1345 10.5858 20.4142C10.8655 20.6939 11.2219 20.8844 11.6098 20.9616C11.9978 21.0387 12.3999 20.9991 12.7654 20.8478C13.1308 20.6964 13.4432 20.44 13.6629 20.1111C13.8827 19.7822 14 19.3956 14 19C14 18.4696 13.7893 17.9609 13.4142 17.5858C13.0391 17.2107 12.5304 17 12 17ZM12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10Z" fill="#3D485B"></path>
                </svg>
              </div></a><a class="btn btn-secondary p-4 text-start d-flex align-items-center" href="#">
              <div class="d-flex me-3 align-items-center justify-content-center bg-secondary-dark bg-opacity-25 rounded-4" style="width: 40px; height: 40px;;">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.5535 2.81854C12.5178 2.33396 11.4104 1.98178 10.2526 1.78125C10.1104 2.03832 9.94429 2.38409 9.82976 2.65915C8.599 2.47406 7.37956 2.47406 6.17144 2.65915C6.05693 2.38409 5.88704 2.03832 5.74357 1.78125C4.58454 1.98178 3.47584 2.33525 2.44013 2.8211C0.351095 5.97791 -0.215207 9.0563 0.0679444 12.091C1.4535 13.1257 2.79627 13.7542 4.11638 14.1655C4.44233 13.7169 4.73302 13.2401 4.98345 12.7375C4.5065 12.5563 4.04969 12.3326 3.61805 12.073C3.73256 11.9882 3.84457 11.8995 3.95279 11.8082C6.58546 13.0396 9.44593 13.0396 12.0472 11.8082C12.1566 11.8995 12.2686 11.9882 12.3819 12.073C11.949 12.3339 11.4909 12.5576 11.014 12.7388C11.2644 13.2401 11.5538 13.7182 11.881 14.1668C13.2024 13.7555 14.5464 13.127 15.932 12.091C16.2642 8.57301 15.3644 5.52289 13.5535 2.81854ZM5.34212 10.2247C4.55181 10.2247 3.9037 9.48688 3.9037 8.58843C3.9037 7.68998 4.53797 6.95091 5.34212 6.95091C6.14628 6.95091 6.79437 7.68868 6.78053 8.58843C6.78178 9.48688 6.14628 10.2247 5.34212 10.2247ZM10.6578 10.2247C9.86752 10.2247 9.21941 9.48688 9.21941 8.58843C9.21941 7.68998 9.85366 6.95091 10.6578 6.95091C11.462 6.95091 12.1101 7.68868 12.0962 8.58843C12.0962 9.48688 11.462 10.2247 10.6578 10.2247Z" fill="#5865F2"></path>
                </svg>
              </div>
              <div class="me-2"><span class="d-block lh-sm fs-9 fw-medium text-light">Discord</span><span class="fs-10 fw-semibold text-secondary-light">Updated about 7 hours</span></div>
              <div class="ms-auto">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 7C12.3956 7 12.7822 6.8827 13.1111 6.66294C13.44 6.44318 13.6964 6.13082 13.8478 5.76537C13.9991 5.39992 14.0387 4.99778 13.9616 4.60982C13.8844 4.22186 13.6939 3.86549 13.4142 3.58579C13.1345 3.30608 12.7781 3.1156 12.3902 3.03843C12.0022 2.96126 11.6001 3.00087 11.2346 3.15224C10.8692 3.30362 10.5568 3.55996 10.3371 3.88886C10.1173 4.21776 10 4.60444 10 5C10 5.53043 10.2107 6.03914 10.5858 6.41421C10.9609 6.78929 11.4696 7 12 7ZM12 17C11.6044 17 11.2178 17.1173 10.8889 17.3371C10.56 17.5568 10.3036 17.8692 10.1522 18.2346C10.0009 18.6001 9.96126 19.0022 10.0384 19.3902C10.1156 19.7781 10.3061 20.1345 10.5858 20.4142C10.8655 20.6939 11.2219 20.8844 11.6098 20.9616C11.9978 21.0387 12.3999 20.9991 12.7654 20.8478C13.1308 20.6964 13.4432 20.44 13.6629 20.1111C13.8827 19.7822 14 19.3956 14 19C14 18.4696 13.7893 17.9609 13.4142 17.5858C13.0391 17.2107 12.5304 17 12 17ZM12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10Z" fill="#3D485B"></path>
                </svg>
              </div></a><a class="btn btn-secondary p-4 text-start d-flex align-items-center" href="#">
              <div class="d-flex me-3 align-items-center justify-content-center bg-secondary-dark bg-opacity-25 rounded-4" style="width: 40px; height: 40px;;">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_130_335)">
                    <path d="M7.99969 0.0263672C3.59503 0.0263672 0.0241699 3.59713 0.0241699 8.0018C0.0241699 12.4067 3.59503 15.9771 7.99969 15.9771C12.4048 15.9771 15.9753 12.4067 15.9753 8.0018C15.9753 3.59741 12.4048 0.0267481 7.9996 0.0267481L7.99969 0.0263672ZM11.6572 11.5292C11.5144 11.7635 11.2077 11.8378 10.9734 11.694C9.10084 10.5502 6.7435 10.2911 3.96731 10.9254C3.69979 10.9864 3.43312 10.8187 3.37217 10.5511C3.31093 10.2835 3.47788 10.0168 3.74607 9.95589C6.78417 9.26151 9.39017 9.56065 11.4925 10.8454C11.7267 10.9892 11.801 11.2949 11.6572 11.5292ZM12.6334 9.35732C12.4534 9.65018 12.0706 9.74256 11.7782 9.56256C9.63436 8.24456 6.36646 7.86294 3.83074 8.63265C3.50188 8.73199 3.15455 8.54665 3.05474 8.21837C2.95569 7.88951 3.14112 7.54284 3.46941 7.44284C6.36588 6.56399 9.96674 6.9897 12.4286 8.50256C12.721 8.68256 12.8134 9.06541 12.6334 9.35742V9.35732ZM12.7172 7.09599C10.1467 5.56922 5.90579 5.42884 3.4516 6.1737C3.0575 6.29322 2.64074 6.07075 2.52131 5.67665C2.40188 5.28237 2.62417 4.86589 3.01855 4.74608C5.83579 3.89084 10.5191 4.05608 13.4786 5.81294C13.8338 6.02332 13.95 6.48113 13.7395 6.83513C13.53 7.18961 13.0709 7.30646 12.7176 7.09599H12.7172Z" fill="#1ED760"></path>
                  </g>
                </svg>
              </div>
              <div class="me-2"><span class="d-block lh-sm fs-9 fw-medium text-light">Spotify</span><span class="fs-10 fw-semibold text-secondary-light">Updated about 7 hours</span></div>
              <div class="ms-auto">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 7C12.3956 7 12.7822 6.8827 13.1111 6.66294C13.44 6.44318 13.6964 6.13082 13.8478 5.76537C13.9991 5.39992 14.0387 4.99778 13.9616 4.60982C13.8844 4.22186 13.6939 3.86549 13.4142 3.58579C13.1345 3.30608 12.7781 3.1156 12.3902 3.03843C12.0022 2.96126 11.6001 3.00087 11.2346 3.15224C10.8692 3.30362 10.5568 3.55996 10.3371 3.88886C10.1173 4.21776 10 4.60444 10 5C10 5.53043 10.2107 6.03914 10.5858 6.41421C10.9609 6.78929 11.4696 7 12 7ZM12 17C11.6044 17 11.2178 17.1173 10.8889 17.3371C10.56 17.5568 10.3036 17.8692 10.1522 18.2346C10.0009 18.6001 9.96126 19.0022 10.0384 19.3902C10.1156 19.7781 10.3061 20.1345 10.5858 20.4142C10.8655 20.6939 11.2219 20.8844 11.6098 20.9616C11.9978 21.0387 12.3999 20.9991 12.7654 20.8478C13.1308 20.6964 13.4432 20.44 13.6629 20.1111C13.8827 19.7822 14 19.3956 14 19C14 18.4696 13.7893 17.9609 13.4142 17.5858C13.0391 17.2107 12.5304 17 12 17ZM12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10Z" fill="#3D485B"></path>
                </svg>
              </div></a>
          </div>
        </div>
        <div class="col-lg-8 mb-6">
          <div class="p-6 h-100 bg-secondary rounded-4">
            <h6 class="fs-8 fw-semibold text-light mb-6">Work Performance</h6>
            <div class="w-100 overflow-scroll">
              <table class="table table-borderless w-100" style="min-width: max-content;">
                <thead>
                  <tr><th class="p-0 bg-transparent" scope="col">
                    <div class="rounded-start-4 py-3 px-6 bg-dark-light" style="height: 64px;"><span class="fs-10 fw-semibold text-secondary-light">ORDER REF</span></div>
                  </th>
                  <th class="p-0 bg-transparent" scope="col">
                    <div class="py-3 px-6 bg-dark-light" style="height: 64px;"><span class="fs-10 fw-semibold text-secondary-light">CUSTOMER</span></div>
                  </th>
                  <th class="p-0 bg-transparent" scope="col">
                    <div class="py-3 px-6 bg-dark-light" style="height: 64px;"><span class="fs-10 fw-semibold text-secondary-light">DATE</span>
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.8598 9.52669L7.9998 12.3934L5.1398 9.52669C5.01426 9.40115 4.844 9.33063 4.66646 9.33063C4.48893 9.33063 4.31867 9.40115 4.19313 9.52669C4.0676 9.65222 3.99707 9.82249 3.99707 10C3.99707 10.1776 4.0676 10.3478 4.19313 10.4734L7.52646 13.8067C7.58844 13.8692 7.66217 13.9188 7.74341 13.9526C7.82465 13.9865 7.91179 14.0039 7.9998 14.0039C8.08781 14.0039 8.17494 13.9865 8.25618 13.9526C8.33742 13.9188 8.41116 13.8692 8.47313 13.8067L11.8065 10.4734C11.8686 10.4112 11.9179 10.3374 11.9516 10.2562C11.9852 10.175 12.0025 10.0879 12.0025 10C12.0025 9.91211 11.9852 9.82507 11.9516 9.74385C11.9179 9.66264 11.8686 9.58885 11.8065 9.52669C11.7443 9.46453 11.6705 9.41522 11.5893 9.38158C11.5081 9.34794 11.421 9.33063 11.3331 9.33063C11.2452 9.33063 11.1582 9.34794 11.077 9.38158C10.9958 9.41522 10.922 9.46453 10.8598 9.52669ZM5.1398 6.47335L7.9998 3.60669L10.8598 6.47335C10.9218 6.53584 10.9955 6.58544 11.0767 6.61928C11.158 6.65313 11.2451 6.67055 11.3331 6.67055C11.4211 6.67055 11.5083 6.65313 11.5895 6.61928C11.6708 6.58544 11.7445 6.53584 11.8065 6.47335C11.8689 6.41138 11.9185 6.33764 11.9524 6.2564C11.9862 6.17517 12.0037 6.08803 12.0037 6.00002C12.0037 5.91201 11.9862 5.82488 11.9524 5.74364C11.9185 5.6624 11.8689 5.58866 11.8065 5.52669L8.47313 2.19335C8.41116 2.13087 8.33742 2.08127 8.25618 2.04743C8.17494 2.01358 8.08781 1.99615 7.9998 1.99615C7.91179 1.99615 7.82465 2.01358 7.74341 2.04743C7.66217 2.08127 7.58844 2.13087 7.52646 2.19335L4.19313 5.52669C4.0676 5.65222 3.99707 5.82249 3.99707 6.00002C3.99707 6.17756 4.0676 6.34782 4.19313 6.47335C4.31867 6.59889 4.48893 6.66941 4.66646 6.66941C4.844 6.66941 5.01426 6.59889 5.1398 6.47335Z" fill="#919EB0"></path>
                      </svg>
                    </div>
                  </th>
                  <th class="p-0 bg-transparent" scope="col">
                    <div class="rounded-end-4 py-3 px-6 bg-dark-light" style="height: 64px;"><span class="fs-10 fw-semibold text-secondary-light">STATUS</span></div>
                  </th>
                </tr></thead>
                <tbody>
                  <tr>
                    <th class="p-0 bg-transparent" scope="row">
                      <div class="py-6 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">CDD1049</span></div>
                    </th>
                    <td class="p-0 bg-transparent">
                      <div class="py-5 px-6" style="height: 64px;">
                        <div><img class="img-fluid" style="width: 32px;" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-2 fs-9 fw-medium text-light">John Doe</span></div>
                      </div>
                    </td>
                    <td class="p-0 bg-transparent">
                      <div class="py-6 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">July 06, 2022</span></div>
                    </td>
                    <td class="p-0 bg-transparent">
                      <div class="py-6 px-6" style="height: 64px;">
                        <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="3" cy="3" r="3" fill="#FACC15"></circle>
                        </svg><span class="ms-1 fs-9 fw-medium text-light">Pending</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th class="p-0 bg-transparent" scope="row">
                      <div class="rounded-start-4 py-5 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">CDD1049</span></div>
                    </th>
                    <td class="p-0 bg-transparent">
                      <div class="py-4 px-6 bg-dark-light" style="height: 64px;">
                        <div><img class="img-fluid" style="width: 32px;" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-2 fs-9 fw-medium text-light">John Doe</span></div>
                      </div>
                    </td>
                    <td class="p-0 bg-transparent">
                      <div class="py-5 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">July 06, 2022</span></div>
                    </td>
                    <td class="p-0 bg-transparent">
                      <div class="rounded-end-4 py-5 px-6 bg-dark-light" style="height: 64px;">
                        <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="3" cy="3" r="3" fill="#FACC15"></circle>
                        </svg><span class="ms-1 fs-9 fw-medium text-light">Pending</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th class="p-0 bg-transparent" scope="row">
                      <div class="py-6 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">CDD1049</span></div>
                    </th>
                    <td class="p-0 bg-transparent">
                      <div class="py-5 px-6" style="height: 64px;">
                        <div><img class="img-fluid" style="width: 32px;" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-2 fs-9 fw-medium text-light">John Doe</span></div>
                      </div>
                    </td>
                    <td class="p-0 bg-transparent">
                      <div class="py-6 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">July 06, 2022</span></div>
                    </td>
                    <td class="p-0 bg-transparent">
                      <div class="py-6 px-6" style="height: 64px;">
                        <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="3" cy="3" r="3" fill="#24D164"></circle>
                        </svg><span class="ms-1 fs-9 fw-medium text-light">Delivered</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th class="p-0 bg-transparent" scope="row">
                      <div class="rounded-start-4 py-5 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">CDD1049</span></div>
                    </th>
                    <td class="p-0 bg-transparent">
                      <div class="py-4 px-6 bg-dark-light" style="height: 64px;">
                        <div><img class="img-fluid" style="width: 32px;" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-2 fs-9 fw-medium text-light">John Doe</span></div>
                      </div>
                    </td>
                    <td class="p-0 bg-transparent">
                      <div class="py-5 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">July 06, 2022</span></div>
                    </td>
                    <td class="p-0 bg-transparent">
                      <div class="rounded-end-4 py-5 px-6 bg-dark-light" style="height: 64px;">
                        <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="3" cy="3" r="3" fill="#FACC15"></circle>
                        </svg><span class="ms-1 fs-9 fw-medium text-light">Pending</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th class="p-0 bg-transparent" scope="row">
                      <div class="py-6 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">CDD1049</span></div>
                    </th>
                    <td class="p-0 bg-transparent">
                      <div class="py-5 px-6" style="height: 64px;">
                        <div><img class="img-fluid" style="width: 32px;" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-2 fs-9 fw-medium text-light">John Doe</span></div>
                      </div>
                    </td>
                    <td class="p-0 bg-transparent">
                      <div class="py-6 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">July 06, 2022</span></div>
                    </td>
                    <td class="p-0 bg-transparent">
                      <div class="py-6 px-6" style="height: 64px;">
                        <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="3" cy="3" r="3" fill="#ED4F4F"></circle>
                        </svg><span class="ms-1 fs-9 fw-medium text-light">Refunded</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th class="p-0 bg-transparent" scope="row">
                      <div class="rounded-start-4 py-5 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">CDD1049</span></div>
                    </th>
                    <td class="p-0 bg-transparent">
                      <div class="py-4 px-6 bg-dark-light" style="height: 64px;">
                        <div><img class="img-fluid" style="width: 32px;" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-2 fs-9 fw-medium text-light">John Doe</span></div>
                      </div>
                    </td>
                    <td class="p-0 bg-transparent">
                      <div class="py-5 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">July 06, 2022</span></div>
                    </td>
                    <td class="p-0 bg-transparent">
                      <div class="rounded-end-4 py-5 px-6 bg-dark-light" style="height: 64px;">
                        <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="3" cy="3" r="3" fill="#24D164"></circle>
                        </svg><span class="ms-1 fs-9 fw-medium text-light">Delivered</span>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #206

Bootstrap

Trizzle

<section class="py-8">
  <div class="container">
    <div class="position-relative p-6 bg-secondary rounded-4">
      <div class="d-flex mb-6 align-items-center justify-content-between">
        <div>
          <h6 class="fs-5 fw-semibold text-white mb-2">Discover our tools</h6>
          <p class="fs-10 fw-medium text-secondary-light mb-0">Your subtitle text about discovering tools</p>
        </div><a class="btn btn-sm btn-dark-light text-secondary-light fs-9" href="#">See all</a>
      </div><a class="btn btn-dark-light border-0 text-start text-secondary-light d-flex align-items-center justify-content-between py-3 ps-4 pe-6 rounded-3" href="#">
        <div class="d-flex align-items-start mw-sm">
          <div class="flex-shrink-0 d-flex align-items-center justify-content-center rounded-3 bg-secondary" style="width: 40px; height: 40px;">
            <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 16.9999C12.2652 16.9999 12.5196 16.8945 12.7071 16.707C12.8946 16.5195 13 16.2651 13 15.9999V13.9999C13 13.7347 12.8946 13.4803 12.7071 13.2928C12.5196 13.1053 12.2652 12.9999 12 12.9999C11.7348 12.9999 11.4804 13.1053 11.2929 13.2928C11.1054 13.4803 11 13.7347 11 13.9999V15.9999C11 16.2651 11.1054 16.5195 11.2929 16.707C11.4804 16.8945 11.7348 16.9999 12 16.9999ZM8.00001 16.9999C8.26522 16.9999 8.51958 16.8945 8.70711 16.707C8.89465 16.5195 9.00001 16.2651 9.00001 15.9999V13.9999C9.00001 13.7347 8.89465 13.4803 8.70711 13.2928C8.51958 13.1053 8.26522 12.9999 8.00001 12.9999C7.73479 12.9999 7.48044 13.1053 7.2929 13.2928C7.10536 13.4803 7.00001 13.7347 7.00001 13.9999V15.9999C7.00001 16.2651 7.10536 16.5195 7.2929 16.707C7.48044 16.8945 7.73479 16.9999 8.00001 16.9999ZM17 4.99991H15.62L13.89 1.5499C13.8371 1.42296 13.7587 1.30828 13.6595 1.21303C13.5603 1.11779 13.4425 1.04402 13.3135 0.996347C13.1846 0.948672 13.0471 0.928113 12.9098 0.935953C12.7725 0.943793 12.6383 0.979865 12.5156 1.04191C12.3929 1.10396 12.2843 1.19065 12.1966 1.29657C12.1089 1.40249 12.044 1.52536 12.0059 1.6575C11.9679 1.78964 11.9575 1.92821 11.9754 2.06455C11.9933 2.20089 12.0391 2.33208 12.11 2.44991L13.38 4.99991H6.62001L7.89001 2.44991C7.98707 2.21681 7.99237 1.95563 7.90483 1.71879C7.81729 1.48196 7.6434 1.287 7.41807 1.17307C7.19274 1.05914 6.93265 1.03467 6.69002 1.10456C6.44739 1.17446 6.24019 1.33356 6.11001 1.5499L4.38001 4.99991H3.00001C2.2932 5.01066 1.61288 5.27065 1.07906 5.73404C0.545229 6.19742 0.19218 6.83443 0.0821768 7.53271C-0.0278264 8.23099 0.112282 8.94569 0.477792 9.55075C0.843302 10.1558 1.41073 10.6124 2.08001 10.8399L2.82001 18.2999C2.89463 19.0425 3.24335 19.7306 3.79808 20.2298C4.35281 20.7291 5.07371 21.0036 5.82001 20.9999H14.2C14.9463 21.0036 15.6672 20.7291 16.2219 20.2298C16.7767 19.7306 17.1254 19.0425 17.2 18.2999L17.94 10.8399C18.6107 10.6117 19.1791 10.1535 19.5443 9.54639C19.9096 8.9393 20.0482 8.22254 19.9356 7.52305C19.823 6.82356 19.4665 6.18649 18.9292 5.72468C18.3919 5.26287 17.7085 5.00612 17 4.99991ZM15.19 18.0999C15.1651 18.3474 15.0489 18.5768 14.864 18.7432C14.6791 18.9096 14.4388 19.0012 14.19 18.9999H5.81001C5.56124 19.0012 5.32094 18.9096 5.13603 18.7432C4.95112 18.5768 4.83488 18.3474 4.81001 18.0999L4.10001 10.9999H15.9L15.19 18.0999ZM17 8.9999H3.00001C2.73479 8.9999 2.48044 8.89455 2.2929 8.70701C2.10536 8.51948 2.00001 8.26512 2.00001 7.99991C2.00001 7.73469 2.10536 7.48033 2.2929 7.2928C2.48044 7.10526 2.73479 6.99991 3.00001 6.99991H17C17.2652 6.99991 17.5196 7.10526 17.7071 7.2928C17.8946 7.48033 18 7.73469 18 7.99991C18 8.26512 17.8946 8.51948 17.7071 8.70701C17.5196 8.89455 17.2652 8.9999 17 8.9999Z" fill="#194BFB"></path>
            </svg>
          </div>
          <div class="ms-3"><span class="d-block lh-sm mb-1 fs-9 fw-medium text-light">Create events in your calendar</span><span class="d-block lh-lg fs-10 fw-medium text-secondary-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec quam et nibh sodales molestie.</span></div>
        </div>
        <div><span>
            <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.83 5.28995L2.59 1.04995C2.49704 0.95622 2.38644 0.881826 2.26458 0.831057C2.14272 0.780288 2.01202 0.75415 1.88 0.75415C1.74799 0.75415 1.61729 0.780288 1.49543 0.831057C1.37357 0.881826 1.26297 0.95622 1.17 1.04995C0.983753 1.23731 0.879211 1.49076 0.879211 1.75495C0.879211 2.01913 0.983753 2.27259 1.17 2.45995L4.71 5.99995L1.17 9.53995C0.983753 9.72731 0.879211 9.98076 0.879211 10.2449C0.879211 10.5091 0.983753 10.7626 1.17 10.9499C1.26344 11.0426 1.37426 11.116 1.4961 11.1657C1.61794 11.2155 1.7484 11.2407 1.88 11.2399C2.01161 11.2407 2.14207 11.2155 2.26391 11.1657C2.38575 11.116 2.49656 11.0426 2.59 10.9499L6.83 6.70995C6.92373 6.61699 6.99813 6.50638 7.04889 6.38453C7.09966 6.26267 7.1258 6.13196 7.1258 5.99995C7.1258 5.86794 7.09966 5.73723 7.04889 5.61537C6.99813 5.49351 6.92373 5.38291 6.83 5.28995Z" fill="currentColor"></path>
            </svg></span></div></a><a class="btn bg-transparent border-0 text-start text-secondary-light d-flex align-items-center justify-content-between py-3 ps-4 pe-6 rounded-3" href="#">
        <div class="d-flex align-items-start mw-sm">
          <div class="flex-shrink-0 d-flex align-items-center justify-content-center rounded-3 bg-dark-light" style="width: 40px; height: 40px;">
            <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 18C10.1978 18 10.3911 17.9414 10.5556 17.8315C10.72 17.7216 10.8482 17.5654 10.9239 17.3827C10.9996 17.2 11.0194 16.9989 10.9808 16.8049C10.9422 16.6109 10.847 16.4327 10.7071 16.2929C10.5673 16.153 10.3891 16.0578 10.1951 16.0192C10.0011 15.9806 9.80004 16.0004 9.61732 16.0761C9.43459 16.1518 9.27841 16.28 9.16853 16.4444C9.05865 16.6089 9 16.8022 9 17C9 17.2652 9.10536 17.5196 9.29289 17.7071C9.48043 17.8946 9.73478 18 10 18ZM15 18C15.1978 18 15.3911 17.9414 15.5556 17.8315C15.72 17.7216 15.8482 17.5654 15.9239 17.3827C15.9996 17.2 16.0194 16.9989 15.9808 16.8049C15.9422 16.6109 15.847 16.4327 15.7071 16.2929C15.5673 16.153 15.3891 16.0578 15.1951 16.0192C15.0011 15.9806 14.8 16.0004 14.6173 16.0761C14.4346 16.1518 14.2784 16.28 14.1685 16.4444C14.0586 16.6089 14 16.8022 14 17C14 17.2652 14.1054 17.5196 14.2929 17.7071C14.4804 17.8946 14.7348 18 15 18ZM15 14C15.1978 14 15.3911 13.9414 15.5556 13.8315C15.72 13.7216 15.8482 13.5654 15.9239 13.3827C15.9996 13.2 16.0194 12.9989 15.9808 12.8049C15.9422 12.6109 15.847 12.4327 15.7071 12.2929C15.5673 12.153 15.3891 12.0578 15.1951 12.0192C15.0011 11.9806 14.8 12.0004 14.6173 12.0761C14.4346 12.1518 14.2784 12.28 14.1685 12.4444C14.0586 12.6089 14 12.8022 14 13C14 13.2652 14.1054 13.5196 14.2929 13.7071C14.4804 13.8946 14.7348 14 15 14ZM10 14C10.1978 14 10.3911 13.9414 10.5556 13.8315C10.72 13.7216 10.8482 13.5654 10.9239 13.3827C10.9996 13.2 11.0194 12.9989 10.9808 12.8049C10.9422 12.6109 10.847 12.4327 10.7071 12.2929C10.5673 12.153 10.3891 12.0578 10.1951 12.0192C10.0011 11.9806 9.80004 12.0004 9.61732 12.0761C9.43459 12.1518 9.27841 12.28 9.16853 12.4444C9.05865 12.6089 9 12.8022 9 13C9 13.2652 9.10536 13.5196 9.29289 13.7071C9.48043 13.8946 9.73478 14 10 14ZM17 2H16V1C16 0.734784 15.8946 0.48043 15.7071 0.292893C15.5196 0.105357 15.2652 0 15 0C14.7348 0 14.4804 0.105357 14.2929 0.292893C14.1054 0.48043 14 0.734784 14 1V2H6V1C6 0.734784 5.89464 0.48043 5.70711 0.292893C5.51957 0.105357 5.26522 0 5 0C4.73478 0 4.48043 0.105357 4.29289 0.292893C4.10536 0.48043 4 0.734784 4 1V2H3C2.20435 2 1.44129 2.31607 0.87868 2.87868C0.316071 3.44129 0 4.20435 0 5V19C0 19.7956 0.316071 20.5587 0.87868 21.1213C1.44129 21.6839 2.20435 22 3 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V5C20 4.20435 19.6839 3.44129 19.1213 2.87868C18.5587 2.31607 17.7956 2 17 2ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H3C2.73478 20 2.48043 19.8946 2.29289 19.7071C2.10536 19.5196 2 19.2652 2 19V10H18V19ZM18 8H2V5C2 4.73478 2.10536 4.48043 2.29289 4.29289C2.48043 4.10536 2.73478 4 3 4H4V5C4 5.26522 4.10536 5.51957 4.29289 5.70711C4.48043 5.89464 4.73478 6 5 6C5.26522 6 5.51957 5.89464 5.70711 5.70711C5.89464 5.51957 6 5.26522 6 5V4H14V5C14 5.26522 14.1054 5.51957 14.2929 5.70711C14.4804 5.89464 14.7348 6 15 6C15.2652 6 15.5196 5.89464 15.7071 5.70711C15.8946 5.51957 16 5.26522 16 5V4H17C17.2652 4 17.5196 4.10536 17.7071 4.29289C17.8946 4.48043 18 4.73478 18 5V8ZM5 14C5.19778 14 5.39112 13.9414 5.55557 13.8315C5.72002 13.7216 5.84819 13.5654 5.92388 13.3827C5.99957 13.2 6.01937 12.9989 5.98079 12.8049C5.9422 12.6109 5.84696 12.4327 5.70711 12.2929C5.56725 12.153 5.38907 12.0578 5.19509 12.0192C5.00111 11.9806 4.80004 12.0004 4.61732 12.0761C4.43459 12.1518 4.27841 12.28 4.16853 12.4444C4.05865 12.6089 4 12.8022 4 13C4 13.2652 4.10536 13.5196 4.29289 13.7071C4.48043 13.8946 4.73478 14 5 14ZM5 18C5.19778 18 5.39112 17.9414 5.55557 17.8315C5.72002 17.7216 5.84819 17.5654 5.92388 17.3827C5.99957 17.2 6.01937 16.9989 5.98079 16.8049C5.9422 16.6109 5.84696 16.4327 5.70711 16.2929C5.56725 16.153 5.38907 16.0578 5.19509 16.0192C5.00111 15.9806 4.80004 16.0004 4.61732 16.0761C4.43459 16.1518 4.27841 16.28 4.16853 16.4444C4.05865 16.6089 4 16.8022 4 17C4 17.2652 4.10536 17.5196 4.29289 17.7071C4.48043 17.8946 4.73478 18 5 18Z" fill="#194BFB"></path>
            </svg>
          </div>
          <div class="ms-3"><span class="d-block lh-sm mb-1 fs-9 fw-medium text-light">Create events in your calendar</span><span class="d-block lh-lg fs-10 fw-medium text-secondary-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec quam et nibh sodales molestie.</span></div>
        </div>
        <div><span>
            <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.83 5.28995L2.59 1.04995C2.49704 0.95622 2.38644 0.881826 2.26458 0.831057C2.14272 0.780288 2.01202 0.75415 1.88 0.75415C1.74799 0.75415 1.61729 0.780288 1.49543 0.831057C1.37357 0.881826 1.26297 0.95622 1.17 1.04995C0.983753 1.23731 0.879211 1.49076 0.879211 1.75495C0.879211 2.01913 0.983753 2.27259 1.17 2.45995L4.71 5.99995L1.17 9.53995C0.983753 9.72731 0.879211 9.98076 0.879211 10.2449C0.879211 10.5091 0.983753 10.7626 1.17 10.9499C1.26344 11.0426 1.37426 11.116 1.4961 11.1657C1.61794 11.2155 1.7484 11.2407 1.88 11.2399C2.01161 11.2407 2.14207 11.2155 2.26391 11.1657C2.38575 11.116 2.49656 11.0426 2.59 10.9499L6.83 6.70995C6.92373 6.61699 6.99813 6.50638 7.04889 6.38453C7.09966 6.26267 7.1258 6.13196 7.1258 5.99995C7.1258 5.86794 7.09966 5.73723 7.04889 5.61537C6.99813 5.49351 6.92373 5.38291 6.83 5.28995Z" fill="currentColor"></path>
            </svg></span></div></a><a class="btn btn-dark-light border-0 text-start text-secondary-light d-flex align-items-center justify-content-between py-3 ps-4 pe-6 rounded-3" href="#">
        <div class="d-flex align-items-start mw-sm">
          <div class="flex-shrink-0 d-flex align-items-center justify-content-center rounded-3 bg-secondary" style="width: 40px; height: 40px;">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 16H1C0.734784 16 0.48043 16.1054 0.292893 16.2929C0.105357 16.4804 0 16.7348 0 17C0 17.2652 0.105357 17.5196 0.292893 17.7071C0.48043 17.8946 0.734784 18 1 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 20H1C0.734784 20 0.48043 20.1054 0.292893 20.2929C0.105357 20.4804 0 20.7348 0 21C0 21.2652 0.105357 21.5196 0.292893 21.7071C0.48043 21.8946 0.734784 22 1 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21C22 20.7348 21.8946 20.4804 21.7071 20.2929C21.5196 20.1054 21.2652 20 21 20ZM5 6C4.80222 6 4.60888 6.05865 4.44443 6.16853C4.27998 6.27841 4.15181 6.43459 4.07612 6.61732C4.00043 6.80004 3.98063 7.00111 4.01921 7.19509C4.0578 7.38907 4.15304 7.56725 4.29289 7.70711C4.43275 7.84696 4.61093 7.9422 4.80491 7.98079C4.99889 8.01937 5.19996 7.99957 5.38268 7.92388C5.56541 7.84819 5.72159 7.72002 5.83147 7.55557C5.94135 7.39112 6 7.19778 6 7C6 6.73478 5.89464 6.48043 5.70711 6.29289C5.51957 6.10536 5.26522 6 5 6ZM19 0H3C2.20435 0 1.44129 0.31607 0.87868 0.87868C0.31607 1.44129 0 2.20435 0 3V11C0 11.7956 0.31607 12.5587 0.87868 13.1213C1.44129 13.6839 2.20435 14 3 14H19C19.7956 14 20.5587 13.6839 21.1213 13.1213C21.6839 12.5587 22 11.7956 22 11V3C22 2.20435 21.6839 1.44129 21.1213 0.87868C20.5587 0.31607 19.7956 0 19 0ZM20 11C20 11.2652 19.8946 11.5196 19.7071 11.7071C19.5196 11.8946 19.2652 12 19 12H3C2.73478 12 2.48043 11.8946 2.29289 11.7071C2.10536 11.5196 2 11.2652 2 11V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V11ZM11 4C10.4067 4 9.82664 4.17595 9.33329 4.50559C8.83994 4.83524 8.45542 5.30377 8.22836 5.85195C8.0013 6.40013 7.94189 7.00333 8.05764 7.58527C8.1734 8.16721 8.45912 8.70176 8.87868 9.12132C9.29824 9.54088 9.83279 9.8266 10.4147 9.94236C10.9967 10.0581 11.5999 9.9987 12.1481 9.77164C12.6962 9.54458 13.1648 9.16006 13.4944 8.66671C13.8241 8.17336 14 7.59334 14 7C14 6.20435 13.6839 5.44129 13.1213 4.87868C12.5587 4.31607 11.7956 4 11 4ZM11 8C10.8022 8 10.6089 7.94135 10.4444 7.83147C10.28 7.72159 10.1518 7.56541 10.0761 7.38268C10.0004 7.19996 9.98063 6.99889 10.0192 6.80491C10.0578 6.61093 10.153 6.43275 10.2929 6.29289C10.4327 6.15304 10.6109 6.0578 10.8049 6.01921C10.9989 5.98063 11.2 6.00043 11.3827 6.07612C11.5654 6.15181 11.7216 6.27998 11.8315 6.44443C11.9414 6.60888 12 6.80222 12 7C12 7.26522 11.8946 7.51957 11.7071 7.70711C11.5196 7.89464 11.2652 8 11 8ZM17 6C16.8022 6 16.6089 6.05865 16.4444 6.16853C16.28 6.27841 16.1518 6.43459 16.0761 6.61732C16.0004 6.80004 15.9806 7.00111 16.0192 7.19509C16.0578 7.38907 16.153 7.56725 16.2929 7.70711C16.4327 7.84696 16.6109 7.9422 16.8049 7.98079C16.9989 8.01937 17.2 7.99957 17.3827 7.92388C17.5654 7.84819 17.7216 7.72002 17.8315 7.55557C17.9414 7.39112 18 7.19778 18 7C18 6.73478 17.8946 6.48043 17.7071 6.29289C17.5196 6.10536 17.2652 6 17 6Z" fill="#194BFB"></path>
            </svg>
          </div>
          <div class="ms-3"><span class="d-block lh-sm mb-1 fs-9 fw-medium text-light">Create events in your calendar</span><span class="d-block lh-lg fs-10 fw-medium text-secondary-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec quam et nibh sodales molestie.</span></div>
        </div>
        <div><span>
            <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.83 5.28995L2.59 1.04995C2.49704 0.95622 2.38644 0.881826 2.26458 0.831057C2.14272 0.780288 2.01202 0.75415 1.88 0.75415C1.74799 0.75415 1.61729 0.780288 1.49543 0.831057C1.37357 0.881826 1.26297 0.95622 1.17 1.04995C0.983753 1.23731 0.879211 1.49076 0.879211 1.75495C0.879211 2.01913 0.983753 2.27259 1.17 2.45995L4.71 5.99995L1.17 9.53995C0.983753 9.72731 0.879211 9.98076 0.879211 10.2449C0.879211 10.5091 0.983753 10.7626 1.17 10.9499C1.26344 11.0426 1.37426 11.116 1.4961 11.1657C1.61794 11.2155 1.7484 11.2407 1.88 11.2399C2.01161 11.2407 2.14207 11.2155 2.26391 11.1657C2.38575 11.116 2.49656 11.0426 2.59 10.9499L6.83 6.70995C6.92373 6.61699 6.99813 6.50638 7.04889 6.38453C7.09966 6.26267 7.1258 6.13196 7.1258 5.99995C7.1258 5.86794 7.09966 5.73723 7.04889 5.61537C6.99813 5.49351 6.92373 5.38291 6.83 5.28995Z" fill="currentColor"></path>
            </svg></span></div></a>
    </div>
  </div>
</section>

Bootstrap Component #207

Bootstrap

Trizzle

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark-light">
    <div class="container position-relative" type="button" aria-controls="nav01" aria-expanded="false"><a class="navbar-brand" href="#"><img class="img-fluid" src="trizzle-assets/logos/trizzle-logo.svg" alt=""></a>
      <div class="d-none d-sm-block position-relative me-auto">
        <button class="position-absolute top-50 start-0 ms-4 translate-middle-y btn p-0 border-0">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.4733 13.5267L11.9999 11.0733C12.96 9.87627 13.4249 8.35686 13.2991 6.82753C13.1733 5.2982 12.4664 3.87519 11.3236 2.85109C10.1808 1.827 8.68914 1.27967 7.15522 1.32164C5.62129 1.36362 4.16175 1.99171 3.0767 3.07676C1.99164 4.16181 1.36356 5.62136 1.32158 7.15528C1.27961 8.6892 1.82694 10.1809 2.85103 11.3237C3.87512 12.4664 5.29814 13.1734 6.82747 13.2992C8.3568 13.425 9.87621 12.9601 11.0733 12L13.5266 14.4533C13.5886 14.5158 13.6623 14.5654 13.7436 14.5993C13.8248 14.6331 13.9119 14.6505 13.9999 14.6505C14.0879 14.6505 14.1751 14.6331 14.2563 14.5993C14.3376 14.5654 14.4113 14.5158 14.4733 14.4533C14.5934 14.329 14.6606 14.1629 14.6606 13.99C14.6606 13.8171 14.5934 13.651 14.4733 13.5267ZM7.33327 12C6.41029 12 5.50804 11.7263 4.74061 11.2135C3.97318 10.7007 3.37504 9.97191 3.02183 9.11919C2.66862 8.26646 2.57621 7.32815 2.75627 6.42291C2.93634 5.51766 3.38079 4.68614 4.03344 4.0335C4.68608 3.38085 5.5176 2.9364 6.42285 2.75633C7.32809 2.57627 8.2664 2.66868 9.11913 3.02189C9.97185 3.3751 10.7007 3.97324 11.2135 4.74067C11.7262 5.5081 11.9999 6.41035 11.9999 7.33333C11.9999 8.57101 11.5083 9.75799 10.6331 10.6332C9.75793 11.5083 8.57095 12 7.33327 12Z" fill="#3D485B"></path>
          </svg>
        </button>
        <input class="ps-10 form-control fs-9 fw-medium bg-transparent" type="search" placeholder="Search...">
      </div>
      <div class="collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Overview</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Analytics</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" hre="" f="#">Products</a></li>
          <li class="nav-item"><a class="nav-link d-flex align-items-center" aria-current="page" href="#"><span>Orders</span>
              <div class="ms-2 d-flex align-items-center justify-content-center bg-primary rounded-pill text-white fs-10" style="width: 22px; height: 22px;">4</div></a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" hre="" f="#">Customers</a></li>
        </ul>
      </div>
      <div class="d-none d-xl-flex align-items-center ms-auto"><a class="btn border-0 p-0 me-6" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 13.18V10C17.9986 8.58312 17.4958 7.21247 16.5806 6.13077C15.6655 5.04908 14.3971 4.32615 13 4.09V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V4.09C9.60294 4.32615 8.33452 5.04908 7.41939 6.13077C6.50425 7.21247 6.00144 8.58312 6 10V13.18C5.41645 13.3863 4.911 13.7681 4.55294 14.2729C4.19488 14.7778 4.00174 15.3811 4 16V18C4 18.2652 4.10536 18.5196 4.29289 18.7071C4.48043 18.8946 4.73478 19 5 19H8.14C8.37028 19.8474 8.873 20.5954 9.5706 21.1287C10.2682 21.6621 11.1219 21.951 12 21.951C12.8781 21.951 13.7318 21.6621 14.4294 21.1287C15.127 20.5954 15.6297 19.8474 15.86 19H19C19.2652 19 19.5196 18.8946 19.7071 18.7071C19.8946 18.5196 20 18.2652 20 18V16C19.9983 15.3811 19.8051 14.7778 19.4471 14.2729C19.089 13.7681 18.5835 13.3863 18 13.18ZM8 10C8 8.93913 8.42143 7.92172 9.17157 7.17157C9.92172 6.42143 10.9391 6 12 6C13.0609 6 14.0783 6.42143 14.8284 7.17157C15.5786 7.92172 16 8.93913 16 10V13H8V10ZM12 20C11.651 19.9979 11.3086 19.9045 11.0068 19.7291C10.7051 19.5536 10.4545 19.3023 10.28 19H13.72C13.5455 19.3023 13.2949 19.5536 12.9932 19.7291C12.6914 19.9045 12.349 19.9979 12 20ZM18 17H6V16C6 15.7348 6.10536 15.4804 6.29289 15.2929C6.48043 15.1054 6.73478 15 7 15H17C17.2652 15 17.5196 15.1054 17.7071 15.2929C17.8946 15.4804 18 15.7348 18 16V17Z" fill="#3D485B"></path>
          </svg></a><a class="btn border-0 d-flex align-items-center p-0" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-4 fw-bold text-white">John Doe</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 6L8 10L12 6" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <button class="d-block d-xl-none navbar-burger navbar-toggler py-1 px-2 border-0 rounded-1">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark-light bg-opacity-25"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-8 pb-10 px-8 bg-dark-light overflow-auto">
      <div class="d-flex align-items-center justify-content-between mb-16"><a class="inline-flex items-center" href="#"><img class="img-fluid" src="trizzle-assets/logos/trizzle-logo.svg" alt=""></a><a class="navbar-close text-light" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">
            <path d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z" fill="currentColor"></path>
          </svg></a></div>
      <ul class="list-unstyled mb-10">
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Overview</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Analytics</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Products</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light d-flex align-items-center" aria-current="page" href="#"><span>Orders</span>
            <div class="ms-2 d-flex align-items-center justify-content-center bg-primary rounded-pill text-white fs-10" style="width: 22px; height: 22px;">4</div></a></li>
        <li><a class="btn p-0 btn-link text-light" href="#">Customers</a></li>
      </ul><a class="btn mt-auto border-0 d-flex align-items-center p-0" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-4 fw-bold text-white">John Doe</span>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M4 6L8 10L12 6" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a>
    </nav>
  </div>
</section>

Bootstrap Component #208

Bootstrap

Trizzle

<section class="py-8 bg-dark-light">
  <div class="container">
    <div class="pt-6 bg-secondary rounded-4">
      <div class="px-6 pb-6 border-bottom border-secondary-light border-opacity-25">
        <h6 class="fs-8 fw-semibold text-light mb-6">Users</h6>
        <div class="d-flex flex-column flex-sm-row gap-4 mb-6 mw-lg">
          <div class="position-relative">
            <input class="form-control text-light fs-9 bg-transparent" type="search" placeholder="All Roles"><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-light bg-secondary">Role</span>
          </div>
          <div class="position-relative w-100">
            <input class="form-control text-light ps-10 fs-9 bg-transparent" type="search" placeholder="Search products...">
            <button class="position-absolute top-50 start-0 ms-4 translate-middle-y btn btn-outline-secondary-light p-0 border-0 bg-transparent">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.4733 13.5267L11.9999 11.0734C12.96 9.87633 13.4249 8.35692 13.2991 6.82759C13.1733 5.29826 12.4664 3.87525 11.3236 2.85115C10.1808 1.82706 8.68914 1.27973 7.15522 1.32171C5.62129 1.36368 4.16175 1.99177 3.0767 3.07682C1.99164 4.16187 1.36356 5.62142 1.32158 7.15534C1.27961 8.68926 1.82694 10.181 2.85103 11.3237C3.87512 12.4665 5.29814 13.1735 6.82747 13.2993C8.3568 13.4251 9.87621 12.9601 11.0733 12.0001L13.5266 14.4534C13.5886 14.5159 13.6623 14.5655 13.7436 14.5993C13.8248 14.6332 13.9119 14.6506 13.9999 14.6506C14.0879 14.6506 14.1751 14.6332 14.2563 14.5993C14.3376 14.5655 14.4113 14.5159 14.4733 14.4534C14.5934 14.3291 14.6606 14.163 14.6606 13.9901C14.6606 13.8172 14.5934 13.651 14.4733 13.5267ZM7.33327 12.0001C6.41029 12.0001 5.50804 11.7264 4.74061 11.2136C3.97318 10.7008 3.37504 9.97197 3.02183 9.11925C2.66862 8.26653 2.57621 7.32821 2.75627 6.42297C2.93634 5.51773 3.38079 4.6862 4.03344 4.03356C4.68608 3.38091 5.5176 2.93646 6.42285 2.75639C7.32809 2.57633 8.2664 2.66874 9.11913 3.02195C9.97185 3.37516 10.7007 3.9733 11.2135 4.74073C11.7262 5.50816 11.9999 6.41041 11.9999 7.33339C11.9999 8.57107 11.5083 9.75805 10.6331 10.6332C9.75793 11.5084 8.57095 12.0001 7.33327 12.0001Z" fill="currentColor"></path>
              </svg>
            </button>
          </div>
        </div>
        <div class="w-100 overflow-scroll">
          <table class="table table-borderless w-100" style="min-width: max-content;">
            <thead>
              <tr><th class="p-0 bg-dark-light rounded-start-4" scope="col">
                <div class="rounded-start-4 d-flex align-items-center py-3 px-6">
                  <div class="form-check me-4">
                    <input class="form-check-input bg-transparent border-secondary" id="flexCheckDefault" type="checkbox" value="">
                  </div><span class="fs-10 fw-semibold text-secondary-light">NAME</span>
                </div>
              </th>
              <th class="p-0 bg-dark-light" scope="col">
                <div class="py-3 px-6"><span class="fs-10 fw-semibold text-secondary-light">COMPANY</span></div>
              </th>
              <th class="p-0 bg-dark-light" scope="col">
                <div class="py-3 px-6"><span class="fs-10 fw-semibold text-secondary-light">ROLE</span></div>
              </th>
              <th class="p-0 bg-dark-light" scope="col">
                <div class="py-3 px-6"><span class="fs-10 fw-semibold text-secondary-light">STATUS</span></div>
              </th>
              <th class="p-0 bg-dark-light rounded-end-4" scope="col">
                <div class="py-6 px-6"></div>
              </th>
            </tr></thead>
            <tbody>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="d-flex py-4 px-6 align-items-center" style="height: 64px;">
                    <div class="form-check me-4">
                      <input class="form-check-input bg-transparent border-light-dark" id="flexCheckDefault" type="checkbox" value="">
                    </div><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/avatar-men-2.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">John Doe</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-dark-light rounded-pill"><span class="fs-10 fw-medium text-secondary-light">Explicitway</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">Front-end Developer</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="d-inline-block px-2 rounded-pill bg-success-dark bg-opacity-50 text-success lh-lg fs-10 fw-medium">ACTIVE</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center justify-content-end py-4 px-6" style="height: 64px;"><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.0002 8.50012C13.8234 8.50012 13.6538 8.57036 13.5288 8.69538C13.4037 8.82041 13.3335 8.98998 13.3335 9.16679V13.1668C13.3335 13.3436 13.2633 13.5132 13.1382 13.6382C13.0132 13.7632 12.8436 13.8335 12.6668 13.8335H3.3335C3.15669 13.8335 2.98712 13.7632 2.86209 13.6382C2.73707 13.5132 2.66683 13.3436 2.66683 13.1668V3.83346C2.66683 3.65664 2.73707 3.48708 2.86209 3.36205C2.98712 3.23703 3.15669 3.16679 3.3335 3.16679H7.3335C7.51031 3.16679 7.67988 3.09655 7.8049 2.97153C7.92992 2.8465 8.00016 2.67693 8.00016 2.50012C8.00016 2.32331 7.92992 2.15374 7.8049 2.02872C7.67988 1.90369 7.51031 1.83346 7.3335 1.83346H3.3335C2.80306 1.83346 2.29436 2.04417 1.91928 2.41924C1.54421 2.79431 1.3335 3.30302 1.3335 3.83346V13.1668C1.3335 13.6972 1.54421 14.2059 1.91928 14.581C2.29436 14.9561 2.80306 15.1668 3.3335 15.1668H12.6668C13.1973 15.1668 13.706 14.9561 14.081 14.581C14.4561 14.2059 14.6668 13.6972 14.6668 13.1668V9.16679C14.6668 8.98998 14.5966 8.82041 14.4716 8.69538C14.3465 8.57036 14.177 8.50012 14.0002 8.50012ZM4.00016 9.00679V11.8335C4.00016 12.0103 4.0704 12.1798 4.19543 12.3049C4.32045 12.4299 4.49002 12.5001 4.66683 12.5001H7.4935C7.58123 12.5006 7.66821 12.4838 7.74943 12.4506C7.83066 12.4175 7.90454 12.3686 7.96683 12.3068L12.5802 7.68679L14.4735 5.83346C14.536 5.77148 14.5856 5.69775 14.6194 5.61651C14.6533 5.53527 14.6707 5.44813 14.6707 5.36012C14.6707 5.27211 14.6533 5.18498 14.6194 5.10374C14.5856 5.0225 14.536 4.94876 14.4735 4.88679L11.6468 2.02679C11.5849 1.9643 11.5111 1.91471 11.4299 1.88086C11.3486 1.84702 11.2615 1.82959 11.1735 1.82959C11.0855 1.82959 10.9984 1.84702 10.9171 1.88086C10.8359 1.91471 10.7621 1.9643 10.7002 2.02679L8.82016 3.91346L4.1935 8.53346C4.13171 8.59575 4.08283 8.66963 4.04965 8.75085C4.01647 8.83208 3.99966 8.91905 4.00016 9.00679ZM11.1735 3.44012L13.0602 5.32679L12.1135 6.27346L10.2268 4.38679L11.1735 3.44012ZM5.3335 9.28012L9.28683 5.32679L11.1735 7.21346L7.22016 11.1668H5.3335V9.28012Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Edit</span></a><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.3333 4.49992H10.6667V3.83325C10.6667 3.30282 10.456 2.79411 10.0809 2.41904C9.70581 2.04397 9.1971 1.83325 8.66667 1.83325H7.33333C6.8029 1.83325 6.29419 2.04397 5.91912 2.41904C5.54405 2.79411 5.33333 3.30282 5.33333 3.83325V4.49992H2.66667C2.48986 4.49992 2.32029 4.57016 2.19526 4.69518C2.07024 4.8202 2 4.98977 2 5.16658C2 5.3434 2.07024 5.51297 2.19526 5.63799C2.32029 5.76301 2.48986 5.83325 2.66667 5.83325H3.33333V13.1666C3.33333 13.697 3.54405 14.2057 3.91912 14.5808C4.29419 14.9559 4.8029 15.1666 5.33333 15.1666H10.6667C11.1971 15.1666 11.7058 14.9559 12.0809 14.5808C12.456 14.2057 12.6667 13.697 12.6667 13.1666V5.83325H13.3333C13.5101 5.83325 13.6797 5.76301 13.8047 5.63799C13.9298 5.51297 14 5.3434 14 5.16658C14 4.98977 13.9298 4.8202 13.8047 4.69518C13.6797 4.57016 13.5101 4.49992 13.3333 4.49992ZM6.66667 3.83325C6.66667 3.65644 6.7369 3.48687 6.86193 3.36185C6.98695 3.23682 7.15652 3.16659 7.33333 3.16659H8.66667C8.84348 3.16659 9.01305 3.23682 9.13807 3.36185C9.2631 3.48687 9.33333 3.65644 9.33333 3.83325V4.49992H6.66667V3.83325ZM11.3333 13.1666C11.3333 13.3434 11.2631 13.513 11.1381 13.638C11.013 13.763 10.8435 13.8333 10.6667 13.8333H5.33333C5.15652 13.8333 4.98695 13.763 4.86193 13.638C4.7369 13.513 4.66667 13.3434 4.66667 13.1666V5.83325H11.3333V13.1666Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Delete</span></a></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="d-flex py-4 px-6 align-items-center" style="height: 64px;">
                    <div class="form-check me-4">
                      <input class="form-check-input bg-transparent border-light-dark" id="flexCheckDefault" type="checkbox" value="">
                    </div><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/avatar-men-2.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">John Doe</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-dark-light rounded-pill"><span class="fs-10 fw-medium text-secondary-light">Explicitway</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">Front-end Developer</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="d-inline-block px-2 rounded-pill bg-success-dark bg-opacity-50 text-success lh-lg fs-10 fw-medium">ACTIVE</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center justify-content-end py-4 px-6" style="height: 64px;"><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.0002 8.50012C13.8234 8.50012 13.6538 8.57036 13.5288 8.69538C13.4037 8.82041 13.3335 8.98998 13.3335 9.16679V13.1668C13.3335 13.3436 13.2633 13.5132 13.1382 13.6382C13.0132 13.7632 12.8436 13.8335 12.6668 13.8335H3.3335C3.15669 13.8335 2.98712 13.7632 2.86209 13.6382C2.73707 13.5132 2.66683 13.3436 2.66683 13.1668V3.83346C2.66683 3.65664 2.73707 3.48708 2.86209 3.36205C2.98712 3.23703 3.15669 3.16679 3.3335 3.16679H7.3335C7.51031 3.16679 7.67988 3.09655 7.8049 2.97153C7.92992 2.8465 8.00016 2.67693 8.00016 2.50012C8.00016 2.32331 7.92992 2.15374 7.8049 2.02872C7.67988 1.90369 7.51031 1.83346 7.3335 1.83346H3.3335C2.80306 1.83346 2.29436 2.04417 1.91928 2.41924C1.54421 2.79431 1.3335 3.30302 1.3335 3.83346V13.1668C1.3335 13.6972 1.54421 14.2059 1.91928 14.581C2.29436 14.9561 2.80306 15.1668 3.3335 15.1668H12.6668C13.1973 15.1668 13.706 14.9561 14.081 14.581C14.4561 14.2059 14.6668 13.6972 14.6668 13.1668V9.16679C14.6668 8.98998 14.5966 8.82041 14.4716 8.69538C14.3465 8.57036 14.177 8.50012 14.0002 8.50012ZM4.00016 9.00679V11.8335C4.00016 12.0103 4.0704 12.1798 4.19543 12.3049C4.32045 12.4299 4.49002 12.5001 4.66683 12.5001H7.4935C7.58123 12.5006 7.66821 12.4838 7.74943 12.4506C7.83066 12.4175 7.90454 12.3686 7.96683 12.3068L12.5802 7.68679L14.4735 5.83346C14.536 5.77148 14.5856 5.69775 14.6194 5.61651C14.6533 5.53527 14.6707 5.44813 14.6707 5.36012C14.6707 5.27211 14.6533 5.18498 14.6194 5.10374C14.5856 5.0225 14.536 4.94876 14.4735 4.88679L11.6468 2.02679C11.5849 1.9643 11.5111 1.91471 11.4299 1.88086C11.3486 1.84702 11.2615 1.82959 11.1735 1.82959C11.0855 1.82959 10.9984 1.84702 10.9171 1.88086C10.8359 1.91471 10.7621 1.9643 10.7002 2.02679L8.82016 3.91346L4.1935 8.53346C4.13171 8.59575 4.08283 8.66963 4.04965 8.75085C4.01647 8.83208 3.99966 8.91905 4.00016 9.00679ZM11.1735 3.44012L13.0602 5.32679L12.1135 6.27346L10.2268 4.38679L11.1735 3.44012ZM5.3335 9.28012L9.28683 5.32679L11.1735 7.21346L7.22016 11.1668H5.3335V9.28012Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Edit</span></a><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.3333 4.49992H10.6667V3.83325C10.6667 3.30282 10.456 2.79411 10.0809 2.41904C9.70581 2.04397 9.1971 1.83325 8.66667 1.83325H7.33333C6.8029 1.83325 6.29419 2.04397 5.91912 2.41904C5.54405 2.79411 5.33333 3.30282 5.33333 3.83325V4.49992H2.66667C2.48986 4.49992 2.32029 4.57016 2.19526 4.69518C2.07024 4.8202 2 4.98977 2 5.16658C2 5.3434 2.07024 5.51297 2.19526 5.63799C2.32029 5.76301 2.48986 5.83325 2.66667 5.83325H3.33333V13.1666C3.33333 13.697 3.54405 14.2057 3.91912 14.5808C4.29419 14.9559 4.8029 15.1666 5.33333 15.1666H10.6667C11.1971 15.1666 11.7058 14.9559 12.0809 14.5808C12.456 14.2057 12.6667 13.697 12.6667 13.1666V5.83325H13.3333C13.5101 5.83325 13.6797 5.76301 13.8047 5.63799C13.9298 5.51297 14 5.3434 14 5.16658C14 4.98977 13.9298 4.8202 13.8047 4.69518C13.6797 4.57016 13.5101 4.49992 13.3333 4.49992ZM6.66667 3.83325C6.66667 3.65644 6.7369 3.48687 6.86193 3.36185C6.98695 3.23682 7.15652 3.16659 7.33333 3.16659H8.66667C8.84348 3.16659 9.01305 3.23682 9.13807 3.36185C9.2631 3.48687 9.33333 3.65644 9.33333 3.83325V4.49992H6.66667V3.83325ZM11.3333 13.1666C11.3333 13.3434 11.2631 13.513 11.1381 13.638C11.013 13.763 10.8435 13.8333 10.6667 13.8333H5.33333C5.15652 13.8333 4.98695 13.763 4.86193 13.638C4.7369 13.513 4.66667 13.3434 4.66667 13.1666V5.83325H11.3333V13.1666Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Delete</span></a></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="d-flex py-4 px-6 align-items-center" style="height: 64px;">
                    <div class="form-check me-4">
                      <input class="form-check-input bg-transparent border-light-dark" id="flexCheckDefault" type="checkbox" value="">
                    </div><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/avatar-men-2.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">John Doe</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-dark-light rounded-pill"><span class="fs-10 fw-medium text-secondary-light">Explicitway</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">Front-end Developer</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="d-inline-block px-2 rounded-pill bg-success-dark bg-opacity-50 text-success lh-lg fs-10 fw-medium">ACTIVE</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center justify-content-end py-4 px-6" style="height: 64px;"><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.0002 8.50012C13.8234 8.50012 13.6538 8.57036 13.5288 8.69538C13.4037 8.82041 13.3335 8.98998 13.3335 9.16679V13.1668C13.3335 13.3436 13.2633 13.5132 13.1382 13.6382C13.0132 13.7632 12.8436 13.8335 12.6668 13.8335H3.3335C3.15669 13.8335 2.98712 13.7632 2.86209 13.6382C2.73707 13.5132 2.66683 13.3436 2.66683 13.1668V3.83346C2.66683 3.65664 2.73707 3.48708 2.86209 3.36205C2.98712 3.23703 3.15669 3.16679 3.3335 3.16679H7.3335C7.51031 3.16679 7.67988 3.09655 7.8049 2.97153C7.92992 2.8465 8.00016 2.67693 8.00016 2.50012C8.00016 2.32331 7.92992 2.15374 7.8049 2.02872C7.67988 1.90369 7.51031 1.83346 7.3335 1.83346H3.3335C2.80306 1.83346 2.29436 2.04417 1.91928 2.41924C1.54421 2.79431 1.3335 3.30302 1.3335 3.83346V13.1668C1.3335 13.6972 1.54421 14.2059 1.91928 14.581C2.29436 14.9561 2.80306 15.1668 3.3335 15.1668H12.6668C13.1973 15.1668 13.706 14.9561 14.081 14.581C14.4561 14.2059 14.6668 13.6972 14.6668 13.1668V9.16679C14.6668 8.98998 14.5966 8.82041 14.4716 8.69538C14.3465 8.57036 14.177 8.50012 14.0002 8.50012ZM4.00016 9.00679V11.8335C4.00016 12.0103 4.0704 12.1798 4.19543 12.3049C4.32045 12.4299 4.49002 12.5001 4.66683 12.5001H7.4935C7.58123 12.5006 7.66821 12.4838 7.74943 12.4506C7.83066 12.4175 7.90454 12.3686 7.96683 12.3068L12.5802 7.68679L14.4735 5.83346C14.536 5.77148 14.5856 5.69775 14.6194 5.61651C14.6533 5.53527 14.6707 5.44813 14.6707 5.36012C14.6707 5.27211 14.6533 5.18498 14.6194 5.10374C14.5856 5.0225 14.536 4.94876 14.4735 4.88679L11.6468 2.02679C11.5849 1.9643 11.5111 1.91471 11.4299 1.88086C11.3486 1.84702 11.2615 1.82959 11.1735 1.82959C11.0855 1.82959 10.9984 1.84702 10.9171 1.88086C10.8359 1.91471 10.7621 1.9643 10.7002 2.02679L8.82016 3.91346L4.1935 8.53346C4.13171 8.59575 4.08283 8.66963 4.04965 8.75085C4.01647 8.83208 3.99966 8.91905 4.00016 9.00679ZM11.1735 3.44012L13.0602 5.32679L12.1135 6.27346L10.2268 4.38679L11.1735 3.44012ZM5.3335 9.28012L9.28683 5.32679L11.1735 7.21346L7.22016 11.1668H5.3335V9.28012Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Edit</span></a><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.3333 4.49992H10.6667V3.83325C10.6667 3.30282 10.456 2.79411 10.0809 2.41904C9.70581 2.04397 9.1971 1.83325 8.66667 1.83325H7.33333C6.8029 1.83325 6.29419 2.04397 5.91912 2.41904C5.54405 2.79411 5.33333 3.30282 5.33333 3.83325V4.49992H2.66667C2.48986 4.49992 2.32029 4.57016 2.19526 4.69518C2.07024 4.8202 2 4.98977 2 5.16658C2 5.3434 2.07024 5.51297 2.19526 5.63799C2.32029 5.76301 2.48986 5.83325 2.66667 5.83325H3.33333V13.1666C3.33333 13.697 3.54405 14.2057 3.91912 14.5808C4.29419 14.9559 4.8029 15.1666 5.33333 15.1666H10.6667C11.1971 15.1666 11.7058 14.9559 12.0809 14.5808C12.456 14.2057 12.6667 13.697 12.6667 13.1666V5.83325H13.3333C13.5101 5.83325 13.6797 5.76301 13.8047 5.63799C13.9298 5.51297 14 5.3434 14 5.16658C14 4.98977 13.9298 4.8202 13.8047 4.69518C13.6797 4.57016 13.5101 4.49992 13.3333 4.49992ZM6.66667 3.83325C6.66667 3.65644 6.7369 3.48687 6.86193 3.36185C6.98695 3.23682 7.15652 3.16659 7.33333 3.16659H8.66667C8.84348 3.16659 9.01305 3.23682 9.13807 3.36185C9.2631 3.48687 9.33333 3.65644 9.33333 3.83325V4.49992H6.66667V3.83325ZM11.3333 13.1666C11.3333 13.3434 11.2631 13.513 11.1381 13.638C11.013 13.763 10.8435 13.8333 10.6667 13.8333H5.33333C5.15652 13.8333 4.98695 13.763 4.86193 13.638C4.7369 13.513 4.66667 13.3434 4.66667 13.1666V5.83325H11.3333V13.1666Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Delete</span></a></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="d-flex py-4 px-6 align-items-center" style="height: 64px;">
                    <div class="form-check me-4">
                      <input class="form-check-input bg-transparent border-light-dark" id="flexCheckDefault" type="checkbox" value="">
                    </div><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/avatar-men-2.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">John Doe</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-dark-light rounded-pill"><span class="fs-10 fw-medium text-secondary-light">Explicitway</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">Front-end Developer</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="d-inline-block px-2 rounded-pill bg-success-dark bg-opacity-50 text-success lh-lg fs-10 fw-medium">ACTIVE</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center justify-content-end py-4 px-6" style="height: 64px;"><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.0002 8.50012C13.8234 8.50012 13.6538 8.57036 13.5288 8.69538C13.4037 8.82041 13.3335 8.98998 13.3335 9.16679V13.1668C13.3335 13.3436 13.2633 13.5132 13.1382 13.6382C13.0132 13.7632 12.8436 13.8335 12.6668 13.8335H3.3335C3.15669 13.8335 2.98712 13.7632 2.86209 13.6382C2.73707 13.5132 2.66683 13.3436 2.66683 13.1668V3.83346C2.66683 3.65664 2.73707 3.48708 2.86209 3.36205C2.98712 3.23703 3.15669 3.16679 3.3335 3.16679H7.3335C7.51031 3.16679 7.67988 3.09655 7.8049 2.97153C7.92992 2.8465 8.00016 2.67693 8.00016 2.50012C8.00016 2.32331 7.92992 2.15374 7.8049 2.02872C7.67988 1.90369 7.51031 1.83346 7.3335 1.83346H3.3335C2.80306 1.83346 2.29436 2.04417 1.91928 2.41924C1.54421 2.79431 1.3335 3.30302 1.3335 3.83346V13.1668C1.3335 13.6972 1.54421 14.2059 1.91928 14.581C2.29436 14.9561 2.80306 15.1668 3.3335 15.1668H12.6668C13.1973 15.1668 13.706 14.9561 14.081 14.581C14.4561 14.2059 14.6668 13.6972 14.6668 13.1668V9.16679C14.6668 8.98998 14.5966 8.82041 14.4716 8.69538C14.3465 8.57036 14.177 8.50012 14.0002 8.50012ZM4.00016 9.00679V11.8335C4.00016 12.0103 4.0704 12.1798 4.19543 12.3049C4.32045 12.4299 4.49002 12.5001 4.66683 12.5001H7.4935C7.58123 12.5006 7.66821 12.4838 7.74943 12.4506C7.83066 12.4175 7.90454 12.3686 7.96683 12.3068L12.5802 7.68679L14.4735 5.83346C14.536 5.77148 14.5856 5.69775 14.6194 5.61651C14.6533 5.53527 14.6707 5.44813 14.6707 5.36012C14.6707 5.27211 14.6533 5.18498 14.6194 5.10374C14.5856 5.0225 14.536 4.94876 14.4735 4.88679L11.6468 2.02679C11.5849 1.9643 11.5111 1.91471 11.4299 1.88086C11.3486 1.84702 11.2615 1.82959 11.1735 1.82959C11.0855 1.82959 10.9984 1.84702 10.9171 1.88086C10.8359 1.91471 10.7621 1.9643 10.7002 2.02679L8.82016 3.91346L4.1935 8.53346C4.13171 8.59575 4.08283 8.66963 4.04965 8.75085C4.01647 8.83208 3.99966 8.91905 4.00016 9.00679ZM11.1735 3.44012L13.0602 5.32679L12.1135 6.27346L10.2268 4.38679L11.1735 3.44012ZM5.3335 9.28012L9.28683 5.32679L11.1735 7.21346L7.22016 11.1668H5.3335V9.28012Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Edit</span></a><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.3333 4.49992H10.6667V3.83325C10.6667 3.30282 10.456 2.79411 10.0809 2.41904C9.70581 2.04397 9.1971 1.83325 8.66667 1.83325H7.33333C6.8029 1.83325 6.29419 2.04397 5.91912 2.41904C5.54405 2.79411 5.33333 3.30282 5.33333 3.83325V4.49992H2.66667C2.48986 4.49992 2.32029 4.57016 2.19526 4.69518C2.07024 4.8202 2 4.98977 2 5.16658C2 5.3434 2.07024 5.51297 2.19526 5.63799C2.32029 5.76301 2.48986 5.83325 2.66667 5.83325H3.33333V13.1666C3.33333 13.697 3.54405 14.2057 3.91912 14.5808C4.29419 14.9559 4.8029 15.1666 5.33333 15.1666H10.6667C11.1971 15.1666 11.7058 14.9559 12.0809 14.5808C12.456 14.2057 12.6667 13.697 12.6667 13.1666V5.83325H13.3333C13.5101 5.83325 13.6797 5.76301 13.8047 5.63799C13.9298 5.51297 14 5.3434 14 5.16658C14 4.98977 13.9298 4.8202 13.8047 4.69518C13.6797 4.57016 13.5101 4.49992 13.3333 4.49992ZM6.66667 3.83325C6.66667 3.65644 6.7369 3.48687 6.86193 3.36185C6.98695 3.23682 7.15652 3.16659 7.33333 3.16659H8.66667C8.84348 3.16659 9.01305 3.23682 9.13807 3.36185C9.2631 3.48687 9.33333 3.65644 9.33333 3.83325V4.49992H6.66667V3.83325ZM11.3333 13.1666C11.3333 13.3434 11.2631 13.513 11.1381 13.638C11.013 13.763 10.8435 13.8333 10.6667 13.8333H5.33333C5.15652 13.8333 4.98695 13.763 4.86193 13.638C4.7369 13.513 4.66667 13.3434 4.66667 13.1666V5.83325H11.3333V13.1666Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Delete</span></a></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="d-flex py-4 px-6 align-items-center" style="height: 64px;">
                    <div class="form-check me-4">
                      <input class="form-check-input bg-transparent border-light-dark" id="flexCheckDefault" type="checkbox" value="">
                    </div><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/avatar-men-2.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">John Doe</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-dark-light rounded-pill"><span class="fs-10 fw-medium text-secondary-light">Explicitway</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">Front-end Developer</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="d-inline-block px-2 rounded-pill bg-success-dark bg-opacity-50 text-success lh-lg fs-10 fw-medium">ACTIVE</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center justify-content-end py-4 px-6" style="height: 64px;"><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.0002 8.50012C13.8234 8.50012 13.6538 8.57036 13.5288 8.69538C13.4037 8.82041 13.3335 8.98998 13.3335 9.16679V13.1668C13.3335 13.3436 13.2633 13.5132 13.1382 13.6382C13.0132 13.7632 12.8436 13.8335 12.6668 13.8335H3.3335C3.15669 13.8335 2.98712 13.7632 2.86209 13.6382C2.73707 13.5132 2.66683 13.3436 2.66683 13.1668V3.83346C2.66683 3.65664 2.73707 3.48708 2.86209 3.36205C2.98712 3.23703 3.15669 3.16679 3.3335 3.16679H7.3335C7.51031 3.16679 7.67988 3.09655 7.8049 2.97153C7.92992 2.8465 8.00016 2.67693 8.00016 2.50012C8.00016 2.32331 7.92992 2.15374 7.8049 2.02872C7.67988 1.90369 7.51031 1.83346 7.3335 1.83346H3.3335C2.80306 1.83346 2.29436 2.04417 1.91928 2.41924C1.54421 2.79431 1.3335 3.30302 1.3335 3.83346V13.1668C1.3335 13.6972 1.54421 14.2059 1.91928 14.581C2.29436 14.9561 2.80306 15.1668 3.3335 15.1668H12.6668C13.1973 15.1668 13.706 14.9561 14.081 14.581C14.4561 14.2059 14.6668 13.6972 14.6668 13.1668V9.16679C14.6668 8.98998 14.5966 8.82041 14.4716 8.69538C14.3465 8.57036 14.177 8.50012 14.0002 8.50012ZM4.00016 9.00679V11.8335C4.00016 12.0103 4.0704 12.1798 4.19543 12.3049C4.32045 12.4299 4.49002 12.5001 4.66683 12.5001H7.4935C7.58123 12.5006 7.66821 12.4838 7.74943 12.4506C7.83066 12.4175 7.90454 12.3686 7.96683 12.3068L12.5802 7.68679L14.4735 5.83346C14.536 5.77148 14.5856 5.69775 14.6194 5.61651C14.6533 5.53527 14.6707 5.44813 14.6707 5.36012C14.6707 5.27211 14.6533 5.18498 14.6194 5.10374C14.5856 5.0225 14.536 4.94876 14.4735 4.88679L11.6468 2.02679C11.5849 1.9643 11.5111 1.91471 11.4299 1.88086C11.3486 1.84702 11.2615 1.82959 11.1735 1.82959C11.0855 1.82959 10.9984 1.84702 10.9171 1.88086C10.8359 1.91471 10.7621 1.9643 10.7002 2.02679L8.82016 3.91346L4.1935 8.53346C4.13171 8.59575 4.08283 8.66963 4.04965 8.75085C4.01647 8.83208 3.99966 8.91905 4.00016 9.00679ZM11.1735 3.44012L13.0602 5.32679L12.1135 6.27346L10.2268 4.38679L11.1735 3.44012ZM5.3335 9.28012L9.28683 5.32679L11.1735 7.21346L7.22016 11.1668H5.3335V9.28012Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Edit</span></a><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.3333 4.49992H10.6667V3.83325C10.6667 3.30282 10.456 2.79411 10.0809 2.41904C9.70581 2.04397 9.1971 1.83325 8.66667 1.83325H7.33333C6.8029 1.83325 6.29419 2.04397 5.91912 2.41904C5.54405 2.79411 5.33333 3.30282 5.33333 3.83325V4.49992H2.66667C2.48986 4.49992 2.32029 4.57016 2.19526 4.69518C2.07024 4.8202 2 4.98977 2 5.16658C2 5.3434 2.07024 5.51297 2.19526 5.63799C2.32029 5.76301 2.48986 5.83325 2.66667 5.83325H3.33333V13.1666C3.33333 13.697 3.54405 14.2057 3.91912 14.5808C4.29419 14.9559 4.8029 15.1666 5.33333 15.1666H10.6667C11.1971 15.1666 11.7058 14.9559 12.0809 14.5808C12.456 14.2057 12.6667 13.697 12.6667 13.1666V5.83325H13.3333C13.5101 5.83325 13.6797 5.76301 13.8047 5.63799C13.9298 5.51297 14 5.3434 14 5.16658C14 4.98977 13.9298 4.8202 13.8047 4.69518C13.6797 4.57016 13.5101 4.49992 13.3333 4.49992ZM6.66667 3.83325C6.66667 3.65644 6.7369 3.48687 6.86193 3.36185C6.98695 3.23682 7.15652 3.16659 7.33333 3.16659H8.66667C8.84348 3.16659 9.01305 3.23682 9.13807 3.36185C9.2631 3.48687 9.33333 3.65644 9.33333 3.83325V4.49992H6.66667V3.83325ZM11.3333 13.1666C11.3333 13.3434 11.2631 13.513 11.1381 13.638C11.013 13.763 10.8435 13.8333 10.6667 13.8333H5.33333C5.15652 13.8333 4.98695 13.763 4.86193 13.638C4.7369 13.513 4.66667 13.3434 4.66667 13.1666V5.83325H11.3333V13.1666Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Delete</span></a></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="d-flex py-4 px-6 align-items-center" style="height: 64px;">
                    <div class="form-check me-4">
                      <input class="form-check-input bg-transparent border-light-dark" id="flexCheckDefault" type="checkbox" value="">
                    </div><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/avatar-men-2.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">John Doe</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-dark-light rounded-pill"><span class="fs-10 fw-medium text-secondary-light">Explicitway</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">Front-end Developer</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="d-inline-block px-2 rounded-pill bg-success-dark bg-opacity-50 text-success lh-lg fs-10 fw-medium">ACTIVE</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center justify-content-end py-4 px-6" style="height: 64px;"><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.0002 8.50012C13.8234 8.50012 13.6538 8.57036 13.5288 8.69538C13.4037 8.82041 13.3335 8.98998 13.3335 9.16679V13.1668C13.3335 13.3436 13.2633 13.5132 13.1382 13.6382C13.0132 13.7632 12.8436 13.8335 12.6668 13.8335H3.3335C3.15669 13.8335 2.98712 13.7632 2.86209 13.6382C2.73707 13.5132 2.66683 13.3436 2.66683 13.1668V3.83346C2.66683 3.65664 2.73707 3.48708 2.86209 3.36205C2.98712 3.23703 3.15669 3.16679 3.3335 3.16679H7.3335C7.51031 3.16679 7.67988 3.09655 7.8049 2.97153C7.92992 2.8465 8.00016 2.67693 8.00016 2.50012C8.00016 2.32331 7.92992 2.15374 7.8049 2.02872C7.67988 1.90369 7.51031 1.83346 7.3335 1.83346H3.3335C2.80306 1.83346 2.29436 2.04417 1.91928 2.41924C1.54421 2.79431 1.3335 3.30302 1.3335 3.83346V13.1668C1.3335 13.6972 1.54421 14.2059 1.91928 14.581C2.29436 14.9561 2.80306 15.1668 3.3335 15.1668H12.6668C13.1973 15.1668 13.706 14.9561 14.081 14.581C14.4561 14.2059 14.6668 13.6972 14.6668 13.1668V9.16679C14.6668 8.98998 14.5966 8.82041 14.4716 8.69538C14.3465 8.57036 14.177 8.50012 14.0002 8.50012ZM4.00016 9.00679V11.8335C4.00016 12.0103 4.0704 12.1798 4.19543 12.3049C4.32045 12.4299 4.49002 12.5001 4.66683 12.5001H7.4935C7.58123 12.5006 7.66821 12.4838 7.74943 12.4506C7.83066 12.4175 7.90454 12.3686 7.96683 12.3068L12.5802 7.68679L14.4735 5.83346C14.536 5.77148 14.5856 5.69775 14.6194 5.61651C14.6533 5.53527 14.6707 5.44813 14.6707 5.36012C14.6707 5.27211 14.6533 5.18498 14.6194 5.10374C14.5856 5.0225 14.536 4.94876 14.4735 4.88679L11.6468 2.02679C11.5849 1.9643 11.5111 1.91471 11.4299 1.88086C11.3486 1.84702 11.2615 1.82959 11.1735 1.82959C11.0855 1.82959 10.9984 1.84702 10.9171 1.88086C10.8359 1.91471 10.7621 1.9643 10.7002 2.02679L8.82016 3.91346L4.1935 8.53346C4.13171 8.59575 4.08283 8.66963 4.04965 8.75085C4.01647 8.83208 3.99966 8.91905 4.00016 9.00679ZM11.1735 3.44012L13.0602 5.32679L12.1135 6.27346L10.2268 4.38679L11.1735 3.44012ZM5.3335 9.28012L9.28683 5.32679L11.1735 7.21346L7.22016 11.1668H5.3335V9.28012Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Edit</span></a><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.3333 4.49992H10.6667V3.83325C10.6667 3.30282 10.456 2.79411 10.0809 2.41904C9.70581 2.04397 9.1971 1.83325 8.66667 1.83325H7.33333C6.8029 1.83325 6.29419 2.04397 5.91912 2.41904C5.54405 2.79411 5.33333 3.30282 5.33333 3.83325V4.49992H2.66667C2.48986 4.49992 2.32029 4.57016 2.19526 4.69518C2.07024 4.8202 2 4.98977 2 5.16658C2 5.3434 2.07024 5.51297 2.19526 5.63799C2.32029 5.76301 2.48986 5.83325 2.66667 5.83325H3.33333V13.1666C3.33333 13.697 3.54405 14.2057 3.91912 14.5808C4.29419 14.9559 4.8029 15.1666 5.33333 15.1666H10.6667C11.1971 15.1666 11.7058 14.9559 12.0809 14.5808C12.456 14.2057 12.6667 13.697 12.6667 13.1666V5.83325H13.3333C13.5101 5.83325 13.6797 5.76301 13.8047 5.63799C13.9298 5.51297 14 5.3434 14 5.16658C14 4.98977 13.9298 4.8202 13.8047 4.69518C13.6797 4.57016 13.5101 4.49992 13.3333 4.49992ZM6.66667 3.83325C6.66667 3.65644 6.7369 3.48687 6.86193 3.36185C6.98695 3.23682 7.15652 3.16659 7.33333 3.16659H8.66667C8.84348 3.16659 9.01305 3.23682 9.13807 3.36185C9.2631 3.48687 9.33333 3.65644 9.33333 3.83325V4.49992H6.66667V3.83325ZM11.3333 13.1666C11.3333 13.3434 11.2631 13.513 11.1381 13.638C11.013 13.763 10.8435 13.8333 10.6667 13.8333H5.33333C5.15652 13.8333 4.98695 13.763 4.86193 13.638C4.7369 13.513 4.66667 13.3434 4.66667 13.1666V5.83325H11.3333V13.1666Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Delete</span></a></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="d-flex py-4 px-6 align-items-center" style="height: 64px;">
                    <div class="form-check me-4">
                      <input class="form-check-input bg-transparent border-light-dark" id="flexCheckDefault" type="checkbox" value="">
                    </div><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/avatar-men-2.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">John Doe</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-dark-light rounded-pill"><span class="fs-10 fw-medium text-secondary-light">Explicitway</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">Front-end Developer</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="d-inline-block px-2 rounded-pill bg-success-dark bg-opacity-50 text-success lh-lg fs-10 fw-medium">ACTIVE</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center justify-content-end py-4 px-6" style="height: 64px;"><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.0002 8.50012C13.8234 8.50012 13.6538 8.57036 13.5288 8.69538C13.4037 8.82041 13.3335 8.98998 13.3335 9.16679V13.1668C13.3335 13.3436 13.2633 13.5132 13.1382 13.6382C13.0132 13.7632 12.8436 13.8335 12.6668 13.8335H3.3335C3.15669 13.8335 2.98712 13.7632 2.86209 13.6382C2.73707 13.5132 2.66683 13.3436 2.66683 13.1668V3.83346C2.66683 3.65664 2.73707 3.48708 2.86209 3.36205C2.98712 3.23703 3.15669 3.16679 3.3335 3.16679H7.3335C7.51031 3.16679 7.67988 3.09655 7.8049 2.97153C7.92992 2.8465 8.00016 2.67693 8.00016 2.50012C8.00016 2.32331 7.92992 2.15374 7.8049 2.02872C7.67988 1.90369 7.51031 1.83346 7.3335 1.83346H3.3335C2.80306 1.83346 2.29436 2.04417 1.91928 2.41924C1.54421 2.79431 1.3335 3.30302 1.3335 3.83346V13.1668C1.3335 13.6972 1.54421 14.2059 1.91928 14.581C2.29436 14.9561 2.80306 15.1668 3.3335 15.1668H12.6668C13.1973 15.1668 13.706 14.9561 14.081 14.581C14.4561 14.2059 14.6668 13.6972 14.6668 13.1668V9.16679C14.6668 8.98998 14.5966 8.82041 14.4716 8.69538C14.3465 8.57036 14.177 8.50012 14.0002 8.50012ZM4.00016 9.00679V11.8335C4.00016 12.0103 4.0704 12.1798 4.19543 12.3049C4.32045 12.4299 4.49002 12.5001 4.66683 12.5001H7.4935C7.58123 12.5006 7.66821 12.4838 7.74943 12.4506C7.83066 12.4175 7.90454 12.3686 7.96683 12.3068L12.5802 7.68679L14.4735 5.83346C14.536 5.77148 14.5856 5.69775 14.6194 5.61651C14.6533 5.53527 14.6707 5.44813 14.6707 5.36012C14.6707 5.27211 14.6533 5.18498 14.6194 5.10374C14.5856 5.0225 14.536 4.94876 14.4735 4.88679L11.6468 2.02679C11.5849 1.9643 11.5111 1.91471 11.4299 1.88086C11.3486 1.84702 11.2615 1.82959 11.1735 1.82959C11.0855 1.82959 10.9984 1.84702 10.9171 1.88086C10.8359 1.91471 10.7621 1.9643 10.7002 2.02679L8.82016 3.91346L4.1935 8.53346C4.13171 8.59575 4.08283 8.66963 4.04965 8.75085C4.01647 8.83208 3.99966 8.91905 4.00016 9.00679ZM11.1735 3.44012L13.0602 5.32679L12.1135 6.27346L10.2268 4.38679L11.1735 3.44012ZM5.3335 9.28012L9.28683 5.32679L11.1735 7.21346L7.22016 11.1668H5.3335V9.28012Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Edit</span></a><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.3333 4.49992H10.6667V3.83325C10.6667 3.30282 10.456 2.79411 10.0809 2.41904C9.70581 2.04397 9.1971 1.83325 8.66667 1.83325H7.33333C6.8029 1.83325 6.29419 2.04397 5.91912 2.41904C5.54405 2.79411 5.33333 3.30282 5.33333 3.83325V4.49992H2.66667C2.48986 4.49992 2.32029 4.57016 2.19526 4.69518C2.07024 4.8202 2 4.98977 2 5.16658C2 5.3434 2.07024 5.51297 2.19526 5.63799C2.32029 5.76301 2.48986 5.83325 2.66667 5.83325H3.33333V13.1666C3.33333 13.697 3.54405 14.2057 3.91912 14.5808C4.29419 14.9559 4.8029 15.1666 5.33333 15.1666H10.6667C11.1971 15.1666 11.7058 14.9559 12.0809 14.5808C12.456 14.2057 12.6667 13.697 12.6667 13.1666V5.83325H13.3333C13.5101 5.83325 13.6797 5.76301 13.8047 5.63799C13.9298 5.51297 14 5.3434 14 5.16658C14 4.98977 13.9298 4.8202 13.8047 4.69518C13.6797 4.57016 13.5101 4.49992 13.3333 4.49992ZM6.66667 3.83325C6.66667 3.65644 6.7369 3.48687 6.86193 3.36185C6.98695 3.23682 7.15652 3.16659 7.33333 3.16659H8.66667C8.84348 3.16659 9.01305 3.23682 9.13807 3.36185C9.2631 3.48687 9.33333 3.65644 9.33333 3.83325V4.49992H6.66667V3.83325ZM11.3333 13.1666C11.3333 13.3434 11.2631 13.513 11.1381 13.638C11.013 13.763 10.8435 13.8333 10.6667 13.8333H5.33333C5.15652 13.8333 4.98695 13.763 4.86193 13.638C4.7369 13.513 4.66667 13.3434 4.66667 13.1666V5.83325H11.3333V13.1666Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Delete</span></a></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;">
                    <div class="form-check me-4">
                      <input class="form-check-input bg-transparent border-light-dark" id="flexCheckDefault" type="checkbox" value="">
                    </div><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/avatar-men-2.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">John Doe</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-dark-light rounded-pill"><span class="fs-10 fw-medium text-secondary-light">Explicitway</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">Front-end Developer</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="d-inline-block px-2 rounded-pill bg-success-dark bg-opacity-50 text-success lh-lg fs-10 fw-medium">ACTIVE</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center justify-content-end py-4 px-6" style="height: 64px;"><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.0002 8.50012C13.8234 8.50012 13.6538 8.57036 13.5288 8.69538C13.4037 8.82041 13.3335 8.98998 13.3335 9.16679V13.1668C13.3335 13.3436 13.2633 13.5132 13.1382 13.6382C13.0132 13.7632 12.8436 13.8335 12.6668 13.8335H3.3335C3.15669 13.8335 2.98712 13.7632 2.86209 13.6382C2.73707 13.5132 2.66683 13.3436 2.66683 13.1668V3.83346C2.66683 3.65664 2.73707 3.48708 2.86209 3.36205C2.98712 3.23703 3.15669 3.16679 3.3335 3.16679H7.3335C7.51031 3.16679 7.67988 3.09655 7.8049 2.97153C7.92992 2.8465 8.00016 2.67693 8.00016 2.50012C8.00016 2.32331 7.92992 2.15374 7.8049 2.02872C7.67988 1.90369 7.51031 1.83346 7.3335 1.83346H3.3335C2.80306 1.83346 2.29436 2.04417 1.91928 2.41924C1.54421 2.79431 1.3335 3.30302 1.3335 3.83346V13.1668C1.3335 13.6972 1.54421 14.2059 1.91928 14.581C2.29436 14.9561 2.80306 15.1668 3.3335 15.1668H12.6668C13.1973 15.1668 13.706 14.9561 14.081 14.581C14.4561 14.2059 14.6668 13.6972 14.6668 13.1668V9.16679C14.6668 8.98998 14.5966 8.82041 14.4716 8.69538C14.3465 8.57036 14.177 8.50012 14.0002 8.50012ZM4.00016 9.00679V11.8335C4.00016 12.0103 4.0704 12.1798 4.19543 12.3049C4.32045 12.4299 4.49002 12.5001 4.66683 12.5001H7.4935C7.58123 12.5006 7.66821 12.4838 7.74943 12.4506C7.83066 12.4175 7.90454 12.3686 7.96683 12.3068L12.5802 7.68679L14.4735 5.83346C14.536 5.77148 14.5856 5.69775 14.6194 5.61651C14.6533 5.53527 14.6707 5.44813 14.6707 5.36012C14.6707 5.27211 14.6533 5.18498 14.6194 5.10374C14.5856 5.0225 14.536 4.94876 14.4735 4.88679L11.6468 2.02679C11.5849 1.9643 11.5111 1.91471 11.4299 1.88086C11.3486 1.84702 11.2615 1.82959 11.1735 1.82959C11.0855 1.82959 10.9984 1.84702 10.9171 1.88086C10.8359 1.91471 10.7621 1.9643 10.7002 2.02679L8.82016 3.91346L4.1935 8.53346C4.13171 8.59575 4.08283 8.66963 4.04965 8.75085C4.01647 8.83208 3.99966 8.91905 4.00016 9.00679ZM11.1735 3.44012L13.0602 5.32679L12.1135 6.27346L10.2268 4.38679L11.1735 3.44012ZM5.3335 9.28012L9.28683 5.32679L11.1735 7.21346L7.22016 11.1668H5.3335V9.28012Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Edit</span></a><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.3333 4.49992H10.6667V3.83325C10.6667 3.30282 10.456 2.79411 10.0809 2.41904C9.70581 2.04397 9.1971 1.83325 8.66667 1.83325H7.33333C6.8029 1.83325 6.29419 2.04397 5.91912 2.41904C5.54405 2.79411 5.33333 3.30282 5.33333 3.83325V4.49992H2.66667C2.48986 4.49992 2.32029 4.57016 2.19526 4.69518C2.07024 4.8202 2 4.98977 2 5.16658C2 5.3434 2.07024 5.51297 2.19526 5.63799C2.32029 5.76301 2.48986 5.83325 2.66667 5.83325H3.33333V13.1666C3.33333 13.697 3.54405 14.2057 3.91912 14.5808C4.29419 14.9559 4.8029 15.1666 5.33333 15.1666H10.6667C11.1971 15.1666 11.7058 14.9559 12.0809 14.5808C12.456 14.2057 12.6667 13.697 12.6667 13.1666V5.83325H13.3333C13.5101 5.83325 13.6797 5.76301 13.8047 5.63799C13.9298 5.51297 14 5.3434 14 5.16658C14 4.98977 13.9298 4.8202 13.8047 4.69518C13.6797 4.57016 13.5101 4.49992 13.3333 4.49992ZM6.66667 3.83325C6.66667 3.65644 6.7369 3.48687 6.86193 3.36185C6.98695 3.23682 7.15652 3.16659 7.33333 3.16659H8.66667C8.84348 3.16659 9.01305 3.23682 9.13807 3.36185C9.2631 3.48687 9.33333 3.65644 9.33333 3.83325V4.49992H6.66667V3.83325ZM11.3333 13.1666C11.3333 13.3434 11.2631 13.513 11.1381 13.638C11.013 13.763 10.8435 13.8333 10.6667 13.8333H5.33333C5.15652 13.8333 4.98695 13.763 4.86193 13.638C4.7369 13.513 4.66667 13.3434 4.66667 13.1666V5.83325H11.3333V13.1666Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Delete</span></a></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="d-flex py-4 px-6 align-items-center" style="height: 64px;">
                    <div class="form-check me-4">
                      <input class="form-check-input bg-transparent border-light-dark" id="flexCheckDefault" type="checkbox" value="">
                    </div><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/avatar-men-2.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">John Doe</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-dark-light rounded-pill"><span class="fs-10 fw-medium text-secondary-light">Explicitway</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">Front-end Developer</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-4 px-6 align-items-center" style="height: 64px;"><span class="d-inline-block px-2 rounded-pill bg-success-dark bg-opacity-50 text-success lh-lg fs-10 fw-medium">ACTIVE</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center justify-content-end py-4 px-6" style="height: 64px;"><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.0002 8.50012C13.8234 8.50012 13.6538 8.57036 13.5288 8.69538C13.4037 8.82041 13.3335 8.98998 13.3335 9.16679V13.1668C13.3335 13.3436 13.2633 13.5132 13.1382 13.6382C13.0132 13.7632 12.8436 13.8335 12.6668 13.8335H3.3335C3.15669 13.8335 2.98712 13.7632 2.86209 13.6382C2.73707 13.5132 2.66683 13.3436 2.66683 13.1668V3.83346C2.66683 3.65664 2.73707 3.48708 2.86209 3.36205C2.98712 3.23703 3.15669 3.16679 3.3335 3.16679H7.3335C7.51031 3.16679 7.67988 3.09655 7.8049 2.97153C7.92992 2.8465 8.00016 2.67693 8.00016 2.50012C8.00016 2.32331 7.92992 2.15374 7.8049 2.02872C7.67988 1.90369 7.51031 1.83346 7.3335 1.83346H3.3335C2.80306 1.83346 2.29436 2.04417 1.91928 2.41924C1.54421 2.79431 1.3335 3.30302 1.3335 3.83346V13.1668C1.3335 13.6972 1.54421 14.2059 1.91928 14.581C2.29436 14.9561 2.80306 15.1668 3.3335 15.1668H12.6668C13.1973 15.1668 13.706 14.9561 14.081 14.581C14.4561 14.2059 14.6668 13.6972 14.6668 13.1668V9.16679C14.6668 8.98998 14.5966 8.82041 14.4716 8.69538C14.3465 8.57036 14.177 8.50012 14.0002 8.50012ZM4.00016 9.00679V11.8335C4.00016 12.0103 4.0704 12.1798 4.19543 12.3049C4.32045 12.4299 4.49002 12.5001 4.66683 12.5001H7.4935C7.58123 12.5006 7.66821 12.4838 7.74943 12.4506C7.83066 12.4175 7.90454 12.3686 7.96683 12.3068L12.5802 7.68679L14.4735 5.83346C14.536 5.77148 14.5856 5.69775 14.6194 5.61651C14.6533 5.53527 14.6707 5.44813 14.6707 5.36012C14.6707 5.27211 14.6533 5.18498 14.6194 5.10374C14.5856 5.0225 14.536 4.94876 14.4735 4.88679L11.6468 2.02679C11.5849 1.9643 11.5111 1.91471 11.4299 1.88086C11.3486 1.84702 11.2615 1.82959 11.1735 1.82959C11.0855 1.82959 10.9984 1.84702 10.9171 1.88086C10.8359 1.91471 10.7621 1.9643 10.7002 2.02679L8.82016 3.91346L4.1935 8.53346C4.13171 8.59575 4.08283 8.66963 4.04965 8.75085C4.01647 8.83208 3.99966 8.91905 4.00016 9.00679ZM11.1735 3.44012L13.0602 5.32679L12.1135 6.27346L10.2268 4.38679L11.1735 3.44012ZM5.3335 9.28012L9.28683 5.32679L11.1735 7.21346L7.22016 11.1668H5.3335V9.28012Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Edit</span></a><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.3333 4.49992H10.6667V3.83325C10.6667 3.30282 10.456 2.79411 10.0809 2.41904C9.70581 2.04397 9.1971 1.83325 8.66667 1.83325H7.33333C6.8029 1.83325 6.29419 2.04397 5.91912 2.41904C5.54405 2.79411 5.33333 3.30282 5.33333 3.83325V4.49992H2.66667C2.48986 4.49992 2.32029 4.57016 2.19526 4.69518C2.07024 4.8202 2 4.98977 2 5.16658C2 5.3434 2.07024 5.51297 2.19526 5.63799C2.32029 5.76301 2.48986 5.83325 2.66667 5.83325H3.33333V13.1666C3.33333 13.697 3.54405 14.2057 3.91912 14.5808C4.29419 14.9559 4.8029 15.1666 5.33333 15.1666H10.6667C11.1971 15.1666 11.7058 14.9559 12.0809 14.5808C12.456 14.2057 12.6667 13.697 12.6667 13.1666V5.83325H13.3333C13.5101 5.83325 13.6797 5.76301 13.8047 5.63799C13.9298 5.51297 14 5.3434 14 5.16658C14 4.98977 13.9298 4.8202 13.8047 4.69518C13.6797 4.57016 13.5101 4.49992 13.3333 4.49992ZM6.66667 3.83325C6.66667 3.65644 6.7369 3.48687 6.86193 3.36185C6.98695 3.23682 7.15652 3.16659 7.33333 3.16659H8.66667C8.84348 3.16659 9.01305 3.23682 9.13807 3.36185C9.2631 3.48687 9.33333 3.65644 9.33333 3.83325V4.49992H6.66667V3.83325ZM11.3333 13.1666C11.3333 13.3434 11.2631 13.513 11.1381 13.638C11.013 13.763 10.8435 13.8333 10.6667 13.8333H5.33333C5.15652 13.8333 4.98695 13.763 4.86193 13.638C4.7369 13.513 4.66667 13.3434 4.66667 13.1666V5.83325H11.3333V13.1666Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Delete</span></a></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="d-flex py-4 px-6 align-items-center" style="height: 64px;">
                    <div class="form-check me-4">
                      <input class="form-check-input bg-transparent border-light-dark" id="flexCheckDefault" type="checkbox" value="">
                    </div><img class="img-fluid" style="width: 32px; height: 32px;" src="trizzle-assets/images/avatar-men-2.png" alt=""><span class="ms-3 fs-9 fw-medium text-light">John Doe</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;">
                    <div class="d-inline-block px-2 py-1 bg-dark-light rounded-pill"><span class="fs-10 fw-medium text-secondary-light">Explicitway</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="fs-9 fw-medium text-light">Front-end Developer</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex py-5 px-6 align-items-center" style="height: 64px;"><span class="d-inline-block px-2 rounded-pill bg-success-dark bg-opacity-50 text-success lh-lg fs-10 fw-medium">ACTIVE</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center justify-content-end py-4 px-6" style="height: 64px;"><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.0002 8.50012C13.8234 8.50012 13.6538 8.57036 13.5288 8.69538C13.4037 8.82041 13.3335 8.98998 13.3335 9.16679V13.1668C13.3335 13.3436 13.2633 13.5132 13.1382 13.6382C13.0132 13.7632 12.8436 13.8335 12.6668 13.8335H3.3335C3.15669 13.8335 2.98712 13.7632 2.86209 13.6382C2.73707 13.5132 2.66683 13.3436 2.66683 13.1668V3.83346C2.66683 3.65664 2.73707 3.48708 2.86209 3.36205C2.98712 3.23703 3.15669 3.16679 3.3335 3.16679H7.3335C7.51031 3.16679 7.67988 3.09655 7.8049 2.97153C7.92992 2.8465 8.00016 2.67693 8.00016 2.50012C8.00016 2.32331 7.92992 2.15374 7.8049 2.02872C7.67988 1.90369 7.51031 1.83346 7.3335 1.83346H3.3335C2.80306 1.83346 2.29436 2.04417 1.91928 2.41924C1.54421 2.79431 1.3335 3.30302 1.3335 3.83346V13.1668C1.3335 13.6972 1.54421 14.2059 1.91928 14.581C2.29436 14.9561 2.80306 15.1668 3.3335 15.1668H12.6668C13.1973 15.1668 13.706 14.9561 14.081 14.581C14.4561 14.2059 14.6668 13.6972 14.6668 13.1668V9.16679C14.6668 8.98998 14.5966 8.82041 14.4716 8.69538C14.3465 8.57036 14.177 8.50012 14.0002 8.50012ZM4.00016 9.00679V11.8335C4.00016 12.0103 4.0704 12.1798 4.19543 12.3049C4.32045 12.4299 4.49002 12.5001 4.66683 12.5001H7.4935C7.58123 12.5006 7.66821 12.4838 7.74943 12.4506C7.83066 12.4175 7.90454 12.3686 7.96683 12.3068L12.5802 7.68679L14.4735 5.83346C14.536 5.77148 14.5856 5.69775 14.6194 5.61651C14.6533 5.53527 14.6707 5.44813 14.6707 5.36012C14.6707 5.27211 14.6533 5.18498 14.6194 5.10374C14.5856 5.0225 14.536 4.94876 14.4735 4.88679L11.6468 2.02679C11.5849 1.9643 11.5111 1.91471 11.4299 1.88086C11.3486 1.84702 11.2615 1.82959 11.1735 1.82959C11.0855 1.82959 10.9984 1.84702 10.9171 1.88086C10.8359 1.91471 10.7621 1.9643 10.7002 2.02679L8.82016 3.91346L4.1935 8.53346C4.13171 8.59575 4.08283 8.66963 4.04965 8.75085C4.01647 8.83208 3.99966 8.91905 4.00016 9.00679ZM11.1735 3.44012L13.0602 5.32679L12.1135 6.27346L10.2268 4.38679L11.1735 3.44012ZM5.3335 9.28012L9.28683 5.32679L11.1735 7.21346L7.22016 11.1668H5.3335V9.28012Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Edit</span></a><a class="btn btn-sm me-2 d-flex align-items-center btn-secondary-dark" href="#">
                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.3333 4.49992H10.6667V3.83325C10.6667 3.30282 10.456 2.79411 10.0809 2.41904C9.70581 2.04397 9.1971 1.83325 8.66667 1.83325H7.33333C6.8029 1.83325 6.29419 2.04397 5.91912 2.41904C5.54405 2.79411 5.33333 3.30282 5.33333 3.83325V4.49992H2.66667C2.48986 4.49992 2.32029 4.57016 2.19526 4.69518C2.07024 4.8202 2 4.98977 2 5.16658C2 5.3434 2.07024 5.51297 2.19526 5.63799C2.32029 5.76301 2.48986 5.83325 2.66667 5.83325H3.33333V13.1666C3.33333 13.697 3.54405 14.2057 3.91912 14.5808C4.29419 14.9559 4.8029 15.1666 5.33333 15.1666H10.6667C11.1971 15.1666 11.7058 14.9559 12.0809 14.5808C12.456 14.2057 12.6667 13.697 12.6667 13.1666V5.83325H13.3333C13.5101 5.83325 13.6797 5.76301 13.8047 5.63799C13.9298 5.51297 14 5.3434 14 5.16658C14 4.98977 13.9298 4.8202 13.8047 4.69518C13.6797 4.57016 13.5101 4.49992 13.3333 4.49992ZM6.66667 3.83325C6.66667 3.65644 6.7369 3.48687 6.86193 3.36185C6.98695 3.23682 7.15652 3.16659 7.33333 3.16659H8.66667C8.84348 3.16659 9.01305 3.23682 9.13807 3.36185C9.2631 3.48687 9.33333 3.65644 9.33333 3.83325V4.49992H6.66667V3.83325ZM11.3333 13.1666C11.3333 13.3434 11.2631 13.513 11.1381 13.638C11.013 13.763 10.8435 13.8333 10.6667 13.8333H5.33333C5.15652 13.8333 4.98695 13.763 4.86193 13.638C4.7369 13.513 4.66667 13.3434 4.66667 13.1666V5.83325H11.3333V13.1666Z" fill="#3D485B"></path>
                      </svg><span class="ms-2 text-secondary-light">Delete</span></a></div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="py-8 px-6">
        <div class="d-flex flex-column flex-sm-row align-items-center justify-content-between">
          <div class="mt-5 mt-sm-0 order-last order-sm-first">
            <p class="fs-9 fw-medium text-secondary-light mb-0"><span>Showing</span> <span class="text-light">1</span> <span>to</span> <span class="text-light">10</span> <span>of 20 results</span></p>
          </div>
          <div class="d-flex align-items-center"><a class="btn me-3 btn-sm fs-10 btn-dark-light text-secondary-light" href="#">Previous</a><a class="btn btn-sm fs-10 btn-primary" href="#">Next</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #209

Bootstrap

Trizzle

<section class="py-8">
  <div class="container">
    <div class="bg-secondary py-4 px-6 rounded-3">
      <div class="d-flex flex-column flex-sm-row align-items-center justify-content-between">
        <div class="mt-5 mt-sm-0 order-last order-sm-first">
          <p class="fs-9 fw-medium text-light-dark mb-0"><span>Showing</span><span class="text-light">1</span><span>to</span><span class="text-light">10</span><span>of 20 results</span></p>
        </div>
        <div class="d-flex align-items-center"><a class="btn me-3 btn-sm fs-10 btn-dark-light text-secondary-light" href="#">Previous</a><a class="btn btn-sm fs-10 btn-primary" href="#">Next</a></div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #210

Bootstrap

Trizzle

<section class="py-8">
  <div class="container">
    <div class="row mb-6">
      <div class="col-sm-6 col-lg-3 mb-6 mb-lg-0">
        <div class="p-6 h-100 bg-secondary rounded-4">
          <div>
            <div class="d-flex mb-4 align-items-center justify-content-center bg-primary-dark bg-opacity-50 rounded-4" style="width: 48px; height: 48px;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 5.50002H12.72L12.4 4.50002C12.1926 3.91325 11.8077 3.40553 11.2989 3.04718C10.7901 2.68884 10.1824 2.49762 9.56 2.50002H5C4.20435 2.50002 3.44129 2.81609 2.87868 3.3787C2.31607 3.94131 2 4.70437 2 5.50002V18.5C2 19.2957 2.31607 20.0587 2.87868 20.6213C3.44129 21.184 4.20435 21.5 5 21.5H19C19.7956 21.5 20.5587 21.184 21.1213 20.6213C21.6839 20.0587 22 19.2957 22 18.5V8.50002C22 7.70437 21.6839 6.94131 21.1213 6.3787C20.5587 5.81609 19.7956 5.50002 19 5.50002ZM20 18.5C20 18.7652 19.8946 19.0196 19.7071 19.2071C19.5196 19.3947 19.2652 19.5 19 19.5H5C4.73478 19.5 4.48043 19.3947 4.29289 19.2071C4.10536 19.0196 4 18.7652 4 18.5V5.50002C4 5.23481 4.10536 4.98045 4.29289 4.79292C4.48043 4.60538 4.73478 4.50002 5 4.50002H9.56C9.76964 4.49948 9.97416 4.56484 10.1446 4.68686C10.3151 4.80889 10.4429 4.9814 10.51 5.18002L11.05 6.82002C11.1171 7.01864 11.2449 7.19116 11.4154 7.31318C11.5858 7.4352 11.7904 7.50056 12 7.50002H19C19.2652 7.50002 19.5196 7.60538 19.7071 7.79292C19.8946 7.98045 20 8.23481 20 8.50002V18.5Z" fill="#194BFB"></path>
              </svg>
            </div><span class="d-block mb-8 fs-8 fw-semibold text-light">Drive Storage</span>
            <div class="d-flex mb-2 align-items-center justify-content-between"><span class="fs-10 fw-semibold text-primary">45 GB</span><span class="fs-10 fw-medium text-secondary-light">100 GB</span></div>
            <div class="bg-dark-light rounded-pill">
              <div class="py-1 col-7 bg-primary rounded-pill"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3 mb-6 mb-lg-0">
        <div class="p-6 h-100 bg-secondary rounded-4">
          <div>
            <div class="d-flex mb-4 align-items-center justify-content-between">
              <div class="d-flex align-items-center justify-content-center bg-primary-dark bg-opacity-50 rounded-4" style="width: 48px; height: 48px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H10V7C10 7.79565 10.3161 8.55871 10.8787 9.12132C11.4413 9.68393 12.2044 10 13 10H16V11C16 11.2652 16.1054 11.5196 16.2929 11.7071C16.4804 11.8946 16.7348 12 17 12C17.2652 12 17.5196 11.8946 17.7071 11.7071C17.8946 11.5196 18 11.2652 18 11V9C18 9 18 9 18 8.94C17.9896 8.84813 17.9695 8.75763 17.94 8.67V8.58C17.8919 8.47718 17.8278 8.38267 17.75 8.3L11.75 2.3C11.6673 2.22222 11.5728 2.15808 11.47 2.11C11.4402 2.10576 11.4099 2.10576 11.38 2.11C11.2784 2.05174 11.1662 2.01434 11.05 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H12C12.2652 22 12.5196 21.8946 12.7071 21.7071C12.8946 21.5196 13 21.2652 13 21C13 20.7348 12.8946 20.4804 12.7071 20.2929C12.5196 20.1054 12.2652 20 12 20ZM12 5.41L14.59 8H13C12.7348 8 12.4804 7.89464 12.2929 7.70711C12.1054 7.51957 12 7.26522 12 7V5.41ZM7 8C6.73478 8 6.48043 8.10536 6.29289 8.29289C6.10536 8.48043 6 8.73478 6 9C6 9.26522 6.10536 9.51957 6.29289 9.70711C6.48043 9.89464 6.73478 10 7 10H8C8.26522 10 8.51957 9.89464 8.70711 9.70711C8.89464 9.51957 9 9.26522 9 9C9 8.73478 8.89464 8.48043 8.70711 8.29289C8.51957 8.10536 8.26522 8 8 8H7ZM21.71 20.29L20.54 19.13C20.914 18.4773 21.0636 17.7199 20.9661 16.974C20.8686 16.2281 20.5292 15.5347 20 15C19.513 14.4957 18.8854 14.1497 18.199 14.0071C17.5126 13.8646 16.7992 13.9321 16.1517 14.2008C15.5041 14.4695 14.9526 14.927 14.5688 15.5137C14.185 16.1004 13.9868 16.7891 14 17.49C13.9966 18.0932 14.1509 18.6868 14.4476 19.2119C14.7444 19.7371 15.1733 20.1755 15.6917 20.4838C16.2102 20.7921 16.8003 20.9594 17.4034 20.9693C18.0065 20.9791 18.6017 20.8311 19.13 20.54L20.29 21.71C20.383 21.8037 20.4936 21.8781 20.6154 21.9289C20.7373 21.9797 20.868 22.0058 21 22.0058C21.132 22.0058 21.2627 21.9797 21.3846 21.9289C21.5064 21.8781 21.617 21.8037 21.71 21.71C21.8037 21.617 21.8781 21.5064 21.9289 21.3846C21.9797 21.2627 22.0058 21.132 22.0058 21C22.0058 20.868 21.9797 20.7373 21.9289 20.6154C21.8781 20.4936 21.8037 20.383 21.71 20.29ZM18.54 18.54C18.2544 18.8086 17.8771 18.9581 17.485 18.9581C17.0929 18.9581 16.7156 18.8086 16.43 18.54C16.1547 18.2598 16.0003 17.8828 16 17.49C15.9979 17.2928 16.0359 17.0971 16.1115 16.915C16.1871 16.7328 16.2989 16.5678 16.44 16.43C16.7066 16.1648 17.0641 16.0111 17.44 16C17.6422 15.9876 17.8447 16.0171 18.035 16.0866C18.2252 16.1562 18.399 16.2643 18.5455 16.4042C18.692 16.5441 18.808 16.7128 18.8862 16.8996C18.9644 17.0865 19.0031 17.2875 19 17.49C18.9917 17.8871 18.8263 18.2647 18.54 18.54ZM13 12H7C6.73478 12 6.48043 12.1054 6.29289 12.2929C6.10536 12.4804 6 12.7348 6 13C6 13.2652 6.10536 13.5196 6.29289 13.7071C6.48043 13.8946 6.73478 14 7 14H13C13.2652 14 13.5196 13.8946 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13C14 12.7348 13.8946 12.4804 13.7071 12.2929C13.5196 12.1054 13.2652 12 13 12ZM11 18C11.2652 18 11.5196 17.8946 11.7071 17.7071C11.8946 17.5196 12 17.2652 12 17C12 16.7348 11.8946 16.4804 11.7071 16.2929C11.5196 16.1054 11.2652 16 11 16H7C6.73478 16 6.48043 16.1054 6.29289 16.2929C6.10536 16.4804 6 16.7348 6 17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18H11Z" fill="#194BFB"></path>
                </svg>
              </div>
              <div><img class="img-fluid" src="trizzle-assets/images/avatar-women-3-circle-border.png" alt="" style="width: 24px; height: 24px;"><img class="img-fluid ms-n3" src="trizzle-assets/images/avatar-men-2.png" alt="" style="width: 24px; height: 24px;"></div>
            </div><span class="d-block mb-12 fs-8 fw-semibold text-light">Research</span>
            <div class="d-flex align-items-center justify-content-between"><span class="fs-10 fw-medium text-secondary-light">10 Files</span><span class="fs-10 fw-medium text-secondary-light">5 GB</span></div>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="p-6 h-100 bg-secondary rounded-4">
          <div class="row align-items-center">
            <div class="col-md-5 mb-8 mb-md-0">
              <div>
                <div class="d-flex mb-10 align-items-center justify-content-center bg-primary-dark bg-opacity-50 rounded-4" style="width: 48px; height: 48px;">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M22 14.86V14.81C21.9879 14.6169 21.9544 14.4257 21.9 14.24L20.26 4.51003C20.1428 3.80198 19.7757 3.15939 19.2253 2.69887C18.6749 2.23834 17.9776 1.9904 17.26 2.00003H6.69C5.98097 2.00232 5.29566 2.25568 4.75565 2.71515C4.21563 3.17462 3.85581 3.81051 3.74 4.51003L2.12 14.22C2.06564 14.4057 2.0321 14.5969 2.02 14.79V14.84C2 14.91 2 15 2 15V19C2 19.7957 2.31607 20.5587 2.87868 21.1213C3.44129 21.684 4.20435 22 5 22H19C19.7956 22 20.5587 21.684 21.1213 21.1213C21.6839 20.5587 22 19.7957 22 19V15C22 15 22 14.91 22 14.86ZM5.71 4.83003C5.75048 4.59523 5.87346 4.38261 6.05679 4.23044C6.24013 4.07827 6.47177 3.99656 6.71 4.00003H17.31C17.5482 3.99656 17.7799 4.07827 17.9632 4.23044C18.1465 4.38261 18.2695 4.59523 18.31 4.83003L19.51 12.05C19.342 12.0168 19.1712 12.0001 19 12H5C4.83546 12.0013 4.67141 12.0181 4.51 12.05L5.71 4.83003ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8947 19.2652 20 19 20H5C4.73478 20 4.48043 19.8947 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V15.08L4.08 14.62C4.15502 14.4374 4.28242 14.2811 4.44614 14.1707C4.60986 14.0604 4.80257 14.001 5 14H19C19.1974 14.001 19.3901 14.0604 19.5539 14.1707C19.7176 14.2811 19.845 14.4374 19.92 14.62L20 15.08V19ZM17 16C16.8022 16 16.6089 16.0587 16.4444 16.1686C16.28 16.2784 16.1518 16.4346 16.0761 16.6173C16.0004 16.8001 15.9806 17.0011 16.0192 17.1951C16.0578 17.3891 16.153 17.5673 16.2929 17.7071C16.4327 17.847 16.6109 17.9422 16.8049 17.9808C16.9989 18.0194 17.2 17.9996 17.3827 17.9239C17.5654 17.8482 17.7216 17.72 17.8315 17.5556C17.9414 17.3911 18 17.1978 18 17C18 16.7348 17.8946 16.4805 17.7071 16.2929C17.5196 16.1054 17.2652 16 17 16Z" fill="#194BFB"></path>
                  </svg>
                </div><span class="d-block mb-1 fs-8 fw-semibold text-light">Used percentage</span>
                <p class="mb-0 fs-10 fw-semibold text-secondary-light">Check your storage on your dashboard</p>
              </div>
            </div>
            <div class="col-md-7">
              <div>
                <div class="chart px-2" data-type="radial-bar-part" style="min-height: 120px;"></div>
                <div class="d-flex align-items-end justify-content-center mt-n12"><span class="fs-3 text-light fw-semibold">64</span><span class="fs-4 text-secondary-light fw-semibold">%</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #211

Bootstrap

Trizzle

<section>
  <div class="position-fixed top-0 start-0 end-0 bottom-0 d-flex align-items-center w-100 h-100 p-4 bg-secondary bg-opacity-75 overflow-auto">
    <div class="mw-xl w-100 mx-auto p-6 bg-secondary rounded-2 overflow-hidden">
      <div class="pb-6 mb-6 border-bottom border-secondary-dark">
        <div class="d-flex flex-wrap gap-4 align-items-center justify-content-between">
          <div class="d-flex align-items-center">
            <div class="d-flex align-items-center justify-content-center rounded-2 bg-dark-light" style="width: 56px; height: 56px;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.707 11.2929L13.707 3.29291C13.5672 3.15306 13.389 3.05782 13.195 3.01922C13.0011 2.98063 12.8 3.00042 12.6173 3.0761C12.4346 3.15178 12.2784 3.27994 12.1685 3.44438C12.0586 3.60882 12 3.80214 12 3.99991V7.54483C9.2683 7.79768 6.72926 9.06078 4.87973 11.087C3.0302 13.1131 2.00331 15.7565 2 18.4999V19.9999C1.99998 20.2076 2.06463 20.4101 2.18495 20.5794C2.30528 20.7486 2.47532 20.8763 2.67147 20.9445C2.86762 21.0127 3.08014 21.0182 3.27954 20.9601C3.47893 20.9021 3.65531 20.7834 3.78418 20.6205C4.76383 19.4555 5.96583 18.4973 7.31997 17.802C8.6741 17.1068 10.1532 16.6884 11.6709 16.5712C11.7207 16.5649 11.8457 16.5551 12 16.5453V19.9999C12 20.1977 12.0586 20.391 12.1685 20.5555C12.2784 20.7199 12.4346 20.848 12.6173 20.9237C12.8 20.9994 13.0011 21.0192 13.195 20.9806C13.389 20.942 13.5672 20.8468 13.707 20.7069L21.707 12.7069C21.7999 12.6141 21.8735 12.5039 21.9238 12.3826C21.9741 12.2612 21.9999 12.1312 21.9999 11.9999C21.9999 11.8686 21.9741 11.7386 21.9238 11.6173C21.8735 11.496 21.7999 11.3857 21.707 11.2929ZM14 17.5859V15.4999C14 15.3686 13.9742 15.2385 13.9239 15.1172C13.8737 14.9958 13.8 14.8856 13.7072 14.7927C13.6143 14.6999 13.5041 14.6262 13.3827 14.576C13.2614 14.5257 13.1313 14.4999 13 14.4999C12.7451 14.4999 11.7041 14.5492 11.4385 14.5849C8.74307 14.8332 6.17736 15.8572 4.05176 17.5331C4.29289 15.3274 5.33918 13.2882 6.99026 11.806C8.64135 10.3237 10.7812 9.50263 13 9.49991C13.1313 9.49995 13.2614 9.47411 13.3827 9.42386C13.5041 9.37362 13.6143 9.29996 13.7072 9.2071C13.8 9.11423 13.8737 9.00398 13.9239 8.88264C13.9742 8.7613 14 8.63125 14 8.49991V6.41397L19.5859 11.9999L14 17.5859Z" fill="#194BFB"></path>
              </svg>
            </div>
            <div class="ps-4"><span class="d-block lh-sm fs-5 fw-semibold text-light">Share to web</span><span class="fs-10 lh-sm fw-semibold text-secondary-light">Publish and share link with anyone</span></div>
          </div>
          <div class="d-inline-flex p-1 bg-primary rounded-pill">
            <button class="btn p-0 bg-transparent rounded-pill" style="width: 20px; height: 20px;"></button>
            <button class="btn p-0 bg-white rounded-pill" style="width: 20px; height: 20px;"></button>
          </div>
        </div>
      </div>
      <div class="d-flex mb-6 flex-wrap gap-4 align-items-center justify-content-between"><span class="fs-9 fw-semibold text-secondary-light">Anyone with link can view</span><a class="btn btn-link fs-9 p-0 text-decoration-none" href="#">Settings</a></div>
      <div class="pb-6 mb-6 border-bottom border-secondary-dark">
        <div class="position-relative">
          <button class="position-absolute top-50 end-0 me-3 translate-middle-y btn bg-transparent btn-outline-secondary-light border-0 p-0">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 8.94C20.9896 8.84813 20.9695 8.75763 20.94 8.67V8.58C20.8919 8.47718 20.8278 8.38267 20.75 8.3L14.75 2.3C14.6673 2.22222 14.5728 2.15808 14.47 2.11C14.4402 2.10576 14.4099 2.10576 14.38 2.11C14.2784 2.05174 14.1662 2.01434 14.05 2H10C9.20435 2 8.44129 2.31607 7.87868 2.87868C7.31607 3.44129 7 4.20435 7 5V6H6C5.20435 6 4.44129 6.31607 3.87868 6.87868C3.31607 7.44129 3 8.20435 3 9V19C3 19.7956 3.31607 20.5587 3.87868 21.1213C4.44129 21.6839 5.20435 22 6 22H14C14.7956 22 15.5587 21.6839 16.1213 21.1213C16.6839 20.5587 17 19.7956 17 19V18H18C18.7956 18 19.5587 17.6839 20.1213 17.1213C20.6839 16.5587 21 15.7956 21 15V9C21 9 21 9 21 8.94ZM15 5.41L17.59 8H16C15.7348 8 15.4804 7.89464 15.2929 7.70711C15.1054 7.51957 15 7.26522 15 7V5.41ZM15 19C15 19.2652 14.8946 19.5196 14.7071 19.7071C14.5196 19.8946 14.2652 20 14 20H6C5.73478 20 5.48043 19.8946 5.29289 19.7071C5.10536 19.5196 5 19.2652 5 19V9C5 8.73478 5.10536 8.48043 5.29289 8.29289C5.48043 8.10536 5.73478 8 6 8H7V15C7 15.7956 7.31607 16.5587 7.87868 17.1213C8.44129 17.6839 9.20435 18 10 18H15V19ZM19 15C19 15.2652 18.8946 15.5196 18.7071 15.7071C18.5196 15.8946 18.2652 16 18 16H10C9.73478 16 9.48043 15.8946 9.29289 15.7071C9.10536 15.5196 9 15.2652 9 15V5C9 4.73478 9.10536 4.48043 9.29289 4.29289C9.48043 4.10536 9.73478 4 10 4H13V7C13 7.79565 13.3161 8.55871 13.8787 9.12132C14.4413 9.68393 15.2044 10 16 10H19V15Z" fill="currentColor"></path>
            </svg>
          </button>
          <input class="form-control text-light fs-9 bg-transparent" type="search" placeholder="https://shuffle.dev/trizzle-ui/random-link">
        </div>
      </div>
      <div class="d-flex felx-wrap gap-4 align-items-center justify-content-between"><a class="btn btn-link p-0 text-decoration-none" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 8.94C20.9896 8.84813 20.9695 8.75763 20.94 8.67V8.58C20.8919 8.47718 20.8278 8.38267 20.75 8.3L14.75 2.3C14.6673 2.22222 14.5728 2.15808 14.47 2.11C14.4402 2.10576 14.4099 2.10576 14.38 2.11C14.2784 2.05174 14.1662 2.01434 14.05 2H10C9.20435 2 8.44129 2.31607 7.87868 2.87868C7.31607 3.44129 7 4.20435 7 5V6H6C5.20435 6 4.44129 6.31607 3.87868 6.87868C3.31607 7.44129 3 8.20435 3 9V19C3 19.7956 3.31607 20.5587 3.87868 21.1213C4.44129 21.6839 5.20435 22 6 22H14C14.7956 22 15.5587 21.6839 16.1213 21.1213C16.6839 20.5587 17 19.7956 17 19V18H18C18.7956 18 19.5587 17.6839 20.1213 17.1213C20.6839 16.5587 21 15.7956 21 15V9C21 9 21 9 21 8.94ZM15 5.41L17.59 8H16C15.7348 8 15.4804 7.89464 15.2929 7.70711C15.1054 7.51957 15 7.26522 15 7V5.41ZM15 19C15 19.2652 14.8946 19.5196 14.7071 19.7071C14.5196 19.8946 14.2652 20 14 20H6C5.73478 20 5.48043 19.8946 5.29289 19.7071C5.10536 19.5196 5 19.2652 5 19V9C5 8.73478 5.10536 8.48043 5.29289 8.29289C5.48043 8.10536 5.73478 8 6 8H7V15C7 15.7956 7.31607 16.5587 7.87868 17.1213C8.44129 17.6839 9.20435 18 10 18H15V19ZM19 15C19 15.2652 18.8946 15.5196 18.7071 15.7071C18.5196 15.8946 18.2652 16 18 16H10C9.73478 16 9.48043 15.8946 9.29289 15.7071C9.10536 15.5196 9 15.2652 9 15V5C9 4.73478 9.10536 4.48043 9.29289 4.29289C9.48043 4.10536 9.73478 4 10 4H13V7C13 7.79565 13.3161 8.55871 13.8787 9.12132C14.4413 9.68393 15.2044 10 16 10H19V15Z" fill="currentColor"></path>
          </svg><span class="ms-2">Copy link</span></a>
        <div class="d-flex gap-4 justify-content-end"><a class="btn px-5 py-3 btn-dark-light" href="#">Close</a><a class="btn px-5 py-3 btn-primary" href="#">Share file</a></div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #212

Bootstrap

Trizzle

<section class="py-8">
  <div class="container">
    <div class="py-6 px-5 bg-secondary rounded-4">
      <div class="d-flex flex-wrap mb-6 align-items-center justify-content-between">
        <h6 class="fs-8 fw-semibold text-secondary-light mb-0">Statistics</h6><a class="btn d-flex align-items-center btn-dark-light text-secondary-light btn-sm py-2 px-3 fs-10" href="#"><span>View All</span>
          <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.5 12L10.5 8L6.5 4" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a>
      </div>
      <div class="pt-10 pb-4 ps-12 pe-8 bg-dark-light rounded-4">
        <div class="row align-items-center">
          <div class="col-md-5 mb-10 mb-md-0">
            <div class="row mb-n4">
              <div class="col-sm-6 mb-4">
                <div class="d-flex align-items-center">
                  <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="3" cy="3" r="3" fill="#936DFF"></circle>
                  </svg>
                  <div class="ms-3"><span class="d-block fs-9 fw-semibold text-secondary-light">$725.00</span><span class="d-block fs-10 fw-semibold text-secondary-light">Shopping</span></div>
                </div>
              </div>
              <div class="col-sm-6 mb-4">
                <div class="d-flex align-items-center">
                  <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="3" cy="3" r="3" fill="#24D164"></circle>
                  </svg>
                  <div class="ms-3"><span class="d-block fs-9 fw-semibold text-secondary-light">$725.00</span><span class="d-block fs-10 fw-semibold text-secondary-light">Food</span></div>
                </div>
              </div>
              <div class="col-sm-6 mb-4">
                <div class="d-flex align-items-center">
                  <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="3" cy="3" r="3" fill="#194BFB"></circle>
                  </svg>
                  <div class="ms-3"><span class="d-block fs-9 fw-semibold text-secondary-light">$2,350.00</span><span class="d-block fs-10 fw-semibold text-secondary-light">Home</span></div>
                </div>
              </div>
              <div class="col-sm-6 mb-4">
                <div class="d-flex align-items-center">
                  <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="3" cy="3" r="3" fill="#FACC15"></circle>
                  </svg>
                  <div class="ms-3"><span class="d-block fs-9 fw-semibold text-secondary-light">$710.00</span><span class="d-block fs-10 fw-semibold text-secondary-light">Others</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-7">
            <div class="chart px-2" data-type="radial-bar-part" data-variant="four" style="min-height: 120px; min-width: 100%;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #213

Bootstrap

Trizzle

<section class="py-8">
  <div class="container"><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#"><img class="img-fluid d-block mb-3 w-100 rounded-4" src="trizzle-assets/images/working-women-laptop.png" alt="">
      <h4 class="fs-7 fw-semibold text-light-light mb-2">Posts for Social Media</h4>
      <div class="d-flex align-items-center mb-4">
        <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="3" cy="3.5" r="3" fill="#24D164"></circle>
        </svg><span class="ms-1 fs-10 fw-medium text-success">Planning</span>
      </div>
      <div class="pt-4 border-top border-secondary border-opacity-75">
        <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
          <div class="p-2">
            <div class="d-flex">
              <div class="d-flex me-2 align-items-center p-2 bg-secondary rounded-3">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.66675 9.3333C6.884 9.55503 7.14331 9.73118 7.4295 9.85144C7.71568 9.9717 8.02299 10.0336 8.33341 10.0336C8.64384 10.0336 8.95114 9.9717 9.23733 9.85144C9.52352 9.73118 9.78283 9.55503 10.0001 9.3333L12.6667 6.66663C13.1088 6.22461 13.3571 5.62509 13.3571 4.99997C13.3571 4.37485 13.1088 3.77533 12.6667 3.3333C12.2247 2.89127 11.6252 2.64294 11.0001 2.64294C10.375 2.64294 9.77544 2.89127 9.33341 3.3333L9.00008 3.66663" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.33342 6.66665C9.11617 6.44492 8.85686 6.26876 8.57067 6.14851C8.28449 6.02825 7.97718 5.96631 7.66676 5.96631C7.35633 5.96631 7.04903 6.02825 6.76284 6.14851C6.47665 6.26876 6.21734 6.44492 6.00009 6.66665L3.33342 9.33332C2.89139 9.77534 2.64307 10.3749 2.64307 11C2.64307 11.6251 2.89139 12.2246 3.33342 12.6666C3.77545 13.1087 4.37497 13.357 5.00009 13.357C5.62521 13.357 6.22473 13.1087 6.66676 12.6666L7.00009 12.3333" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">2</span>
              </div>
              <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 12.3333L1.86667 9.7333C1.11763 8.62549 0.846662 7.31358 1.10415 6.04151C1.36163 4.76943 2.13004 3.62375 3.26651 2.81749C4.40298 2.01122 5.83017 1.59924 7.28273 1.65813C8.73528 1.71703 10.1143 2.24279 11.1635 3.13768C12.2127 4.03256 12.8606 5.23567 12.9867 6.52329C13.1128 7.81092 12.7086 9.09546 11.8492 10.1381C10.9899 11.1807 9.73377 11.9104 8.31453 12.1915C6.89529 12.4727 5.40947 12.2862 4.13333 11.6666L1 12.3333Z" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7 7V7.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.33325 7V7.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.66675 7V7.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">5</span>
              </div>
            </div>
          </div>
          <div class="p-2">
            <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""></div>
          </div>
        </div>
      </div></a></div>
</section>

Bootstrap Component #214

Bootstrap

Trizzle

<section class="py-8 bg-dark-light">
  <div class="container">
    <div class="pt-6 bg-secondary rounded-4">
      <div class="px-6 pb-6 border-bottom border-secondary-light border-opacity-25">
        <h6 class="fs-8 fw-semibold text-light mb-6">Mailing</h6>
        <div class="row mb-6">
          <div class="col-lg-6 mt-6 mt-lg-0 order-last order-lg-first">
            <div class="d-inline-block position-relative">
              <div class="position-absolute bottom-0 start-0 w-100 bg-light-dark rounded-pill" style="height: 2px;"></div>
              <div class="position-relative"><a class="btn py-5 px-7 fs-9 text-secondary-light fw-semibold border-0 border-bottom border-2 border-primary rounded-0" href="#">All</a><a class="btn py-5 px-7 fs-9 text-secondary-light fw-semibold border-0 rounded-0" href="#">Active</a><a class="btn py-5 px-7 fs-9 text-secondary-light fw-semibold border-0 rounded-0" href="#">Inactive</a><a class="btn py-5 px-7 fs-9 text-secondary-light fw-semibold border-0 rounded-0" href="#">Drafts</a></div>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="d-flex flex-column flex-sm-row gap-4 justify-content-lg-end">
              <div class="position-relative w-100 mw-sm-xs">
                <input class="form-control text-light ps-10 fs-9 bg-transparent" type="search" placeholder="Search products...">
                <button class="position-absolute top-50 start-0 ms-4 translate-middle-y btn btn-outline-secondary-light p-0 border-0 bg-transparent">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14.4733 13.5267L11.9999 11.0734C12.96 9.87633 13.4249 8.35692 13.2991 6.82759C13.1733 5.29826 12.4664 3.87525 11.3236 2.85115C10.1808 1.82706 8.68914 1.27973 7.15522 1.32171C5.62129 1.36368 4.16175 1.99177 3.0767 3.07682C1.99164 4.16187 1.36356 5.62142 1.32158 7.15534C1.27961 8.68926 1.82694 10.181 2.85103 11.3237C3.87512 12.4665 5.29814 13.1735 6.82747 13.2993C8.3568 13.4251 9.87621 12.9601 11.0733 12.0001L13.5266 14.4534C13.5886 14.5159 13.6623 14.5655 13.7436 14.5993C13.8248 14.6332 13.9119 14.6506 13.9999 14.6506C14.0879 14.6506 14.1751 14.6332 14.2563 14.5993C14.3376 14.5655 14.4113 14.5159 14.4733 14.4534C14.5934 14.3291 14.6606 14.163 14.6606 13.9901C14.6606 13.8172 14.5934 13.651 14.4733 13.5267ZM7.33327 12.0001C6.41029 12.0001 5.50804 11.7264 4.74061 11.2136C3.97318 10.7008 3.37504 9.97197 3.02183 9.11925C2.66862 8.26653 2.57621 7.32821 2.75627 6.42297C2.93634 5.51773 3.38079 4.6862 4.03344 4.03356C4.68608 3.38091 5.5176 2.93646 6.42285 2.75639C7.32809 2.57633 8.2664 2.66874 9.11913 3.02195C9.97185 3.37516 10.7007 3.9733 11.2135 4.74073C11.7262 5.50816 11.9999 6.41041 11.9999 7.33339C11.9999 8.57107 11.5083 9.75805 10.6331 10.6332C9.75793 11.5084 8.57095 12.0001 7.33327 12.0001Z" fill="currentColor"></path>
                  </svg>
                </button><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-light bg-secondary">Search</span>
              </div>
              <button class="btn py-4 px-5 btn-primary" type="submit">Create message</button>
            </div>
          </div>
        </div>
        <div class="w-100 overflow-scroll">
          <table class="table table-borderless w-100" style="min-width: max-content;">
            <thead>
              <tr><th class="p-0 bg-dark-light rounded-start-4" scope="col">
                <div class="rounded-start-4 d-flex align-items-center py-3 px-6">
                  <div class="form-check me-4">
                    <input class="form-check-input bg-transparent border-secondary" id="flexCheckDefault" type="checkbox" value="">
                  </div><span class="fs-10 fw-semibold text-secondary-light">NAME</span>
                </div>
              </th>
              <th class="p-0 bg-dark-light" scope="col">
                <div class="py-3 px-6"><span class="fs-10 fw-semibold text-secondary-light">SCHEDULE</span></div>
              </th>
              <th class="p-0 bg-dark-light" scope="col">
                <div class="py-3 px-6"><span class="fs-10 fw-semibold text-secondary-light">MODIFIED</span></div>
              </th>
              <th class="p-0 bg-dark-light" scope="col">
                <div class="py-3 px-6"><span class="fs-10 fw-semibold text-secondary-light">SENT</span></div>
              </th>
              <th class="p-0 bg-dark-light rounded-end-4" scope="col">
                <div class="py-3 px-6"><span class="fs-10 fw-semibold text-secondary-light">SENDING</span></div>
              </th>
            </tr></thead>
            <tbody>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;">
                    <div class="d-flex align-items-center justify-content-center bg-light-dark rounded-pill" style="width: 32px; height: 32px;">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.6668 2.6665H3.3335C2.80306 2.6665 2.29436 2.87722 1.91928 3.25229C1.54421 3.62736 1.3335 4.13607 1.3335 4.6665V11.3332C1.3335 11.8636 1.54421 12.3723 1.91928 12.7474C2.29436 13.1225 2.80306 13.3332 3.3335 13.3332H12.6668C13.1973 13.3332 13.706 13.1225 14.081 12.7474C14.4561 12.3723 14.6668 11.8636 14.6668 11.3332V4.6665C14.6668 4.13607 14.4561 3.62736 14.081 3.25229C13.706 2.87722 13.1973 2.6665 12.6668 2.6665ZM3.3335 3.99984H12.6668C12.8436 3.99984 13.0132 4.07008 13.1382 4.1951C13.2633 4.32012 13.3335 4.48969 13.3335 4.6665L8.00016 7.91984L2.66683 4.6665C2.66683 4.48969 2.73707 4.32012 2.86209 4.1951C2.98712 4.07008 3.15668 3.99984 3.3335 3.99984ZM13.3335 11.3332C13.3335 11.51 13.2633 11.6796 13.1382 11.8046C13.0132 11.9296 12.8436 11.9998 12.6668 11.9998H3.3335C3.15668 11.9998 2.98712 11.9296 2.86209 11.8046C2.73707 11.6796 2.66683 11.51 2.66683 11.3332V6.1865L7.6535 9.23317C7.75484 9.29168 7.8698 9.32249 7.98683 9.32249C8.10385 9.32249 8.21882 9.29168 8.32016 9.23317L13.3335 6.1865V11.3332Z" fill="#C0C8D2"></path>
                      </svg>
                    </div><span class="ms-3 fs-9 fw-medium text-light">Mailing Naming 1</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">Every 3rd day of the month</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">06/08/2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">16.5K</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-5 px-6 d-flex align-items-center justify-content-between" style="height: 64px;">
                    <div class="d-inline-flex me-4 p-1 bg-dark-light rounded-pill">
                      <button class="btn p-0 bg-white rounded-pill" style="width: 20px; height: 20px;"></button>
                      <button class="btn p-0 bg-transparent rounded-pill" style="width: 20px; height: 20px;"></button>
                    </div><a class="btn btn-outline-secondary-light p-0 border-0" href="#">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" fill="currentColor"></path>
                      </svg></a>
                  </div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;">
                    <div class="d-flex align-items-center justify-content-center bg-light-dark rounded-pill" style="width: 32px; height: 32px;">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.6668 2.6665H3.3335C2.80306 2.6665 2.29436 2.87722 1.91928 3.25229C1.54421 3.62736 1.3335 4.13607 1.3335 4.6665V11.3332C1.3335 11.8636 1.54421 12.3723 1.91928 12.7474C2.29436 13.1225 2.80306 13.3332 3.3335 13.3332H12.6668C13.1973 13.3332 13.706 13.1225 14.081 12.7474C14.4561 12.3723 14.6668 11.8636 14.6668 11.3332V4.6665C14.6668 4.13607 14.4561 3.62736 14.081 3.25229C13.706 2.87722 13.1973 2.6665 12.6668 2.6665ZM3.3335 3.99984H12.6668C12.8436 3.99984 13.0132 4.07008 13.1382 4.1951C13.2633 4.32012 13.3335 4.48969 13.3335 4.6665L8.00016 7.91984L2.66683 4.6665C2.66683 4.48969 2.73707 4.32012 2.86209 4.1951C2.98712 4.07008 3.15668 3.99984 3.3335 3.99984ZM13.3335 11.3332C13.3335 11.51 13.2633 11.6796 13.1382 11.8046C13.0132 11.9296 12.8436 11.9998 12.6668 11.9998H3.3335C3.15668 11.9998 2.98712 11.9296 2.86209 11.8046C2.73707 11.6796 2.66683 11.51 2.66683 11.3332V6.1865L7.6535 9.23317C7.75484 9.29168 7.8698 9.32249 7.98683 9.32249C8.10385 9.32249 8.21882 9.29168 8.32016 9.23317L13.3335 6.1865V11.3332Z" fill="#C0C8D2"></path>
                      </svg>
                    </div><span class="ms-3 fs-9 fw-medium text-light">Mailing Naming 1</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">Every 3rd day of the month</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">06/08/2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">16.5K</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-5 px-6 d-flex align-items-center justify-content-between" style="height: 64px;">
                    <div class="d-inline-flex me-4 p-1 bg-dark-light rounded-pill">
                      <button class="btn p-0 bg-white rounded-pill" style="width: 20px; height: 20px;"></button>
                      <button class="btn p-0 bg-transparent rounded-pill" style="width: 20px; height: 20px;"></button>
                    </div><a class="btn btn-outline-secondary-light p-0 border-0" href="#">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" fill="currentColor"></path>
                      </svg></a>
                  </div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;">
                    <div class="d-flex align-items-center justify-content-center bg-light-dark rounded-pill" style="width: 32px; height: 32px;">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.6668 2.6665H3.3335C2.80306 2.6665 2.29436 2.87722 1.91928 3.25229C1.54421 3.62736 1.3335 4.13607 1.3335 4.6665V11.3332C1.3335 11.8636 1.54421 12.3723 1.91928 12.7474C2.29436 13.1225 2.80306 13.3332 3.3335 13.3332H12.6668C13.1973 13.3332 13.706 13.1225 14.081 12.7474C14.4561 12.3723 14.6668 11.8636 14.6668 11.3332V4.6665C14.6668 4.13607 14.4561 3.62736 14.081 3.25229C13.706 2.87722 13.1973 2.6665 12.6668 2.6665ZM3.3335 3.99984H12.6668C12.8436 3.99984 13.0132 4.07008 13.1382 4.1951C13.2633 4.32012 13.3335 4.48969 13.3335 4.6665L8.00016 7.91984L2.66683 4.6665C2.66683 4.48969 2.73707 4.32012 2.86209 4.1951C2.98712 4.07008 3.15668 3.99984 3.3335 3.99984ZM13.3335 11.3332C13.3335 11.51 13.2633 11.6796 13.1382 11.8046C13.0132 11.9296 12.8436 11.9998 12.6668 11.9998H3.3335C3.15668 11.9998 2.98712 11.9296 2.86209 11.8046C2.73707 11.6796 2.66683 11.51 2.66683 11.3332V6.1865L7.6535 9.23317C7.75484 9.29168 7.8698 9.32249 7.98683 9.32249C8.10385 9.32249 8.21882 9.29168 8.32016 9.23317L13.3335 6.1865V11.3332Z" fill="#C0C8D2"></path>
                      </svg>
                    </div><span class="ms-3 fs-9 fw-medium text-light">Mailing Naming 1</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">Every 3rd day of the month</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">06/08/2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">16.5K</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-5 px-6 d-flex align-items-center justify-content-between" style="height: 64px;">
                    <div class="d-inline-flex p-1 bg-primary rounded-pill">
                      <button class="btn p-0 bg-transparent rounded-pill" style="width: 20px; height: 20px;"></button>
                      <button class="btn p-0 bg-white rounded-pill" style="width: 20px; height: 20px;"></button>
                    </div><a class="btn btn-outline-secondary-light p-0 border-0" href="#">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" fill="currentColor"></path>
                      </svg></a>
                  </div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;">
                    <div class="d-flex align-items-center justify-content-center bg-light-dark rounded-pill" style="width: 32px; height: 32px;">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.6668 2.6665H3.3335C2.80306 2.6665 2.29436 2.87722 1.91928 3.25229C1.54421 3.62736 1.3335 4.13607 1.3335 4.6665V11.3332C1.3335 11.8636 1.54421 12.3723 1.91928 12.7474C2.29436 13.1225 2.80306 13.3332 3.3335 13.3332H12.6668C13.1973 13.3332 13.706 13.1225 14.081 12.7474C14.4561 12.3723 14.6668 11.8636 14.6668 11.3332V4.6665C14.6668 4.13607 14.4561 3.62736 14.081 3.25229C13.706 2.87722 13.1973 2.6665 12.6668 2.6665ZM3.3335 3.99984H12.6668C12.8436 3.99984 13.0132 4.07008 13.1382 4.1951C13.2633 4.32012 13.3335 4.48969 13.3335 4.6665L8.00016 7.91984L2.66683 4.6665C2.66683 4.48969 2.73707 4.32012 2.86209 4.1951C2.98712 4.07008 3.15668 3.99984 3.3335 3.99984ZM13.3335 11.3332C13.3335 11.51 13.2633 11.6796 13.1382 11.8046C13.0132 11.9296 12.8436 11.9998 12.6668 11.9998H3.3335C3.15668 11.9998 2.98712 11.9296 2.86209 11.8046C2.73707 11.6796 2.66683 11.51 2.66683 11.3332V6.1865L7.6535 9.23317C7.75484 9.29168 7.8698 9.32249 7.98683 9.32249C8.10385 9.32249 8.21882 9.29168 8.32016 9.23317L13.3335 6.1865V11.3332Z" fill="#C0C8D2"></path>
                      </svg>
                    </div><span class="ms-3 fs-9 fw-medium text-light">Mailing Naming 1</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">Every 3rd day of the month</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">06/08/2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">16.5K</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-5 px-6 d-flex align-items-center justify-content-between" style="height: 64px;">
                    <div class="d-inline-flex p-1 bg-primary rounded-pill">
                      <button class="btn p-0 bg-transparent rounded-pill" style="width: 20px; height: 20px;"></button>
                      <button class="btn p-0 bg-white rounded-pill" style="width: 20px; height: 20px;"></button>
                    </div><a class="btn btn-outline-secondary-light p-0 border-0" href="#">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" fill="currentColor"></path>
                      </svg></a>
                  </div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;">
                    <div class="d-flex align-items-center justify-content-center bg-light-dark rounded-pill" style="width: 32px; height: 32px;">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.6668 2.6665H3.3335C2.80306 2.6665 2.29436 2.87722 1.91928 3.25229C1.54421 3.62736 1.3335 4.13607 1.3335 4.6665V11.3332C1.3335 11.8636 1.54421 12.3723 1.91928 12.7474C2.29436 13.1225 2.80306 13.3332 3.3335 13.3332H12.6668C13.1973 13.3332 13.706 13.1225 14.081 12.7474C14.4561 12.3723 14.6668 11.8636 14.6668 11.3332V4.6665C14.6668 4.13607 14.4561 3.62736 14.081 3.25229C13.706 2.87722 13.1973 2.6665 12.6668 2.6665ZM3.3335 3.99984H12.6668C12.8436 3.99984 13.0132 4.07008 13.1382 4.1951C13.2633 4.32012 13.3335 4.48969 13.3335 4.6665L8.00016 7.91984L2.66683 4.6665C2.66683 4.48969 2.73707 4.32012 2.86209 4.1951C2.98712 4.07008 3.15668 3.99984 3.3335 3.99984ZM13.3335 11.3332C13.3335 11.51 13.2633 11.6796 13.1382 11.8046C13.0132 11.9296 12.8436 11.9998 12.6668 11.9998H3.3335C3.15668 11.9998 2.98712 11.9296 2.86209 11.8046C2.73707 11.6796 2.66683 11.51 2.66683 11.3332V6.1865L7.6535 9.23317C7.75484 9.29168 7.8698 9.32249 7.98683 9.32249C8.10385 9.32249 8.21882 9.29168 8.32016 9.23317L13.3335 6.1865V11.3332Z" fill="#C0C8D2"></path>
                      </svg>
                    </div><span class="ms-3 fs-9 fw-medium text-light">Mailing Naming 1</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">Every 3rd day of the month</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">06/08/2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">16.5K</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-5 px-6 d-flex align-items-center justify-content-between" style="height: 64px;">
                    <div class="d-inline-flex me-4 p-1 bg-dark-light rounded-pill">
                      <button class="btn p-0 bg-white rounded-pill" style="width: 20px; height: 20px;"></button>
                      <button class="btn p-0 bg-transparent rounded-pill" style="width: 20px; height: 20px;"></button>
                    </div><a class="btn btn-outline-secondary-light p-0 border-0" href="#">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" fill="currentColor"></path>
                      </svg></a>
                  </div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;">
                    <div class="d-flex align-items-center justify-content-center bg-light-dark rounded-pill" style="width: 32px; height: 32px;">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.6668 2.6665H3.3335C2.80306 2.6665 2.29436 2.87722 1.91928 3.25229C1.54421 3.62736 1.3335 4.13607 1.3335 4.6665V11.3332C1.3335 11.8636 1.54421 12.3723 1.91928 12.7474C2.29436 13.1225 2.80306 13.3332 3.3335 13.3332H12.6668C13.1973 13.3332 13.706 13.1225 14.081 12.7474C14.4561 12.3723 14.6668 11.8636 14.6668 11.3332V4.6665C14.6668 4.13607 14.4561 3.62736 14.081 3.25229C13.706 2.87722 13.1973 2.6665 12.6668 2.6665ZM3.3335 3.99984H12.6668C12.8436 3.99984 13.0132 4.07008 13.1382 4.1951C13.2633 4.32012 13.3335 4.48969 13.3335 4.6665L8.00016 7.91984L2.66683 4.6665C2.66683 4.48969 2.73707 4.32012 2.86209 4.1951C2.98712 4.07008 3.15668 3.99984 3.3335 3.99984ZM13.3335 11.3332C13.3335 11.51 13.2633 11.6796 13.1382 11.8046C13.0132 11.9296 12.8436 11.9998 12.6668 11.9998H3.3335C3.15668 11.9998 2.98712 11.9296 2.86209 11.8046C2.73707 11.6796 2.66683 11.51 2.66683 11.3332V6.1865L7.6535 9.23317C7.75484 9.29168 7.8698 9.32249 7.98683 9.32249C8.10385 9.32249 8.21882 9.29168 8.32016 9.23317L13.3335 6.1865V11.3332Z" fill="#C0C8D2"></path>
                      </svg>
                    </div><span class="ms-3 fs-9 fw-medium text-light">Mailing Naming 1</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">Every 3rd day of the month</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">06/08/2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">16.5K</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-5 px-6 d-flex align-items-center justify-content-between" style="height: 64px;">
                    <div class="d-inline-flex p-1 bg-primary rounded-pill">
                      <button class="btn p-0 bg-transparent rounded-pill" style="width: 20px; height: 20px;"></button>
                      <button class="btn p-0 bg-white rounded-pill" style="width: 20px; height: 20px;"></button>
                    </div><a class="btn btn-outline-secondary-light p-0 border-0" href="#">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" fill="currentColor"></path>
                      </svg></a>
                  </div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;">
                    <div class="d-flex align-items-center justify-content-center bg-light-dark rounded-pill" style="width: 32px; height: 32px;">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.6668 2.6665H3.3335C2.80306 2.6665 2.29436 2.87722 1.91928 3.25229C1.54421 3.62736 1.3335 4.13607 1.3335 4.6665V11.3332C1.3335 11.8636 1.54421 12.3723 1.91928 12.7474C2.29436 13.1225 2.80306 13.3332 3.3335 13.3332H12.6668C13.1973 13.3332 13.706 13.1225 14.081 12.7474C14.4561 12.3723 14.6668 11.8636 14.6668 11.3332V4.6665C14.6668 4.13607 14.4561 3.62736 14.081 3.25229C13.706 2.87722 13.1973 2.6665 12.6668 2.6665ZM3.3335 3.99984H12.6668C12.8436 3.99984 13.0132 4.07008 13.1382 4.1951C13.2633 4.32012 13.3335 4.48969 13.3335 4.6665L8.00016 7.91984L2.66683 4.6665C2.66683 4.48969 2.73707 4.32012 2.86209 4.1951C2.98712 4.07008 3.15668 3.99984 3.3335 3.99984ZM13.3335 11.3332C13.3335 11.51 13.2633 11.6796 13.1382 11.8046C13.0132 11.9296 12.8436 11.9998 12.6668 11.9998H3.3335C3.15668 11.9998 2.98712 11.9296 2.86209 11.8046C2.73707 11.6796 2.66683 11.51 2.66683 11.3332V6.1865L7.6535 9.23317C7.75484 9.29168 7.8698 9.32249 7.98683 9.32249C8.10385 9.32249 8.21882 9.29168 8.32016 9.23317L13.3335 6.1865V11.3332Z" fill="#C0C8D2"></path>
                      </svg>
                    </div><span class="ms-3 fs-9 fw-medium text-light">Mailing Naming 1</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">Every 3rd day of the month</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">06/08/2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">16.5K</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-5 px-6 d-flex align-items-center justify-content-between" style="height: 64px;">
                    <div class="d-inline-flex me-4 p-1 bg-dark-light rounded-pill">
                      <button class="btn p-0 bg-white rounded-pill" style="width: 20px; height: 20px;"></button>
                      <button class="btn p-0 bg-transparent rounded-pill" style="width: 20px; height: 20px;"></button>
                    </div><a class="btn btn-outline-secondary-light p-0 border-0" href="#">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" fill="currentColor"></path>
                      </svg></a>
                  </div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;">
                    <div class="d-flex align-items-center justify-content-center bg-light-dark rounded-pill" style="width: 32px; height: 32px;">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.6668 2.6665H3.3335C2.80306 2.6665 2.29436 2.87722 1.91928 3.25229C1.54421 3.62736 1.3335 4.13607 1.3335 4.6665V11.3332C1.3335 11.8636 1.54421 12.3723 1.91928 12.7474C2.29436 13.1225 2.80306 13.3332 3.3335 13.3332H12.6668C13.1973 13.3332 13.706 13.1225 14.081 12.7474C14.4561 12.3723 14.6668 11.8636 14.6668 11.3332V4.6665C14.6668 4.13607 14.4561 3.62736 14.081 3.25229C13.706 2.87722 13.1973 2.6665 12.6668 2.6665ZM3.3335 3.99984H12.6668C12.8436 3.99984 13.0132 4.07008 13.1382 4.1951C13.2633 4.32012 13.3335 4.48969 13.3335 4.6665L8.00016 7.91984L2.66683 4.6665C2.66683 4.48969 2.73707 4.32012 2.86209 4.1951C2.98712 4.07008 3.15668 3.99984 3.3335 3.99984ZM13.3335 11.3332C13.3335 11.51 13.2633 11.6796 13.1382 11.8046C13.0132 11.9296 12.8436 11.9998 12.6668 11.9998H3.3335C3.15668 11.9998 2.98712 11.9296 2.86209 11.8046C2.73707 11.6796 2.66683 11.51 2.66683 11.3332V6.1865L7.6535 9.23317C7.75484 9.29168 7.8698 9.32249 7.98683 9.32249C8.10385 9.32249 8.21882 9.29168 8.32016 9.23317L13.3335 6.1865V11.3332Z" fill="#C0C8D2"></path>
                      </svg>
                    </div><span class="ms-3 fs-9 fw-medium text-light">Mailing Naming 1</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">Every 3rd day of the month</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">06/08/2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="d-flex align-items-center py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">16.5K</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-5 px-6 d-flex align-items-center justify-content-between" style="height: 64px;">
                    <div class="d-inline-flex p-1 bg-primary rounded-pill">
                      <button class="btn p-0 bg-transparent rounded-pill" style="width: 20px; height: 20px;"></button>
                      <button class="btn p-0 bg-white rounded-pill" style="width: 20px; height: 20px;"></button>
                    </div><a class="btn btn-outline-secondary-light p-0 border-0" href="#">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" fill="currentColor"></path>
                      </svg></a>
                  </div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-4 px-6 d-flex align-items-center" style="height: 64px;">
                    <div class="d-flex align-items-center justify-content-center bg-light-dark rounded-pill" style="width: 32px; height: 32px;">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.6668 2.6665H3.3335C2.80306 2.6665 2.29436 2.87722 1.91928 3.25229C1.54421 3.62736 1.3335 4.13607 1.3335 4.6665V11.3332C1.3335 11.8636 1.54421 12.3723 1.91928 12.7474C2.29436 13.1225 2.80306 13.3332 3.3335 13.3332H12.6668C13.1973 13.3332 13.706 13.1225 14.081 12.7474C14.4561 12.3723 14.6668 11.8636 14.6668 11.3332V4.6665C14.6668 4.13607 14.4561 3.62736 14.081 3.25229C13.706 2.87722 13.1973 2.6665 12.6668 2.6665ZM3.3335 3.99984H12.6668C12.8436 3.99984 13.0132 4.07008 13.1382 4.1951C13.2633 4.32012 13.3335 4.48969 13.3335 4.6665L8.00016 7.91984L2.66683 4.6665C2.66683 4.48969 2.73707 4.32012 2.86209 4.1951C2.98712 4.07008 3.15668 3.99984 3.3335 3.99984ZM13.3335 11.3332C13.3335 11.51 13.2633 11.6796 13.1382 11.8046C13.0132 11.9296 12.8436 11.9998 12.6668 11.9998H3.3335C3.15668 11.9998 2.98712 11.9296 2.86209 11.8046C2.73707 11.6796 2.66683 11.51 2.66683 11.3332V6.1865L7.6535 9.23317C7.75484 9.29168 7.8698 9.32249 7.98683 9.32249C8.10385 9.32249 8.21882 9.29168 8.32016 9.23317L13.3335 6.1865V11.3332Z" fill="#C0C8D2"></path>
                      </svg>
                    </div><span class="ms-3 fs-9 fw-medium text-light">Mailing Naming 1</span>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">Every 3rd day of the month</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">06/08/2022</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-5 px-6" style="height: 64px;"><span class="fs-9 fw-medium text-light">16.5K</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-5 px-6 d-flex align-items-center justify-content-between" style="height: 64px;">
                    <div class="d-inline-flex me-4 p-1 bg-dark-light rounded-pill">
                      <button class="btn p-0 bg-white rounded-pill" style="width: 20px; height: 20px;"></button>
                      <button class="btn p-0 bg-transparent rounded-pill" style="width: 20px; height: 20px;"></button>
                    </div><a class="btn btn-outline-secondary-light p-0 border-0" href="#">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" fill="currentColor"></path>
                      </svg></a>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="py-8 px-6">
        <div class="d-flex flex-column flex-sm-row align-items-center justify-content-between">
          <div class="mt-5 mt-sm-0 order-last order-sm-first">
            <p class="fs-9 fw-medium text-secondary-light mb-0"><span>Showing</span> <span class="text-light">1</span> <span>to</span> <span class="text-light">10</span> <span>of 20 results</span></p>
          </div>
          <div class="d-flex align-items-center"><a class="btn me-3 btn-sm fs-10 btn-dark-light text-secondary-light" href="#">Previous</a><a class="btn btn-sm fs-10 btn-primary" href="#">Next</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #215

Bootstrap

Trizzle

<section class="py-8 bg-dark-light">
  <div class="container">
    <div class="d-flex mb-8 flex-column flex-sm-row gap-6">
      <div class="position-relative w-100 mw-sm-xs">
        <input class="form-control text-light fs-9 bg-transparent" type="search" placeholder="Job Title, Company or Keywords"><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-light bg-dark-light">Job Keywords</span>
      </div>
      <div class="position-relative w-100 mw-sm-xs">
        <input class="form-control text-light fs-9 bg-transparent" type="search" placeholder="Select location"><span class="position-absolute top-0 start-0 ms-3 px-1 fs-10 translate-middle-y fw-medium text-light bg-dark-light">Location</span>
      </div>
      <button class="btn py-4 px-5 px-md-10 fs-9 btn-primary" type="submit">Search</button>
    </div>
    <div class="row">
      <div class="col-md-6 col-lg-4 mb-6">
        <div class="position-relative p-6 bg-secondary rounded-4">
          <button class="position-absolute top-0 end-0 m-6 btn btn-outline-secondary-light p-0 bg-transparent border-0">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <div class="d-inline-flex mb-6 align-items-center justify-content-center bg-info rounded-4" style="width: 64px; height: 64px;">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_143_860)">
                <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
                <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
                <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              </g>
            </svg>
          </div>
          <h6 class="fs-6 fw-bold text-white mb-3">Front-End Developer</h6>
          <p class="mw-xs text-secondary-light mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="mb-6"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
            <div class="d-inline-flex ms-n4 align-items-center justify-content-center bg-light-dark border border-secondary-dark rounded-pill" style="width: 32px; height: 32px;"><span class="fs-10 fw-semibold text-secondary-light">+2</span></div><span class="ms-2 fs-10 text-secondary-light">Five friends work here</span>
          </div><a class="btn fs-9 btn-primary w-100" href="#">Apply Now</a>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-6">
        <div class="position-relative p-6 bg-secondary rounded-4">
          <button class="position-absolute top-0 end-0 m-6 btn btn-outline-secondary-light p-0 bg-transparent border-0">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <div class="d-inline-flex mb-6 align-items-center justify-content-center bg-info rounded-4" style="width: 64px; height: 64px;">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_143_860)">
                <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
                <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
                <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              </g>
            </svg>
          </div>
          <h6 class="fs-6 fw-bold text-white mb-3">Front-End Developer</h6>
          <p class="mw-xs text-secondary-light mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="mb-6"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
            <div class="d-inline-flex ms-n4 align-items-center justify-content-center bg-light-dark border border-secondary-dark rounded-pill" style="width: 32px; height: 32px;"><span class="fs-10 fw-semibold text-secondary-light">+2</span></div><span class="ms-2 fs-10 text-secondary-light">Five friends work here</span>
          </div><a class="btn fs-9 btn-primary w-100" href="#">Apply Now</a>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-6">
        <div class="position-relative p-6 bg-secondary rounded-4">
          <button class="position-absolute top-0 end-0 m-6 btn btn-outline-secondary-light p-0 bg-transparent border-0">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <div class="d-inline-flex mb-6 align-items-center justify-content-center bg-info rounded-4" style="width: 64px; height: 64px;">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_143_860)">
                <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
                <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
                <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              </g>
            </svg>
          </div>
          <h6 class="fs-6 fw-bold text-white mb-3">Front-End Developer</h6>
          <p class="mw-xs text-secondary-light mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="mb-6"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
            <div class="d-inline-flex ms-n4 align-items-center justify-content-center bg-light-dark border border-secondary-dark rounded-pill" style="width: 32px; height: 32px;"><span class="fs-10 fw-semibold text-secondary-light">+2</span></div><span class="ms-2 fs-10 text-secondary-light">Five friends work here</span>
          </div><a class="btn fs-9 btn-primary w-100" href="#">Apply Now</a>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-6">
        <div class="position-relative p-6 bg-secondary rounded-4">
          <button class="position-absolute top-0 end-0 m-6 btn btn-outline-secondary-light p-0 bg-transparent border-0">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <div class="d-inline-flex mb-6 align-items-center justify-content-center bg-info rounded-4" style="width: 64px; height: 64px;">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_143_860)">
                <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
                <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
                <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              </g>
            </svg>
          </div>
          <h6 class="fs-6 fw-bold text-white mb-3">Front-End Developer</h6>
          <p class="mw-xs text-secondary-light mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="mb-6"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
            <div class="d-inline-flex ms-n4 align-items-center justify-content-center bg-light-dark border border-secondary-dark rounded-pill" style="width: 32px; height: 32px;"><span class="fs-10 fw-semibold text-secondary-light">+2</span></div><span class="ms-2 fs-10 text-secondary-light">Five friends work here</span>
          </div><a class="btn fs-9 btn-primary w-100" href="#">Apply Now</a>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-6">
        <div class="position-relative p-6 bg-secondary rounded-4">
          <button class="position-absolute top-0 end-0 m-6 btn btn-outline-secondary-light p-0 bg-transparent border-0">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <div class="d-inline-flex mb-6 align-items-center justify-content-center bg-info rounded-4" style="width: 64px; height: 64px;">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_143_860)">
                <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
                <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
                <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              </g>
            </svg>
          </div>
          <h6 class="fs-6 fw-bold text-white mb-3">Front-End Developer</h6>
          <p class="mw-xs text-secondary-light mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="mb-6"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
            <div class="d-inline-flex ms-n4 align-items-center justify-content-center bg-light-dark border border-secondary-dark rounded-pill" style="width: 32px; height: 32px;"><span class="fs-10 fw-semibold text-secondary-light">+2</span></div><span class="ms-2 fs-10 text-secondary-light">Five friends work here</span>
          </div><a class="btn fs-9 btn-primary w-100" href="#">Apply Now</a>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-6">
        <div class="position-relative p-6 bg-secondary rounded-4">
          <button class="position-absolute top-0 end-0 m-6 btn btn-outline-secondary-light p-0 bg-transparent border-0">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <div class="d-inline-flex mb-6 align-items-center justify-content-center bg-info rounded-4" style="width: 64px; height: 64px;">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_143_860)">
                <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
                <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
                <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              </g>
            </svg>
          </div>
          <h6 class="fs-6 fw-bold text-white mb-3">Front-End Developer</h6>
          <p class="mw-xs text-secondary-light mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="mb-6"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
            <div class="d-inline-flex ms-n4 align-items-center justify-content-center bg-light-dark border border-secondary-dark rounded-pill" style="width: 32px; height: 32px;"><span class="fs-10 fw-semibold text-secondary-light">+2</span></div><span class="ms-2 fs-10 text-secondary-light">Five friends work here</span>
          </div><a class="btn fs-9 btn-primary w-100" href="#">Apply Now</a>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-6">
        <div class="position-relative p-6 bg-secondary rounded-4">
          <button class="position-absolute top-0 end-0 m-6 btn btn-outline-secondary-light p-0 bg-transparent border-0">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <div class="d-inline-flex mb-6 align-items-center justify-content-center bg-info rounded-4" style="width: 64px; height: 64px;">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_143_860)">
                <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
                <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
                <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              </g>
            </svg>
          </div>
          <h6 class="fs-6 fw-bold text-white mb-3">Front-End Developer</h6>
          <p class="mw-xs text-secondary-light mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="mb-6"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
            <div class="d-inline-flex ms-n4 align-items-center justify-content-center bg-light-dark border border-secondary-dark rounded-pill" style="width: 32px; height: 32px;"><span class="fs-10 fw-semibold text-secondary-light">+2</span></div><span class="ms-2 fs-10 text-secondary-light">Five friends work here</span>
          </div><a class="btn fs-9 btn-primary w-100" href="#">Apply Now</a>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-6">
        <div class="position-relative p-6 bg-secondary rounded-4">
          <button class="position-absolute top-0 end-0 m-6 btn btn-outline-secondary-light p-0 bg-transparent border-0">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <div class="d-inline-flex mb-6 align-items-center justify-content-center bg-info rounded-4" style="width: 64px; height: 64px;">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_143_860)">
                <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
                <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
                <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              </g>
            </svg>
          </div>
          <h6 class="fs-6 fw-bold text-white mb-3">Front-End Developer</h6>
          <p class="mw-xs text-secondary-light mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="mb-6"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
            <div class="d-inline-flex ms-n4 align-items-center justify-content-center bg-light-dark border border-secondary-dark rounded-pill" style="width: 32px; height: 32px;"><span class="fs-10 fw-semibold text-secondary-light">+2</span></div><span class="ms-2 fs-10 text-secondary-light">Five friends work here</span>
          </div><a class="btn fs-9 btn-primary w-100" href="#">Apply Now</a>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-6">
        <div class="position-relative p-6 bg-secondary rounded-4">
          <button class="position-absolute top-0 end-0 m-6 btn btn-outline-secondary-light p-0 bg-transparent border-0">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <div class="d-inline-flex mb-6 align-items-center justify-content-center bg-info rounded-4" style="width: 64px; height: 64px;">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_143_860)">
                <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
                <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
                <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              </g>
            </svg>
          </div>
          <h6 class="fs-6 fw-bold text-white mb-3">Front-End Developer</h6>
          <p class="mw-xs text-secondary-light mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="mb-6"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="img-fluid ms-n4 rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
            <div class="d-inline-flex ms-n4 align-items-center justify-content-center bg-light-dark border border-secondary-dark rounded-pill" style="width: 32px; height: 32px;"><span class="fs-10 fw-semibold text-secondary-light">+2</span></div><span class="ms-2 fs-10 text-secondary-light">Five friends work here</span>
          </div><a class="btn fs-9 btn-primary w-100" href="#">Apply Now</a>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #216

Bootstrap

Trizzle

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark-light">
    <div class="container position-relative" type="button" aria-controls="nav01" aria-expanded="false"><a class="navbar-brand" href="#"><img class="img-fluid" src="trizzle-assets/logos/trizzle-logo.svg" alt=""></a>
      <div class="d-none d-md-block w-100 mw-xs mw-lg-sm position-absolute top-50 start-50 translate-middle">
        <div class="position-relative">
          <button class="position-absolute top-50 start-0 ms-4 translate-middle-y btn p-0 border-0">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.4733 13.5267L11.9999 11.0733C12.96 9.87627 13.4249 8.35686 13.2991 6.82753C13.1733 5.2982 12.4664 3.87519 11.3236 2.85109C10.1808 1.827 8.68914 1.27967 7.15522 1.32164C5.62129 1.36362 4.16175 1.99171 3.0767 3.07676C1.99164 4.16181 1.36356 5.62136 1.32158 7.15528C1.27961 8.6892 1.82694 10.1809 2.85103 11.3237C3.87512 12.4664 5.29814 13.1734 6.82747 13.2992C8.3568 13.425 9.87621 12.9601 11.0733 12L13.5266 14.4533C13.5886 14.5158 13.6623 14.5654 13.7436 14.5993C13.8248 14.6331 13.9119 14.6505 13.9999 14.6505C14.0879 14.6505 14.1751 14.6331 14.2563 14.5993C14.3376 14.5654 14.4113 14.5158 14.4733 14.4533C14.5934 14.329 14.6606 14.1629 14.6606 13.99C14.6606 13.8171 14.5934 13.651 14.4733 13.5267ZM7.33327 12C6.41029 12 5.50804 11.7263 4.74061 11.2135C3.97318 10.7007 3.37504 9.97191 3.02183 9.11919C2.66862 8.26646 2.57621 7.32815 2.75627 6.42291C2.93634 5.51766 3.38079 4.68614 4.03344 4.0335C4.68608 3.38085 5.5176 2.9364 6.42285 2.75633C7.32809 2.57627 8.2664 2.66868 9.11913 3.02189C9.97185 3.3751 10.7007 3.97324 11.2135 4.74067C11.7262 5.5081 11.9999 6.41035 11.9999 7.33333C11.9999 8.57101 11.5083 9.75799 10.6331 10.6332C9.75793 11.5083 8.57095 12 7.33327 12Z" fill="#3D485B"></path>
            </svg>
          </button>
          <input class="w-100 mw-md ps-10 form-control fs-9 fw-medium bg-transparent" type="search" placeholder="Search...">
        </div>
      </div>
      <div class="d-none d-xl-flex align-items-center ms-auto"><a class="btn border-0 p-0 me-6" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V17C2 17.7956 2.31607 18.5587 2.87868 19.1213C3.44129 19.6839 4.20435 20 5 20H19C19.7956 20 20.5587 19.6839 21.1213 19.1213C21.6839 18.5587 22 17.7956 22 17V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4ZM5 6H19C19.2652 6 19.5196 6.10536 19.7071 6.29289C19.8946 6.48043 20 6.73478 20 7L12 11.88L4 7C4 6.73478 4.10536 6.48043 4.29289 6.29289C4.48043 6.10536 4.73478 6 5 6ZM20 17C20 17.2652 19.8946 17.5196 19.7071 17.7071C19.5196 17.8946 19.2652 18 19 18H5C4.73478 18 4.48043 17.8946 4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17V9.28L11.48 13.85C11.632 13.9378 11.8045 13.984 11.98 13.984C12.1555 13.984 12.328 13.9378 12.48 13.85L20 9.28V17Z" fill="#3D485B"></path>
          </svg></a><a class="btn border-0 p-0 me-6" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 13.18V10C17.9986 8.58312 17.4958 7.21247 16.5806 6.13077C15.6655 5.04908 14.3971 4.32615 13 4.09V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V4.09C9.60294 4.32615 8.33452 5.04908 7.41939 6.13077C6.50425 7.21247 6.00144 8.58312 6 10V13.18C5.41645 13.3863 4.911 13.7681 4.55294 14.2729C4.19488 14.7778 4.00174 15.3811 4 16V18C4 18.2652 4.10536 18.5196 4.29289 18.7071C4.48043 18.8946 4.73478 19 5 19H8.14C8.37028 19.8474 8.873 20.5954 9.5706 21.1287C10.2682 21.6621 11.1219 21.951 12 21.951C12.8781 21.951 13.7318 21.6621 14.4294 21.1287C15.127 20.5954 15.6297 19.8474 15.86 19H19C19.2652 19 19.5196 18.8946 19.7071 18.7071C19.8946 18.5196 20 18.2652 20 18V16C19.9983 15.3811 19.8051 14.7778 19.4471 14.2729C19.089 13.7681 18.5835 13.3863 18 13.18ZM8 10C8 8.93913 8.42143 7.92172 9.17157 7.17157C9.92172 6.42143 10.9391 6 12 6C13.0609 6 14.0783 6.42143 14.8284 7.17157C15.5786 7.92172 16 8.93913 16 10V13H8V10ZM12 20C11.651 19.9979 11.3086 19.9045 11.0068 19.7291C10.7051 19.5536 10.4545 19.3023 10.28 19H13.72C13.5455 19.3023 13.2949 19.5536 12.9932 19.7291C12.6914 19.9045 12.349 19.9979 12 20ZM18 17H6V16C6 15.7348 6.10536 15.4804 6.29289 15.2929C6.48043 15.1054 6.73478 15 7 15H17C17.2652 15 17.5196 15.1054 17.7071 15.2929C17.8946 15.4804 18 15.7348 18 16V17Z" fill="#3D485B"></path>
          </svg></a><a class="btn border-0 d-flex align-items-center p-0" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-4 fw-bold text-white">John Doe</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 6L8 10L12 6" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <button class="d-block d-xl-none navbar-burger navbar-toggler py-1 px-2 border-0 rounded-1">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark-light bg-opacity-25"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-8 pb-10 px-8 bg-dark-light overflow-auto">
      <div class="d-flex align-items-center justify-content-between mb-16"><a class="inline-flex items-center" href="#"><img class="img-fluid" src="trizzle-assets/logos/trizzle-logo.svg" alt=""></a><a class="navbar-close text-light" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">
            <path d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z" fill="currentColor"></path>
          </svg></a></div>
      <ul class="list-unstyled mb-10">
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Overview</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Analytics</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Products</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light d-flex align-items-center" aria-current="page" href="#"><span>Orders</span>
            <div class="ms-2 d-flex align-items-center justify-content-center bg-primary rounded-pill text-white fs-10" style="width: 22px; height: 22px;">4</div></a></li>
        <li><a class="btn p-0 btn-link text-light" href="#">Customers</a></li>
      </ul><a class="btn mt-auto border-0 d-flex align-items-center p-0" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-4 fw-bold text-white">John Doe</span>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M4 6L8 10L12 6" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a>
    </nav>
  </div>
</section>

Bootstrap Component #217

Bootstrap

Trizzle

<section class="py-8">
  <div class="container">
    <div class="py-6 px-5 bg-secondary rounded-4">
      <div class="d-md-flex mb-6 flex-wrap align-items-center justify-content-between">
        <h6 class="fs-8 fw-semibold text-secondary-light mb-4 mb-md-0">Latest Sales</h6>
        <div class="d-sm-flex align-items-center">
          <div class="d-flex align-items-center mb-2 mb-sm-0 me-sm-4">
            <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="4" cy="4" r="4" fill="#2563EB"></circle>
            </svg><span class="ms-2 fs-10 fw-semibold text-secondary-light">This year</span>
          </div>
          <div class="d-flex mb-4 mb-sm-0 me-sm-4 align-items-center">
            <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="4" cy="4" r="4" fill="#936DFF"></circle>
            </svg><span class="ms-2 fs-10 fw-semibold text-secondary-light">Last year</span>
          </div>
          <div class="position-relative bg-dark-light rounded-4"><span class="position-absolute top-50 end-0 me-2 translate-middle-y">
              <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.5 6L8.5 10L12.5 6" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span>
            <select class="position-relative form-select py-3 ps-3 pe-8 fs-10 fw-semibold text-secondary-light bg-transparent border-0" name="" id="">
              <option value="1">Last 7 days</option>
              <option value="1">14 Days</option>
              <option value="1">21 Days</option>
            </select>
          </div>
        </div>
      </div>
      <div class="chart" data-type="columns-thin" data-variant="two" style="min-height: 200px;"></div>
    </div>
  </div>
</section>

Bootstrap Component #218

Bootstrap

Trizzle

<section class="py-8">
  <div class="container">
    <div class="bg-dark-light py-4 px-6 rounded-3">
      <div class="d-flex flex-column flex-sm-row align-items-center justify-content-between">
        <div class="mt-5 mt-sm-0 order-last order-sm-first">
          <p class="fs-9 fw-medium text-light-dark mb-0"><span>Showing</span><span class="text-light">1</span><span>to</span><span class="text-light">10</span><span>of 20 results</span></p>
        </div>
        <div class="d-flex align-items-center"><a class="btn me-3 btn-sm fs-10 btn-secondary text-light-dark" href="#">Previous</a><a class="btn btn-sm fs-10 btn-primary" href="#">Next</a></div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #219

Bootstrap

Trizzle

<section class="py-8">
  <div class="container"><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#">
      <h4 class="fs-7 fw-semibold text-light-light mb-2">Shuffle Improvements</h4>
      <div class="d-flex align-items-center mb-4">
        <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="3" cy="3.5" r="3" fill="#24D164"></circle>
        </svg><span class="ms-1 fs-10 fw-medium text-success">Planning</span>
      </div><img class="img-fluid d-block mb-3 w-100 rounded-4" src="trizzle-assets/images/laptop-photo-placeholder.png" alt="">
      <p class="fs-10 text-secondary-light lh-sm mb-4">This is an example task that can be used within a Kanban system.</p>
      <div class="pt-4 border-top border-secondary border-opacity-75">
        <div class="d-flex flex-wrap align-items-center justify-content-between mx-n2">
          <div class="p-2">
            <div class="d-flex align-items-center p-2 bg-secondary rounded-3">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg><span class="ms-2 fs-10 lh-sm fw-medium text-secondary-light">Jul 03</span>
            </div>
          </div>
          <div class="p-2">
            <div class="d-flex h-100 align-items-center"><img class="img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-men-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-circle-border.png" alt=""></div>
          </div>
        </div>
      </div></a></div>
</section>

Bootstrap Component #220

Bootstrap

Trizzle

<section>
  <div class="position-fixed top-0 start-0 end-0 bottom-0 d-flex align-items-center w-100 h-100 p-4 bg-secondary bg-opacity-75 overflow-auto">
    <div class="mw-xl w-100 mx-auto p-6 bg-secondary rounded-2 overflow-hidden"><img class="img-fluid d-block mb-8 w-100" src="trizzle-assets/images/placeholder-modal-dashboard.png" alt="">
      <div class="mw-sm mx-auto mb-8 text-center">
        <h6 class="fs-5 fw-semibold text-light mb-4">Welcome to your dashboard</h6>
        <p class="text-secondary-light mb-6">We’re glad to have you onboard. Here are some quick tips to get you up and running.</p>
        <div class="d-flex align-items-center justify-content-center gap-2">
          <button class="btn p-0 border-0">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
              <circle cx="6" cy="6" r="6" fill="#1744E2"></circle>
            </svg>
          </button>
          <button class="btn p-0 border-0">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
              <circle cx="6" cy="6" r="6" fill="#1E2431"></circle>
            </svg>
          </button>
          <button class="btn p-0 border-0">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
              <circle cx="6" cy="6" r="6" fill="#1E2431"></circle>
            </svg>
          </button>
          <button class="btn p-0 border-0">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
              <circle cx="6" cy="6" r="6" fill="#1E2431"></circle>
            </svg>
          </button>
          <button class="btn p-0 border-0">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
              <circle cx="6" cy="6" r="6" fill="#1E2431"></circle>
            </svg>
          </button>
        </div>
      </div>
      <div class="d-flex gap-4 justify-content-end"><a class="btn px-5 py-3 w-100 btn-dark-light" href="#">Skip</a><a class="btn px-5 py-3 w-100 btn-primary" href="#">Next</a></div>
    </div>
  </div>
</section>

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

UI Components – Trizzle Library

Framework

UI Library

Components

Bootstrap Component #201

Bootstrap Component #202

Bootstrap Component #203

Your next website starts here

Bootstrap Component #204

Bootstrap Component #205

Bootstrap Component #206

Bootstrap Component #207

Bootstrap Component #208

Bootstrap Component #209

Bootstrap Component #210

Bootstrap Component #211

Bootstrap Component #212

Bootstrap Component #213

Bootstrap Component #214

Bootstrap Component #215

Bootstrap Component #216

Bootstrap Component #217

Bootstrap Component #218

Bootstrap Component #219

Bootstrap Component #220

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company