UI Components in Trizzle library

Tailwind Component #141

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-red-700 rounded-lg border border-red-500">
      <div class="flex w-full h-full items-center justify-between">
        <div class="flex items-center pr-6">
          <span class="flex-shrink-0 self-start">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 12C9.75278 12 9.5111 12.0733 9.30554 12.2107C9.09998 12.348 8.93976 12.5432 8.84516 12.7716C8.75055 13.0001 8.72579 13.2514 8.77402 13.4939C8.82225 13.7363 8.94131 13.9591 9.11612 14.1339C9.29094 14.3087 9.51367 14.4277 9.75614 14.476C9.99862 14.5242 10.25 14.4995 10.4784 14.4049C10.7068 14.3102 10.902 14.15 11.0393 13.9445C11.1767 13.7389 11.25 13.4972 11.25 13.25C11.25 12.9185 11.1183 12.6005 10.8839 12.3661C10.6495 12.1317 10.3315 12 10 12ZM10 10.5C10.2652 10.5 10.5196 10.3946 10.7071 10.2071C10.8946 10.0196 11 9.76522 11 9.5V6.5C11 6.23478 10.8946 5.98043 10.7071 5.79289C10.5196 5.60536 10.2652 5.5 10 5.5C9.73479 5.5 9.48043 5.60536 9.2929 5.79289C9.10536 5.98043 9 6.23478 9 6.5V9.5C9 9.76522 9.10536 10.0196 9.2929 10.2071C9.48043 10.3946 9.73479 10.5 10 10.5ZM10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34874 18.9425 4.80691 17.0678 2.93219C15.1931 1.05746 12.6513 0.00294858 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C17.9976 12.121 17.1539 14.1544 15.6542 15.6542C14.1544 17.1539 12.121 17.9976 10 18Z" fill="#FF4842"></path>
            </svg>
          </span>
          <span class="text-sm leading-5 text-red-50 font-medium ml-3">This is an Info alert — check it out!</span>
        </div>
        <button x-on:click="modal = false" class="inline-block text-red-50">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.17495 5.99999L10.7583 2.42499C10.9152 2.26807 11.0034 2.05524 11.0034 1.83333C11.0034 1.61141 10.9152 1.39858 10.7583 1.24166C10.6014 1.08474 10.3885 0.996582 10.1666 0.996582C9.9447 0.996582 9.73187 1.08474 9.57495 1.24166L5.99995 4.82499L2.42495 1.24166C2.26803 1.08474 2.0552 0.996582 1.83328 0.996582C1.61136 0.996582 1.39854 1.08474 1.24162 1.24166C1.0847 1.39858 0.996539 1.61141 0.996539 1.83333C0.996539 2.05524 1.0847 2.26807 1.24162 2.42499L4.82495 5.99999L1.24162 9.57499C1.16351 9.65246 1.10151 9.74463 1.05921 9.84618C1.0169 9.94773 0.995117 10.0566 0.995117 10.1667C0.995117 10.2767 1.0169 10.3856 1.05921 10.4871C1.10151 10.5887 1.16351 10.6809 1.24162 10.7583C1.31908 10.8364 1.41125 10.8984 1.5128 10.9407C1.61435 10.983 1.72327 11.0048 1.83328 11.0048C1.94329 11.0048 2.05221 10.983 2.15376 10.9407C2.25531 10.8984 2.34748 10.8364 2.42495 10.7583L5.99995 7.17499L9.57495 10.7583C9.65242 10.8364 9.74459 10.8984 9.84614 10.9407C9.94769 10.983 10.0566 11.0048 10.1666 11.0048C10.2766 11.0048 10.3855 10.983 10.4871 10.9407C10.5886 10.8984 10.6808 10.8364 10.7583 10.7583C10.8364 10.6809 10.8984 10.5887 10.9407 10.4871C10.983 10.3856 11.0048 10.2767 11.0048 10.1667C11.0048 10.0566 10.983 9.94773 10.9407 9.84618C10.8984 9.74463 10.8364 9.65246 10.7583 9.57499L7.17495 5.99999Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Tailwind Component #142

Tailwind CSS

Trizzle

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="mb-6 bg-gray-500 rounded-xl">
      <div class="flex flex-wrap">
        <div class="w-full sm:w-1/2 lg:w-1/4 pl-4 md:pl-8 xl:pl-10 border-b lg:border-b-0 sm:border-r border-gray-700">
          <div class="py-5 px-6">
            <h5 class="text-sm font-semibold text-gray-300 mb-6 leading-normal tracking-wide">Summary</h5>
            <div class="flex flex-wrap items-center mb-1 -m-2">
              <div class="w-auto p-2">
                <h4 class="text-2xl text-gray-100 font-bold tracking-wide">3.55K</h4>
              </div>
              <div class="w-auto p-2">
                <div class="inline-flex px-2 h-7 items-center justify-center text-purple-500 bg-purple-900 rounded-full">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.00002 3.33337V12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M10.6667 10L8.00002 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M5.33334 10L8.00001 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <span class="text-xs font-medium">59%</span>
                </div>
              </div>
            </div>
            <p class="text-xs font-semibold text-gray-300">Last week 84,70K</p>
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4 pl-4 md:pl-8 xl:pl-10 border-b lg:border-b-0 lg:border-r border-gray-700">
          <div class="py-5 px-6">
            <h5 class="text-sm font-semibold text-gray-300 mb-6 leading-normal tracking-wide">Engagement</h5>
            <div class="flex flex-wrap items-center mb-1 -m-2">
              <div class="w-auto p-2">
                <h4 class="text-2xl text-gray-100 font-bold tracking-wide">14.15K</h4>
              </div>
              <div class="w-auto p-2">
                <div class="inline-flex px-2 h-7 items-center justify-center text-purple-500 bg-purple-900 rounded-full">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.00002 3.33337V12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M10.6667 10L8.00002 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M5.33334 10L8.00001 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <span class="text-xs font-medium">0,5%</span>
                </div>
              </div>
            </div>
            <p class="text-xs font-semibold text-gray-300">Last week 242,99K</p>
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4 pl-4 md:pl-8 xl:pl-10 border-b md:border-b-0 sm:border-r border-gray-700">
          <div class="py-5 px-6">
            <h5 class="text-sm font-semibold text-gray-300 mb-6 leading-normal tracking-wide">Customers</h5>
            <div class="flex flex-wrap items-center mb-1 -m-2">
              <div class="w-auto p-2">
                <h4 class="text-2xl text-gray-100 font-bold tracking-wide">0.5M</h4>
              </div>
              <div class="w-auto p-2">
                <div class="inline-flex px-2 h-7 items-center justify-center text-green-500 bg-green-900 rounded-full">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8 3.33337V12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M10.6667 6.00004L8 3.33337" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M5.33334 6.00004L8.00001 3.33337" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <span class="text-xs font-medium">1,0%</span>
                </div>
              </div>
            </div>
            <p class="text-xs font-semibold text-gray-300">Last week 1.18M</p>
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4 pl-4 md:pl-8 xl:pl-10">
          <div class="py-5 px-6">
            <h5 class="text-sm font-semibold text-gray-300 mb-6 leading-normal tracking-wide">Churn</h5>
            <div class="flex flex-wrap items-center mb-1 -m-2">
              <div class="w-auto p-2">
                <h4 class="text-2xl text-gray-100 font-bold tracking-wide">3.55K</h4>
              </div>
              <div class="w-auto p-2">
                <div class="inline-flex px-2 h-7 items-center justify-center text-purple-500 bg-purple-900 rounded-full">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.00002 3.33337V12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M10.6667 10L8.00002 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M5.33334 10L8.00001 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <span class="text-xs font-medium">59%</span>
                </div>
              </div>
            </div>
            <p class="text-xs font-semibold text-gray-300">Last week 84,70K</p>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-3 mb-6">
      <div class="w-full lg:w-2/3 px-3 mb-6 lg:mb-0">
        <div class="h-full p-6 bg-gray-500 rounded-xl">
          <div class="flex flex-wrap -mx-4 -mb-4 justify-between items-center">
            <div class="w-auto px-4 mb-4">
              <h4 class="text-xs text-gray-300 mb-1">Revenue</h4>
              <h3 class="text-lg text-gray-100 font-bold">
                <span>$35.550</span>
                <span class="ml-2 text-xs text-green-500 font-medium">+6%</span>
              </h3>
            </div>
            <div class="w-auto px-4 mb-4">
              <div class="relative inline-block bg-gray-600 rounded-xl">
                <select class="relative py-3 pl-2 pr-6 cursor-pointer bg-transparent text-xs text-gray-300 font-semibold appearance-none outline-none" style="z-index: 1;" name="" id="">
                  <option value="">This Year</option>
                  <option value="">Last Month</option>
                </select>
                <span class="absolute top-1/2 right-0 mr-2 transform -translate-y-1/2" style="z-index: 0;">
                  <svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 1.5L5 5.5L9 1.5" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </span>
              </div>
            </div>
          </div>
          <div class="chart mt-8" data-type="area"></div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-3">
        <div class="h-full p-6 bg-gray-500 rounded-xl">
          <div class="flex flex-wrap -mx-4 -mb-4 justify-between items-center">
            <div class="w-auto px-4 mb-4">
              <h4 class="text-xs text-gray-300 mb-1">Activity</h4>
              <h3 class="text-lg text-gray-100 font-bold">
                <span>4.535</span>
                <span class="ml-2 text-xs text-red-500 font-medium">-16%</span>
              </h3>
            </div>
            <div class="w-auto px-4 mb-4">
              <div class="relative inline-block bg-gray-600 rounded-xl">
                <select class="relative py-3 pl-2 pr-6 cursor-pointer bg-transparent text-xs text-gray-300 font-semibold appearance-none outline-none" style="z-index: 1;" name="" id="">
                  <option value="">This Week</option>
                  <option value="">Last Month</option>
                </select>
                <span class="absolute top-1/2 right-0 mr-2 transform -translate-y-1/2" style="z-index: 0;">
                  <svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 1.5L5 5.5L9 1.5" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </span>
              </div>
            </div>
          </div>
          <div class="chart p-6" data-type="columns" style="min-height: 215px;"></div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-3">
      <div class="w-full lg:w-1/2 px-3 mb-6 lg:mb-0">
        <div class="h-full p-6 bg-gray-500 rounded-xl">
          <div class="flex flex-wrap -mx-4 -mb-4 justify-between items-center">
            <div class="w-auto px-4 mb-4">
              <div class="flex items-center">
                <h4 class="text-gray-100 font-bold tracking-wide">Audience Insight</h4>
                <span class="group relative ml-2 text-gray-200">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7 13C10.3137 13 13 10.3137 13 7C13 3.68629 10.3137 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M7 4.33337V7.00004" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M7 9.66663H7.00667" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <div class="hidden group-hover:block absolute -top-3 left-full ml-2 px-2 min-w-max bg-gray-600 rounded-lg">
                    <span class="text-xs text-gray-300">Lorem ipsum dolor sit insight</span>
                  </div>
                </span>
              </div>
            </div>
            <div class="w-auto px-4 mb-4">
              <a class="inline-block p-1 text-gray-300 hover:text-gray-200" href="#">
                <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2C1 2.55228 1.44772 3 2 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2C8 2.55228 8.44772 3 9 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M16 3C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1C15.4477 1 15 1.44772 15 2C15 2.55228 15.4477 3 16 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="chart mt-8 mb-3" data-type="columns-thin"></div>
          <div class="flex flex-col md:flex-row items-center justify-center">
            <div class="flex mb-4 md:mb-0 md:mr-20 items-center">
              <span class="inline-block h-3 w-3 mr-2 bg-blue-500 rounded-sm"></span>
              <span class="text-xs text-gray-300 font-semibold">Men</span>
            </div>
            <div class="flex mb-4 md:mb-0 md:mr-20 items-center">
              <span class="inline-block h-3 w-3 mr-2 bg-purple-500 rounded-sm"></span>
              <span class="text-xs text-gray-300 font-semibold">Woman</span>
            </div>
            <div class="flex items-center">
              <span class="inline-block h-3 w-3 mr-2 bg-yellow-500 rounded-sm"></span>
              <span class="text-xs text-gray-300 font-semibold">Not Specific</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-3">
        <div class="h-full px-6 pt-6 pb-8 bg-gray-500 rounded-xl">
          <div class="flex flex-wrap -mx-4 -mb-4 justify-between items-center">
            <div class="w-auto px-4 mb-4">
              <h4 class="text-gray-100 font-bold tracking-wide">Transaction history</h4>
            </div>
            <div class="w-auto px-4 mb-4">
              <a class="inline-block p-1 text-gray-300 hover:text-gray-200" href="#">
                <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2C1 2.55228 1.44772 3 2 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2C8 2.55228 8.44772 3 9 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M16 3C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1C15.4477 1 15 1.44772 15 2C15 2.55228 15.4477 3 16 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="w-full mt-6 pb-4 overflow-x-auto">
            <table class="w-full min-w-max">
              <tbody>
                <tr class="border-b border-gray-400">
                  <td class="py-4 pr-12">
                    <div class="flex items-center">
                      <div class="flex w-10 h-10 mr-3 items-center justify-center bg-teal-900 text-green-500 rounded-xl">
                        <svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1 6L6 11L16 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                      </div>
                      <div>
                        <h5 class="text-xs leading-3 font-semibold">
                          <span class="text-gray-100 pr-px">Payment from</span>
                          <a class="inline-block text-blue-500 hover:underline" href="#">#05896</a>
                        </h5>
                        <span class="text-xs text-gray-300 font-medium">Feb 14, 01:30 PM</span>
                      </div>
                    </div>
                  </td>
                  <td class="py-4 text-right">
                    <span class="text-sm text-gray-100 font-bold">$95.00</span>
                  </td>
                </tr>
                <tr class="border-b border-gray-400">
                  <td class="py-4 pr-12">
                    <div class="flex items-center">
                      <div class="flex w-10 h-10 mr-3 items-center justify-center bg-yellow-900 text-yellow-500 rounded-xl">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M12 8V12L14 14" stroke="#F6A723" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M2.30386 10.924C2.26189 11.3361 2.56192 11.7042 2.974 11.7461C3.38608 11.7881 3.75417 11.4881 3.79614 11.076L2.30386 10.924ZM2.3 20C2.3 20.4142 2.63579 20.75 3.05 20.75C3.46422 20.75 3.8 20.4142 3.8 20H2.3ZM3.05 15V14.25C2.63579 14.25 2.3 14.5858 2.3 15H3.05ZM8.05 15.75C8.46422 15.75 8.8 15.4142 8.8 15C8.8 14.5858 8.46422 14.25 8.05 14.25V15.75ZM3.79614 11.076C4.00156 9.0594 4.94222 7.18899 6.43865 5.82165L5.42682 4.7143C3.65832 6.33025 2.54663 8.54073 2.30386 10.924L3.79614 11.076ZM6.43865 5.82165C7.93508 4.4543 9.88253 3.68574 11.9094 3.66259L11.8923 2.16268C9.49687 2.19005 7.19533 3.09835 5.42682 4.7143L6.43865 5.82165ZM11.9094 3.66259C13.9364 3.63944 15.9009 4.36332 17.4281 5.69613L18.4144 4.56596C16.6094 2.99082 14.2878 2.13532 11.8923 2.16268L11.9094 3.66259ZM17.4281 5.69613C18.9554 7.02893 19.9385 8.87737 20.19 10.8888L21.6784 10.7027C21.3812 8.3256 20.2194 6.14109 18.4144 4.56596L17.4281 5.69613ZM20.19 10.8888C20.4414 12.9002 19.9435 14.9337 18.7913 16.6015L20.0254 17.4541C21.3871 15.4831 21.9755 13.0798 21.6784 10.7027L20.19 10.8888ZM18.7913 16.6015C17.6391 18.2692 15.9132 19.4544 13.943 19.9309L14.2956 21.3888C16.6241 20.8257 18.6637 19.425 20.0254 17.4541L18.7913 16.6015ZM13.943 19.9309C11.9727 20.4074 9.89602 20.1418 8.10906 19.1849L7.40094 20.5072C9.51281 21.6381 11.9671 21.952 14.2956 21.3888L13.943 19.9309ZM3.8 20V15H2.3V20H3.8ZM3.05 15.75H8.05V14.25H3.05V15.75ZM8.10906 19.1849C7.2727 18.737 6.17809 17.6298 5.23936 16.5417C4.78389 16.0137 4.38703 15.5165 4.10391 15.1511C3.96253 14.9686 3.84997 14.8196 3.77316 14.7167C3.73476 14.6653 3.70533 14.6254 3.68572 14.5987C3.67592 14.5854 3.66857 14.5754 3.6638 14.5688C3.66141 14.5656 3.65966 14.5632 3.65857 14.5617C3.65803 14.5609 3.65765 14.5604 3.65743 14.5601C3.65732 14.5599 3.65726 14.5598 3.65723 14.5598C3.65722 14.5598 3.65723 14.5598 3.65723 14.5598C3.65725 14.5598 3.65729 14.5599 3.05 15C2.44272 15.4401 2.44278 15.4402 2.44284 15.4403C2.44288 15.4403 2.44295 15.4405 2.44302 15.4405C2.44317 15.4407 2.44335 15.441 2.44358 15.4413C2.44403 15.4419 2.44466 15.4428 2.44544 15.4439C2.44702 15.446 2.44925 15.4491 2.45214 15.4531C2.45791 15.461 2.46628 15.4724 2.47713 15.4872C2.49884 15.5167 2.53051 15.5596 2.57127 15.6142C2.65277 15.7233 2.77072 15.8795 2.91814 16.0697C3.21261 16.4498 3.62648 16.9684 4.10358 17.5215C5.03 18.5954 6.28789 19.9112 7.40094 20.5072L8.10906 19.1849Z" fill="#F6A723"></path>
                        </svg>
                      </div>
                      <div>
                        <h5 class="text-xs leading-3 font-semibold">
                          <span class="text-gray-100 pr-px">Payment from</span>
                          <a class="inline-block text-blue-500 hover:underline" href="#">#05896</a>
                        </h5>
                        <span class="text-xs text-gray-300 font-medium">Feb 14, 01:30 PM</span>
                      </div>
                    </div>
                  </td>
                  <td class="py-4 text-right">
                    <span class="text-sm text-gray-100 font-bold">$95.00</span>
                  </td>
                </tr>
                <tr class="border-b border-gray-400">
                  <td class="py-4 pr-12">
                    <div class="flex items-center">
                      <div class="flex w-10 h-10 mr-3 items-center justify-center bg-red-900 text-red-500 rounded-xl">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M16.9497 7.05029L7.0502 16.9498" stroke="#ED4F4F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M7.0502 7.05029L16.9497 16.9498" stroke="#ED4F4F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                      </div>
                      <div>
                        <h5 class="text-xs leading-3 font-semibold">
                          <span class="text-gray-100 pr-px">Payment from</span>
                          <a class="inline-block text-blue-500 hover:underline" href="#">#05896</a>
                        </h5>
                        <span class="text-xs text-gray-300 font-medium">Feb 14, 01:30 PM</span>
                      </div>
                    </div>
                  </td>
                  <td class="py-4 text-right">
                    <span class="text-sm text-gray-100 font-bold">$95.00</span>
                  </td>
                </tr>
                <tr>
                  <td class="py-4">
                    <div class="flex items-center">
                      <div class="flex w-10 h-10 mr-3 items-center justify-center bg-red-900 text-red-500 rounded-xl">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M16.9497 7.05029L7.0502 16.9498" stroke="#ED4F4F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M7.0502 7.05029L16.9497 16.9498" stroke="#ED4F4F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                      </div>
                      <div>
                        <h5 class="text-xs leading-3 font-semibold">
                          <span class="text-gray-100 pr-px">Payment from</span>
                          <a class="inline-block text-blue-500 hover:underline" href="#">#05896</a>
                        </h5>
                        <span class="text-xs text-gray-300 font-medium">Feb 14, 01:30 PM</span>
                      </div>
                    </div>
                  </td>
                  <td class="py-4 text-right">
                    <span class="text-sm text-gray-100 font-bold">$95.00</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #143

Tailwind CSS

Trizzle

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-blue-800 rounded-lg border border-blue-500">
      <div class="flex w-full h-full items-center justify-between">
        <div class="flex pr-6">
          <span class="flex-shrink-0 self-start mr-3">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C21.9971 9.34874 20.9425 6.80691 19.0678 4.93219C17.1931 3.05746 14.6513 2.00295 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C19.9976 14.121 19.1539 16.1544 17.6542 17.6542C16.1544 19.1539 14.121 19.9976 12 20ZM12 11.5C11.7348 11.5 11.4804 11.6054 11.2929 11.7929C11.1054 11.9804 11 12.2348 11 12.5V15.5C11 15.7652 11.1054 16.0196 11.2929 16.2071C11.4804 16.3946 11.7348 16.5 12 16.5C12.2652 16.5 12.5196 16.3946 12.7071 16.2071C12.8946 16.0196 13 15.7652 13 15.5V12.5C13 12.2348 12.8946 11.9804 12.7071 11.7929C12.5196 11.6054 12.2652 11.5 12 11.5ZM12 7.5C11.7528 7.5 11.5111 7.57331 11.3055 7.71066C11.1 7.84801 10.9398 8.04324 10.8452 8.27165C10.7505 8.50005 10.7258 8.75139 10.774 8.99386C10.8223 9.23634 10.9413 9.45907 11.1161 9.63388C11.2909 9.8087 11.5137 9.92775 11.7561 9.97598C11.9986 10.0242 12.25 9.99946 12.4784 9.90485C12.7068 9.81024 12.902 9.65002 13.0393 9.44446C13.1767 9.2389 13.25 8.99723 13.25 8.75C13.25 8.41848 13.1183 8.10054 12.8839 7.86612C12.6495 7.6317 12.3315 7.5 12 7.5Z" fill="#1890FF"></path>
            </svg>
          </span>
          <div>
            <h5 class="text-blue-100 font-semibold">Alert Info</h5>
            <span class="text-sm leading-5 text-blue-50 font-medium">This is an Info alert — check it out!</span>
          </div>
        </div>
        <button x-on:click="modal = false" class="inline-block">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.17495 5.99999L10.7583 2.42499C10.9152 2.26807 11.0034 2.05524 11.0034 1.83333C11.0034 1.61141 10.9152 1.39858 10.7583 1.24166C10.6014 1.08474 10.3885 0.996582 10.1666 0.996582C9.9447 0.996582 9.73187 1.08474 9.57495 1.24166L5.99995 4.82499L2.42495 1.24166C2.26803 1.08474 2.0552 0.996582 1.83328 0.996582C1.61136 0.996582 1.39854 1.08474 1.24162 1.24166C1.0847 1.39858 0.996539 1.61141 0.996539 1.83333C0.996539 2.05524 1.0847 2.26807 1.24162 2.42499L4.82495 5.99999L1.24162 9.57499C1.16351 9.65246 1.10151 9.74463 1.05921 9.84618C1.0169 9.94773 0.995117 10.0566 0.995117 10.1667C0.995117 10.2767 1.0169 10.3856 1.05921 10.4871C1.10151 10.5887 1.16351 10.6809 1.24162 10.7583C1.31908 10.8364 1.41125 10.8984 1.5128 10.9407C1.61435 10.983 1.72327 11.0048 1.83328 11.0048C1.94329 11.0048 2.05221 10.983 2.15376 10.9407C2.25531 10.8984 2.34748 10.8364 2.42495 10.7583L5.99995 7.17499L9.57495 10.7583C9.65242 10.8364 9.74459 10.8984 9.84614 10.9407C9.94769 10.983 10.0566 11.0048 10.1666 11.0048C10.2766 11.0048 10.3855 10.983 10.4871 10.9407C10.5886 10.8984 10.6808 10.8364 10.7583 10.7583C10.8364 10.6809 10.8984 10.5887 10.9407 10.4871C10.983 10.3856 11.0048 10.2767 11.0048 10.1667C11.0048 10.0566 10.983 9.94773 10.9407 9.84618C10.8984 9.74463 10.8364 9.65246 10.7583 9.57499L7.17495 5.99999Z" fill="#D0F2FF"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

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 #144

Bootstrap

Trizzle

<section>
  <div class="pt-4 pb-6 bg-dark-light">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-12 col-md-4 mb-4 mb-md-0">
          <h6 class="fs-5 fw-bold mb-0">Overview</h6><span class="fs-10 text-secondary-light">Get daily review of your recent activities</span>
        </div>
        <div class="col-12 col-md-8">
          <div class="d-flex flex-column flex-sm-row align-items-end align-items-sm-center justify-content-end">
            <div class="d-flex mb-5 mb-sm-0 me-sm-4"><a class="btn p-0 me-4 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" 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 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="#919EB0"></path>
                </svg></a><a class="btn p-0 me-4 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" 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="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="#919EB0"></path>
                </svg></a><a class="btn p-0 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" 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="M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.94733 18.6997 5.81281 16.9855 4.27667C15.2714 2.74053 13.0338 1.91954 10.7329 1.9825C8.43207 2.04546 6.24275 2.98759 4.61517 4.61517C2.98759 6.24275 2.04546 8.43207 1.9825 10.7329C1.91954 13.0338 2.74053 15.2714 4.27667 16.9855C5.81281 18.6997 7.94733 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7738 20.4936 21.8482 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5065 21.8482 21.6171 21.7738 21.71 21.68C21.8903 21.4936 21.991 21.2444 21.991 20.985C21.991 20.7257 21.8903 20.4765 21.71 20.29ZM11 18C9.61556 18 8.26218 17.5895 7.11103 16.8203C5.95989 16.0511 5.06268 14.9579 4.53287 13.6788C4.00306 12.3997 3.86443 10.9923 4.13453 9.63439C4.40463 8.27653 5.07131 7.02925 6.05028 6.05028C7.02925 5.07131 8.27653 4.40463 9.63439 4.13453C10.9923 3.86443 12.3997 4.00306 13.6788 4.53287C14.9579 5.06268 16.0511 5.95989 16.8203 7.11103C17.5895 8.26218 18 9.61556 18 11C18 12.8565 17.2625 14.637 15.9498 15.9498C14.637 17.2625 12.8565 18 11 18Z" fill="#919EB0"></path>
                </svg></a></div><a class="btn px-2 py-1 d-flex align-items-center btn-secondary rounded-pill" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-5 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>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #145

Bootstrap

Trizzle

<section>
  <div class="pt-4 pb-6 bg-dark-light">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-12 col-md-4 mb-4 mb-md-0">
          <h6 class="fs-5 fw-bold mb-1">Overview</h6>
          <nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
            <ol class="breadcrumb fs-10 mb-0">
              <li class="breadcrumb-item"><a class="text-secondary-light" href="#">Dashboard</a></li><span class="d-inline-block mx-2 text-secondary-light">•</span>
              <li class="breadcrumb-item active text-secondary-light" aria-current="page"> Overview</li>
            </ol>
          </nav>
        </div>
        <div class="col-12 col-md-8">
          <div class="d-flex flex-column flex-sm-row align-items-end align-items-sm-center justify-content-end">
            <div class="d-flex mb-5 mb-sm-0 me-sm-4"><a class="btn p-0 me-4 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" 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 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="#919EB0"></path>
                </svg></a><a class="btn p-0 me-4 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" 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="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="#919EB0"></path>
                </svg></a><a class="btn p-0 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" 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="M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.94733 18.6997 5.81281 16.9855 4.27667C15.2714 2.74053 13.0338 1.91954 10.7329 1.9825C8.43207 2.04546 6.24275 2.98759 4.61517 4.61517C2.98759 6.24275 2.04546 8.43207 1.9825 10.7329C1.91954 13.0338 2.74053 15.2714 4.27667 16.9855C5.81281 18.6997 7.94733 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7738 20.4936 21.8482 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5065 21.8482 21.6171 21.7738 21.71 21.68C21.8903 21.4936 21.991 21.2444 21.991 20.985C21.991 20.7257 21.8903 20.4765 21.71 20.29ZM11 18C9.61556 18 8.26218 17.5895 7.11103 16.8203C5.95989 16.0511 5.06268 14.9579 4.53287 13.6788C4.00306 12.3997 3.86443 10.9923 4.13453 9.63439C4.40463 8.27653 5.07131 7.02925 6.05028 6.05028C7.02925 5.07131 8.27653 4.40463 9.63439 4.13453C10.9923 3.86443 12.3997 4.00306 13.6788 4.53287C14.9579 5.06268 16.0511 5.95989 16.8203 7.11103C17.5895 8.26218 18 9.61556 18 11C18 12.8565 17.2625 14.637 15.9498 15.9498C14.637 17.2625 12.8565 18 11 18Z" fill="#919EB0"></path>
                </svg></a></div><a class="btn px-2 py-1 d-flex align-items-center btn-secondary rounded-pill" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-5 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>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #146

Bootstrap

Trizzle

<section>
  <div class="pt-4 pb-6 bg-dark-light">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-12 col-md-4 mb-4 mb-md-0">
          <h6 class="fs-5 fw-bold mb-0">Overview</h6>
        </div>
        <div class="col-12 col-md-8">
          <div class="d-flex flex-column flex-sm-row align-items-end align-items-sm-center justify-content-end">
            <div class="d-flex mb-5 mb-sm-0 me-sm-4"><a class="btn p-0 me-4 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" 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 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="#919EB0"></path>
                </svg></a><a class="btn p-0 me-4 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" 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="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="#919EB0"></path>
                </svg></a><a class="btn p-0 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" 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="M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.94733 18.6997 5.81281 16.9855 4.27667C15.2714 2.74053 13.0338 1.91954 10.7329 1.9825C8.43207 2.04546 6.24275 2.98759 4.61517 4.61517C2.98759 6.24275 2.04546 8.43207 1.9825 10.7329C1.91954 13.0338 2.74053 15.2714 4.27667 16.9855C5.81281 18.6997 7.94733 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7738 20.4936 21.8482 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5065 21.8482 21.6171 21.7738 21.71 21.68C21.8903 21.4936 21.991 21.2444 21.991 20.985C21.991 20.7257 21.8903 20.4765 21.71 20.29ZM11 18C9.61556 18 8.26218 17.5895 7.11103 16.8203C5.95989 16.0511 5.06268 14.9579 4.53287 13.6788C4.00306 12.3997 3.86443 10.9923 4.13453 9.63439C4.40463 8.27653 5.07131 7.02925 6.05028 6.05028C7.02925 5.07131 8.27653 4.40463 9.63439 4.13453C10.9923 3.86443 12.3997 4.00306 13.6788 4.53287C14.9579 5.06268 16.0511 5.95989 16.8203 7.11103C17.5895 8.26218 18 9.61556 18 11C18 12.8565 17.2625 14.637 15.9498 15.9498C14.637 17.2625 12.8565 18 11 18Z" fill="#919EB0"></path>
                </svg></a></div><a class="btn px-2 py-1 d-flex align-items-center btn-secondary rounded-pill" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-5 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>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #147

Bootstrap

Trizzle

<section>
  <div class="pt-4 pb-6 bg-dark-light">
    <div class="container">
      <div class="d-flex flex-column flex-sm-row align-items-end align-items-sm-center justify-content-end">
        <div class="d-flex mb-5 mb-sm-0 me-sm-4"><a class="btn p-0 me-4 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" 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 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="#919EB0"></path>
            </svg></a><a class="btn p-0 me-4 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" 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="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="#919EB0"></path>
            </svg></a><a class="btn p-0 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" 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="M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.94733 18.6997 5.81281 16.9855 4.27667C15.2714 2.74053 13.0338 1.91954 10.7329 1.9825C8.43207 2.04546 6.24275 2.98759 4.61517 4.61517C2.98759 6.24275 2.04546 8.43207 1.9825 10.7329C1.91954 13.0338 2.74053 15.2714 4.27667 16.9855C5.81281 18.6997 7.94733 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7738 20.4936 21.8482 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5065 21.8482 21.6171 21.7738 21.71 21.68C21.8903 21.4936 21.991 21.2444 21.991 20.985C21.991 20.7257 21.8903 20.4765 21.71 20.29ZM11 18C9.61556 18 8.26218 17.5895 7.11103 16.8203C5.95989 16.0511 5.06268 14.9579 4.53287 13.6788C4.00306 12.3997 3.86443 10.9923 4.13453 9.63439C4.40463 8.27653 5.07131 7.02925 6.05028 6.05028C7.02925 5.07131 8.27653 4.40463 9.63439 4.13453C10.9923 3.86443 12.3997 4.00306 13.6788 4.53287C14.9579 5.06268 16.0511 5.95989 16.8203 7.11103C17.5895 8.26218 18 9.61556 18 11C18 12.8565 17.2625 14.637 15.9498 15.9498C14.637 17.2625 12.8565 18 11 18Z" fill="#919EB0"></path>
            </svg></a></div><a class="btn px-2 py-1 d-flex align-items-center btn-secondary rounded-pill" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-5 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>
    </div>
  </div>
</section>

Bootstrap Component #148

Bootstrap

Trizzle

<section>
  <div class="pt-4 pb-6 bg-dark-light">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-12 col-md-4 mt-5 mt-md-0 order-last order-md-first">
          <div class="position-relative mw-xs">
            <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="col-12 col-md-8">
          <div class="d-flex align-items-center justify-content-end">
            <div class="d-flex me-4"><a class="btn p-0 me-4 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" 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 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="#919EB0"></path>
                </svg></a><a class="btn p-0 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" 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="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="#919EB0"></path>
                </svg></a></div><a class="btn px-2 py-1 d-flex align-items-center btn-secondary rounded-pill" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-5 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>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #149

Bootstrap

Trizzle

<section class="py-8 bg-dark-light">
  <div class="container">
    <div class="p-8 bg-secondary rounded-4">
      <div class="row mb-8 pb-6 border-bottom border-light-dark">
        <div class="col-12 col-sm-6 mb-6 mb-sm-0">
          <h4 class="fs-5 fw-bold text-white mb-1">Personal info</h4>
          <p class="fs-9 text-secondary-light mb-0">Lorem ipsum dolor sit amet</p>
        </div>
        <div class="col-12 col-sm-6">
          <div class="d-flex align-items-center justify-content-end"><a class="btn me-4 btn-sm btn-dark-light text-secondary-light" href="#">Cancel</a><a class="btn btn-sm btn-primary" href="#">Save</a></div>
        </div>
      </div>
      <form action="">
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Name</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <div class="row">
                  <div class="col-12 col-sm-6 mb-4 mb-sm-0">
                    <input class="form-control bg-transparent text-light" id="" type="text" placeholder="John">
                  </div>
                  <div class="col-12 col-sm-6">
                    <input class="form-control bg-transparent text-light" id="" type="text" placeholder="Doe">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Email address</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <input class="form-control bg-transparent text-light" id="" type="email" placeholder="johndoe@trizzle.ui">
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-6 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Photo</span><span class="d-block fs-9 fw-medium text-secondary-light">Lorem ipsum dolor sit amet</span></div>
            <div class="col-12 col-sm-8">
              <div class="d-flex flex-wrap flex-sm-nowrap mw-xl">
                <div class="flex-shrink-0 mb-4 me-4 rounded-pill" style="width: 80px; height: 80px;"><img class="img-fluid" src="trizzle-assets/images/avatar-photo-form.png" alt=""></div>
                <div class="w-100 py-8 px-4 text-center border border-light-dark rounded-3">
                  <div class="position-relative mx-auto mb-4" style="width: 56px; height: 56px;">
                    <div class="d-flex align-items-center justify-content-center bg-primary rounded-pill" style="width: 56px; height: 56px;">
                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.71 5.71002L9 3.41002V13C9 13.2652 9.10536 13.5196 9.29289 13.7071C9.48043 13.8947 9.73478 14 10 14C10.2652 14 10.5196 13.8947 10.7071 13.7071C10.8946 13.5196 11 13.2652 11 13V3.41002L13.29 5.71002C13.383 5.80375 13.4936 5.87814 13.6154 5.92891C13.7373 5.97968 13.868 6.00582 14 6.00582C14.132 6.00582 14.2627 5.97968 14.3846 5.92891C14.5064 5.87814 14.617 5.80375 14.71 5.71002C14.8037 5.61706 14.8781 5.50645 14.9289 5.3846C14.9797 5.26274 15.0058 5.13203 15.0058 5.00002C15.0058 4.86801 14.9797 4.7373 14.9289 4.61544C14.8781 4.49358 14.8037 4.38298 14.71 4.29002L10.71 0.290018C10.6149 0.198978 10.5028 0.127613 10.38 0.0800184C10.1365 -0.0199996 9.86346 -0.0199996 9.62 0.0800184C9.49725 0.127613 9.3851 0.198978 9.29 0.290018L5.29 4.29002C5.19676 4.38326 5.1228 4.49395 5.07234 4.61577C5.02188 4.73759 4.99591 4.86816 4.99591 5.00002C4.99591 5.13188 5.02188 5.26245 5.07234 5.38427C5.1228 5.50609 5.19676 5.61678 5.29 5.71002C5.38324 5.80326 5.49393 5.87722 5.61575 5.92768C5.73757 5.97814 5.86814 6.00411 6 6.00411C6.13186 6.00411 6.26243 5.97814 6.38425 5.92768C6.50607 5.87722 6.61676 5.80326 6.71 5.71002ZM19 10C18.7348 10 18.4804 10.1054 18.2929 10.2929C18.1054 10.4804 18 10.7348 18 11V17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8947 17.2652 18 17 18H3C2.73478 18 2.48043 17.8947 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V11C2 10.7348 1.89464 10.4804 1.70711 10.2929C1.51957 10.1054 1.26522 10 1 10C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11V17C0 17.7957 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.7957 20 17V11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10Z" fill="#E8EDFF"></path>
                      </svg>
                    </div>
                    <input class="position-absolute top-0 start-0 opacity-0" style="width: 56px; height: 56px;" id="" type="file" name="filephoto">
                  </div>
                  <p class="fw-semibold mb-1"><span class="text-primary">Click to upload a file</span> <span class="text-secondary-light">or drag and drop</span></p><span class="fs-10 text-secondary-light fw-semibold">PNG, JPG, GIF or up to 10MB</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Role</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <input class="form-control bg-transparent text-light" id="" type="text" placeholder="Frontend Developer">
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Country</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <div class="position-relative d-block w-100 fs-9 text-light fw-medium border border-light-dark bg-secondary rounded-3"><span class="position-absolute top-50 end-0 me-5 translate-middle-y">
                    <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10.9999 1.16994C10.8126 0.983692 10.5591 0.87915 10.2949 0.87915C10.0308 0.87915 9.77731 0.983692 9.58995 1.16994L5.99995 4.70994L2.45995 1.16994C2.27259 0.983692 2.01913 0.87915 1.75495 0.87915C1.49076 0.87915 1.23731 0.983692 1.04995 1.16994C0.95622 1.26291 0.881826 1.37351 0.831057 1.49537C0.780288 1.61723 0.75415 1.74793 0.75415 1.87994C0.75415 2.01195 0.780288 2.14266 0.831057 2.26452C0.881826 2.38638 0.95622 2.49698 1.04995 2.58994L5.28995 6.82994C5.38291 6.92367 5.49351 6.99807 5.61537 7.04883C5.73723 7.0996 5.86794 7.12574 5.99995 7.12574C6.13196 7.12574 6.26267 7.0996 6.38453 7.04883C6.50638 6.99807 6.61699 6.92367 6.70995 6.82994L10.9999 2.58994C11.0937 2.49698 11.1681 2.38638 11.2188 2.26452C11.2696 2.14266 11.2957 2.01195 11.2957 1.87994C11.2957 1.74793 11.2696 1.61723 11.2188 1.49537C11.1681 1.37351 11.0937 1.26291 10.9999 1.16994Z" fill="#3D485B"></path>
                    </svg></span>
                  <select class="position-relative form-control fs-8 border-0 text-light w-100 px-0 py-5 px-3 bg-transparent" style="appearance: none; outline: none;" id="" name="">
                    <option class="bg-gray-500" value="1">United States</option>
                    <option class="bg-gray-500" value="1">United States</option>
                    <option class="bg-gray-500" value="1">United States</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Timezone</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <div class="position-relative d-block w-100 fs-9 text-light fw-medium border border-light-dark bg-secondary rounded-3"><span class="position-absolute top-50 end-0 me-5 translate-middle-y">
                    <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10.9999 1.16994C10.8126 0.983692 10.5591 0.87915 10.2949 0.87915C10.0308 0.87915 9.77731 0.983692 9.58995 1.16994L5.99995 4.70994L2.45995 1.16994C2.27259 0.983692 2.01913 0.87915 1.75495 0.87915C1.49076 0.87915 1.23731 0.983692 1.04995 1.16994C0.95622 1.26291 0.881826 1.37351 0.831057 1.49537C0.780288 1.61723 0.75415 1.74793 0.75415 1.87994C0.75415 2.01195 0.780288 2.14266 0.831057 2.26452C0.881826 2.38638 0.95622 2.49698 1.04995 2.58994L5.28995 6.82994C5.38291 6.92367 5.49351 6.99807 5.61537 7.04883C5.73723 7.0996 5.86794 7.12574 5.99995 7.12574C6.13196 7.12574 6.26267 7.0996 6.38453 7.04883C6.50638 6.99807 6.61699 6.92367 6.70995 6.82994L10.9999 2.58994C11.0937 2.49698 11.1681 2.38638 11.2188 2.26452C11.2696 2.14266 11.2957 2.01195 11.2957 1.87994C11.2957 1.74793 11.2696 1.61723 11.2188 1.49537C11.1681 1.37351 11.0937 1.26291 10.9999 1.16994Z" fill="#3D485B"></path>
                    </svg></span>
                  <select class="position-relative form-control fs-8 border-0 text-light w-100 px-0 py-5 px-3 bg-transparent" style="appearance: none; outline: none;" id="" name="">
                    <option class="bg-gray-500" value="1">Central Daylight Time (GMT-5) UTC-08:00</option>
                    <option class="bg-gray-500" value="1">Central Daylight Time (GMT-5) UTC-08:00</option>
                    <option class="bg-gray-500" value="1">Central Daylight Time (GMT-5) UTC-08:00</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Website</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <input class="form-control bg-transparent text-light" id="" type="text" placeholder="trizzle.ui/shuffle">
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="row">
            <div class="col-12 col-sm-4 mb-6 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Bio</span><span class="d-block fs-9 fw-medium text-secondary-light">Lorem ipsum dolor sit amet</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <textarea class="form-control bg-transparent text-light" style="height: 225px; resize: none;" id="" type="text" placeholder="Lorem ipsum dolor sit amet"></textarea>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

Bootstrap Component #150

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-50">
        <h6 class="fs-8 fw-semibold text-light mb-6">Companies</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"><span class="fs-10 fw-semibold text-secondary-light">NAME</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">INDUSTRY</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">LOCATION</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">ENROLLMENT</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="rounded-end-4 py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">LAST CONTACT</span></div>
              </th>
            </tr></thead>
            <tbody>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-3 px-4" style="height: 64px;">
                    <div class="d-flex align-items-center">
                      <div class="d-flex align-items-center justify-content-center bg-light-dark 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">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1026 1.07874C9.39376 -0.159221 7.60839 -0.159221 6.89956 1.07874L0.353332 12.5116C-0.529954 14.0542 1.06419 15.8312 2.69329 15.1199L7.76263 12.2913C8.23346 12.0858 8.76868 12.0858 9.23952 12.2913L14.3089 15.1199C15.938 15.8312 17.5321 14.0542 16.6488 12.5116L10.1026 1.07874ZM8.55945 9.37759C9.49374 9.37759 10.2511 8.6202 10.2511 7.68592C10.2511 6.75163 9.49374 5.99424 8.55945 5.99424C7.62516 5.99424 6.86777 6.75163 6.86777 7.68592C6.86777 8.6202 7.62516 9.37759 8.55945 9.37759Z" fill="#EBEAFC"></path>
                          <path d="M5.00021 4.39497L2.69281 3.38752C1.0637 2.67622 -0.530443 4.45315 0.352843 5.99579L2.21822 9.25364L5.00021 4.39497Z" fill="#8880EB"></path>
                          <path d="M14.7829 9.25365L12.001 4.39497L14.3084 3.38752C15.9375 2.67622 17.5316 4.45315 16.6483 5.99579L14.7829 9.25365Z" fill="#8880EB"></path>
                        </svg>
                      </div><span class="ms-3 fs-9 fw-medium text-light">Artemis</span>
                    </div>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6" style="height: 64px;">
                    <div class="d-inline-block px-2 bg-dark-light rounded-pill"><span class="fs-10 lh-lg fw-medium text-secondary-light">NO-CODE</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">Warsaw, Poland</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">Enrolled</span>
                  </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">June 06, 2022</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="rounded-start-4 py-3 px-4 bg-dark-light" style="height: 64px;">
                    <div class="d-flex align-items-center">
                      <div class="d-flex align-items-center justify-content-center bg-light-dark 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">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1026 1.07874C9.39376 -0.159221 7.60839 -0.159221 6.89956 1.07874L0.353332 12.5116C-0.529954 14.0542 1.06419 15.8312 2.69329 15.1199L7.76263 12.2913C8.23346 12.0858 8.76868 12.0858 9.23952 12.2913L14.3089 15.1199C15.938 15.8312 17.5321 14.0542 16.6488 12.5116L10.1026 1.07874ZM8.55945 9.37759C9.49374 9.37759 10.2511 8.6202 10.2511 7.68592C10.2511 6.75163 9.49374 5.99424 8.55945 5.99424C7.62516 5.99424 6.86777 6.75163 6.86777 7.68592C6.86777 8.6202 7.62516 9.37759 8.55945 9.37759Z" fill="#EBEAFC"></path>
                          <path d="M5.00021 4.39497L2.69281 3.38752C1.0637 2.67622 -0.530443 4.45315 0.352843 5.99579L2.21822 9.25364L5.00021 4.39497Z" fill="#8880EB"></path>
                          <path d="M14.7829 9.25365L12.001 4.39497L14.3084 3.38752C15.9375 2.67622 17.5316 4.45315 16.6483 5.99579L14.7829 9.25365Z" fill="#8880EB"></path>
                        </svg>
                      </div><span class="ms-3 fs-9 fw-medium text-light">Artemis</span>
                    </div>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6 bg-dark-light" style="height: 64px;">
                    <div class="d-inline-block px-2 bg-dark-light rounded-pill"><span class="fs-10 lh-lg fw-medium text-secondary-light">NO-CODE</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">Warsaw, Poland</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-6 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">Enrolled</span>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="rounded-end-4 py-6 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">June 06, 2022</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-3 px-4" style="height: 64px;">
                    <div class="d-flex align-items-center">
                      <div class="d-flex align-items-center justify-content-center bg-light-dark 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">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1026 1.07874C9.39376 -0.159221 7.60839 -0.159221 6.89956 1.07874L0.353332 12.5116C-0.529954 14.0542 1.06419 15.8312 2.69329 15.1199L7.76263 12.2913C8.23346 12.0858 8.76868 12.0858 9.23952 12.2913L14.3089 15.1199C15.938 15.8312 17.5321 14.0542 16.6488 12.5116L10.1026 1.07874ZM8.55945 9.37759C9.49374 9.37759 10.2511 8.6202 10.2511 7.68592C10.2511 6.75163 9.49374 5.99424 8.55945 5.99424C7.62516 5.99424 6.86777 6.75163 6.86777 7.68592C6.86777 8.6202 7.62516 9.37759 8.55945 9.37759Z" fill="#EBEAFC"></path>
                          <path d="M5.00021 4.39497L2.69281 3.38752C1.0637 2.67622 -0.530443 4.45315 0.352843 5.99579L2.21822 9.25364L5.00021 4.39497Z" fill="#8880EB"></path>
                          <path d="M14.7829 9.25365L12.001 4.39497L14.3084 3.38752C15.9375 2.67622 17.5316 4.45315 16.6483 5.99579L14.7829 9.25365Z" fill="#8880EB"></path>
                        </svg>
                      </div><span class="ms-3 fs-9 fw-medium text-light">Artemis</span>
                    </div>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6" style="height: 64px;">
                    <div class="d-inline-block px-2 bg-dark-light rounded-pill"><span class="fs-10 lh-lg fw-medium text-secondary-light">NO-CODE</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">Warsaw, Poland</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">Enrolled</span>
                  </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">June 06, 2022</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="rounded-start-4 py-3 px-4 bg-dark-light" style="height: 64px;">
                    <div class="d-flex align-items-center">
                      <div class="d-flex align-items-center justify-content-center bg-light-dark 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">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1026 1.07874C9.39376 -0.159221 7.60839 -0.159221 6.89956 1.07874L0.353332 12.5116C-0.529954 14.0542 1.06419 15.8312 2.69329 15.1199L7.76263 12.2913C8.23346 12.0858 8.76868 12.0858 9.23952 12.2913L14.3089 15.1199C15.938 15.8312 17.5321 14.0542 16.6488 12.5116L10.1026 1.07874ZM8.55945 9.37759C9.49374 9.37759 10.2511 8.6202 10.2511 7.68592C10.2511 6.75163 9.49374 5.99424 8.55945 5.99424C7.62516 5.99424 6.86777 6.75163 6.86777 7.68592C6.86777 8.6202 7.62516 9.37759 8.55945 9.37759Z" fill="#EBEAFC"></path>
                          <path d="M5.00021 4.39497L2.69281 3.38752C1.0637 2.67622 -0.530443 4.45315 0.352843 5.99579L2.21822 9.25364L5.00021 4.39497Z" fill="#8880EB"></path>
                          <path d="M14.7829 9.25365L12.001 4.39497L14.3084 3.38752C15.9375 2.67622 17.5316 4.45315 16.6483 5.99579L14.7829 9.25365Z" fill="#8880EB"></path>
                        </svg>
                      </div><span class="ms-3 fs-9 fw-medium text-light">Artemis</span>
                    </div>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6 bg-dark-light" style="height: 64px;">
                    <div class="d-inline-block px-2 bg-dark-light rounded-pill"><span class="fs-10 lh-lg fw-medium text-secondary-light">NO-CODE</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">Warsaw, Poland</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-6 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">Enrolled</span>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="rounded-end-4 py-6 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">June 06, 2022</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-3 px-4" style="height: 64px;">
                    <div class="d-flex align-items-center">
                      <div class="d-flex align-items-center justify-content-center bg-light-dark 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">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1026 1.07874C9.39376 -0.159221 7.60839 -0.159221 6.89956 1.07874L0.353332 12.5116C-0.529954 14.0542 1.06419 15.8312 2.69329 15.1199L7.76263 12.2913C8.23346 12.0858 8.76868 12.0858 9.23952 12.2913L14.3089 15.1199C15.938 15.8312 17.5321 14.0542 16.6488 12.5116L10.1026 1.07874ZM8.55945 9.37759C9.49374 9.37759 10.2511 8.6202 10.2511 7.68592C10.2511 6.75163 9.49374 5.99424 8.55945 5.99424C7.62516 5.99424 6.86777 6.75163 6.86777 7.68592C6.86777 8.6202 7.62516 9.37759 8.55945 9.37759Z" fill="#EBEAFC"></path>
                          <path d="M5.00021 4.39497L2.69281 3.38752C1.0637 2.67622 -0.530443 4.45315 0.352843 5.99579L2.21822 9.25364L5.00021 4.39497Z" fill="#8880EB"></path>
                          <path d="M14.7829 9.25365L12.001 4.39497L14.3084 3.38752C15.9375 2.67622 17.5316 4.45315 16.6483 5.99579L14.7829 9.25365Z" fill="#8880EB"></path>
                        </svg>
                      </div><span class="ms-3 fs-9 fw-medium text-light">Artemis</span>
                    </div>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6" style="height: 64px;">
                    <div class="d-inline-block px-2 bg-dark-light rounded-pill"><span class="fs-10 lh-lg fw-medium text-secondary-light">NO-CODE</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">Warsaw, Poland</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">Enrolled</span>
                  </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">June 06, 2022</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="rounded-start-4 py-3 px-4 bg-dark-light" style="height: 64px;">
                    <div class="d-flex align-items-center">
                      <div class="d-flex align-items-center justify-content-center bg-light-dark 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">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1026 1.07874C9.39376 -0.159221 7.60839 -0.159221 6.89956 1.07874L0.353332 12.5116C-0.529954 14.0542 1.06419 15.8312 2.69329 15.1199L7.76263 12.2913C8.23346 12.0858 8.76868 12.0858 9.23952 12.2913L14.3089 15.1199C15.938 15.8312 17.5321 14.0542 16.6488 12.5116L10.1026 1.07874ZM8.55945 9.37759C9.49374 9.37759 10.2511 8.6202 10.2511 7.68592C10.2511 6.75163 9.49374 5.99424 8.55945 5.99424C7.62516 5.99424 6.86777 6.75163 6.86777 7.68592C6.86777 8.6202 7.62516 9.37759 8.55945 9.37759Z" fill="#EBEAFC"></path>
                          <path d="M5.00021 4.39497L2.69281 3.38752C1.0637 2.67622 -0.530443 4.45315 0.352843 5.99579L2.21822 9.25364L5.00021 4.39497Z" fill="#8880EB"></path>
                          <path d="M14.7829 9.25365L12.001 4.39497L14.3084 3.38752C15.9375 2.67622 17.5316 4.45315 16.6483 5.99579L14.7829 9.25365Z" fill="#8880EB"></path>
                        </svg>
                      </div><span class="ms-3 fs-9 fw-medium text-light">Artemis</span>
                    </div>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6 bg-dark-light" style="height: 64px;">
                    <div class="d-inline-block px-2 bg-dark-light rounded-pill"><span class="fs-10 lh-lg fw-medium text-secondary-light">NO-CODE</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">Warsaw, Poland</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-6 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">Enrolled</span>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="rounded-end-4 py-6 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">June 06, 2022</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-3 px-4" style="height: 64px;">
                    <div class="d-flex align-items-center">
                      <div class="d-flex align-items-center justify-content-center bg-light-dark 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">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1026 1.07874C9.39376 -0.159221 7.60839 -0.159221 6.89956 1.07874L0.353332 12.5116C-0.529954 14.0542 1.06419 15.8312 2.69329 15.1199L7.76263 12.2913C8.23346 12.0858 8.76868 12.0858 9.23952 12.2913L14.3089 15.1199C15.938 15.8312 17.5321 14.0542 16.6488 12.5116L10.1026 1.07874ZM8.55945 9.37759C9.49374 9.37759 10.2511 8.6202 10.2511 7.68592C10.2511 6.75163 9.49374 5.99424 8.55945 5.99424C7.62516 5.99424 6.86777 6.75163 6.86777 7.68592C6.86777 8.6202 7.62516 9.37759 8.55945 9.37759Z" fill="#EBEAFC"></path>
                          <path d="M5.00021 4.39497L2.69281 3.38752C1.0637 2.67622 -0.530443 4.45315 0.352843 5.99579L2.21822 9.25364L5.00021 4.39497Z" fill="#8880EB"></path>
                          <path d="M14.7829 9.25365L12.001 4.39497L14.3084 3.38752C15.9375 2.67622 17.5316 4.45315 16.6483 5.99579L14.7829 9.25365Z" fill="#8880EB"></path>
                        </svg>
                      </div><span class="ms-3 fs-9 fw-medium text-light">Artemis</span>
                    </div>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6" style="height: 64px;">
                    <div class="d-inline-block px-2 bg-dark-light rounded-pill"><span class="fs-10 lh-lg fw-medium text-secondary-light">NO-CODE</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">Warsaw, Poland</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">Enrolled</span>
                  </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">June 06, 2022</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="rounded-start-4 py-3 px-4 bg-dark-light" style="height: 64px;">
                    <div class="d-flex align-items-center">
                      <div class="d-flex align-items-center justify-content-center bg-light-dark 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">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1026 1.07874C9.39376 -0.159221 7.60839 -0.159221 6.89956 1.07874L0.353332 12.5116C-0.529954 14.0542 1.06419 15.8312 2.69329 15.1199L7.76263 12.2913C8.23346 12.0858 8.76868 12.0858 9.23952 12.2913L14.3089 15.1199C15.938 15.8312 17.5321 14.0542 16.6488 12.5116L10.1026 1.07874ZM8.55945 9.37759C9.49374 9.37759 10.2511 8.6202 10.2511 7.68592C10.2511 6.75163 9.49374 5.99424 8.55945 5.99424C7.62516 5.99424 6.86777 6.75163 6.86777 7.68592C6.86777 8.6202 7.62516 9.37759 8.55945 9.37759Z" fill="#EBEAFC"></path>
                          <path d="M5.00021 4.39497L2.69281 3.38752C1.0637 2.67622 -0.530443 4.45315 0.352843 5.99579L2.21822 9.25364L5.00021 4.39497Z" fill="#8880EB"></path>
                          <path d="M14.7829 9.25365L12.001 4.39497L14.3084 3.38752C15.9375 2.67622 17.5316 4.45315 16.6483 5.99579L14.7829 9.25365Z" fill="#8880EB"></path>
                        </svg>
                      </div><span class="ms-3 fs-9 fw-medium text-light">Artemis</span>
                    </div>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6 bg-dark-light" style="height: 64px;">
                    <div class="d-inline-block px-2 bg-dark-light rounded-pill"><span class="fs-10 lh-lg fw-medium text-secondary-light">NO-CODE</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">Warsaw, Poland</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-6 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">Enrolled</span>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="rounded-end-4 py-6 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">June 06, 2022</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="py-3 px-4" style="height: 64px;">
                    <div class="d-flex align-items-center">
                      <div class="d-flex align-items-center justify-content-center bg-light-dark 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">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1026 1.07874C9.39376 -0.159221 7.60839 -0.159221 6.89956 1.07874L0.353332 12.5116C-0.529954 14.0542 1.06419 15.8312 2.69329 15.1199L7.76263 12.2913C8.23346 12.0858 8.76868 12.0858 9.23952 12.2913L14.3089 15.1199C15.938 15.8312 17.5321 14.0542 16.6488 12.5116L10.1026 1.07874ZM8.55945 9.37759C9.49374 9.37759 10.2511 8.6202 10.2511 7.68592C10.2511 6.75163 9.49374 5.99424 8.55945 5.99424C7.62516 5.99424 6.86777 6.75163 6.86777 7.68592C6.86777 8.6202 7.62516 9.37759 8.55945 9.37759Z" fill="#EBEAFC"></path>
                          <path d="M5.00021 4.39497L2.69281 3.38752C1.0637 2.67622 -0.530443 4.45315 0.352843 5.99579L2.21822 9.25364L5.00021 4.39497Z" fill="#8880EB"></path>
                          <path d="M14.7829 9.25365L12.001 4.39497L14.3084 3.38752C15.9375 2.67622 17.5316 4.45315 16.6483 5.99579L14.7829 9.25365Z" fill="#8880EB"></path>
                        </svg>
                      </div><span class="ms-3 fs-9 fw-medium text-light">Artemis</span>
                    </div>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6" style="height: 64px;">
                    <div class="d-inline-block px-2 bg-dark-light rounded-pill"><span class="fs-10 lh-lg fw-medium text-secondary-light">NO-CODE</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">Warsaw, Poland</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">Enrolled</span>
                  </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">June 06, 2022</span></div>
                </td>
              </tr>
              <tr>
                <th class="p-0 bg-transparent" scope="row">
                  <div class="rounded-start-4 py-3 px-4 bg-dark-light" style="height: 64px;">
                    <div class="d-flex align-items-center">
                      <div class="d-flex align-items-center justify-content-center bg-light-dark 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">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1026 1.07874C9.39376 -0.159221 7.60839 -0.159221 6.89956 1.07874L0.353332 12.5116C-0.529954 14.0542 1.06419 15.8312 2.69329 15.1199L7.76263 12.2913C8.23346 12.0858 8.76868 12.0858 9.23952 12.2913L14.3089 15.1199C15.938 15.8312 17.5321 14.0542 16.6488 12.5116L10.1026 1.07874ZM8.55945 9.37759C9.49374 9.37759 10.2511 8.6202 10.2511 7.68592C10.2511 6.75163 9.49374 5.99424 8.55945 5.99424C7.62516 5.99424 6.86777 6.75163 6.86777 7.68592C6.86777 8.6202 7.62516 9.37759 8.55945 9.37759Z" fill="#EBEAFC"></path>
                          <path d="M5.00021 4.39497L2.69281 3.38752C1.0637 2.67622 -0.530443 4.45315 0.352843 5.99579L2.21822 9.25364L5.00021 4.39497Z" fill="#8880EB"></path>
                          <path d="M14.7829 9.25365L12.001 4.39497L14.3084 3.38752C15.9375 2.67622 17.5316 4.45315 16.6483 5.99579L14.7829 9.25365Z" fill="#8880EB"></path>
                        </svg>
                      </div><span class="ms-3 fs-9 fw-medium text-light">Artemis</span>
                    </div>
                  </div>
                </th>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6 bg-dark-light" style="height: 64px;">
                    <div class="d-inline-block px-2 bg-dark-light rounded-pill"><span class="fs-10 lh-lg fw-medium text-secondary-light">NO-CODE</span></div>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-6 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">Warsaw, Poland</span></div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="py-6 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">Enrolled</span>
                  </div>
                </td>
                <td class="p-0 bg-transparent">
                  <div class="rounded-end-4 py-6 px-6 bg-dark-light" style="height: 64px;"><span class="fs-9 fw-medium text-light">June 06, 2022</span></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 #151

Bootstrap

Trizzle

<section class="py-8 bg-dark-light">
  <div class="container">
    <div class="mw-sm mw-md-2xl mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-7 mb-6 mb-lg-0">
          <div class="row mb-n6">
            <div class="col-12 col-md-4 mb-6">
              <div class="pt-6 pb-4 px-4 bg-secondary rounded-4">
                <div class="d-flex align-items-center mb-9">
                  <div class="d-flex align-items-center justify-content-center bg-dark-light rounded-4" style="width: 32px; height: 32px;">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_695_7653)">
                        <path d="M7.3333 5.99996H9.99996C10.1768 5.99996 10.3463 5.92972 10.4714 5.8047C10.5964 5.67967 10.6666 5.5101 10.6666 5.33329C10.6666 5.15648 10.5964 4.98691 10.4714 4.86189C10.3463 4.73686 10.1768 4.66663 9.99996 4.66663H8.66663V3.99996C8.66663 3.82315 8.59639 3.65358 8.47137 3.52855C8.34634 3.40353 8.17677 3.33329 7.99996 3.33329C7.82315 3.33329 7.65358 3.40353 7.52856 3.52855C7.40353 3.65358 7.3333 3.82315 7.3333 3.99996V4.66663C6.80286 4.66663 6.29416 4.87734 5.91908 5.25241C5.54401 5.62748 5.3333 6.13619 5.3333 6.66663C5.3333 7.19706 5.54401 7.70577 5.91908 8.08084C6.29416 8.45591 6.80286 8.66663 7.3333 8.66663H8.66663C8.84344 8.66663 9.01301 8.73686 9.13803 8.86189C9.26306 8.98691 9.3333 9.15648 9.3333 9.33329C9.3333 9.5101 9.26306 9.67967 9.13803 9.8047C9.01301 9.92972 8.84344 9.99996 8.66663 9.99996H5.99996C5.82315 9.99996 5.65358 10.0702 5.52856 10.1952C5.40353 10.3202 5.3333 10.4898 5.3333 10.6666C5.3333 10.8434 5.40353 11.013 5.52856 11.138C5.65358 11.2631 5.82315 11.3333 5.99996 11.3333H7.3333V12C7.3333 12.1768 7.40353 12.3463 7.52856 12.4714C7.65358 12.5964 7.82315 12.6666 7.99996 12.6666C8.17677 12.6666 8.34634 12.5964 8.47137 12.4714C8.59639 12.3463 8.66663 12.1768 8.66663 12V11.3333C9.19706 11.3333 9.70577 11.1226 10.0808 10.7475C10.4559 10.3724 10.6666 9.86372 10.6666 9.33329C10.6666 8.80286 10.4559 8.29415 10.0808 7.91908C9.70577 7.54401 9.19706 7.33329 8.66663 7.33329H7.3333C7.15649 7.33329 6.98692 7.26305 6.86189 7.13803C6.73687 7.01301 6.66663 6.84344 6.66663 6.66663C6.66663 6.48981 6.73687 6.32025 6.86189 6.19522C6.98692 6.0702 7.15649 5.99996 7.3333 5.99996ZM7.99996 0.666626C6.54957 0.666626 5.13174 1.09672 3.92578 1.90252C2.71982 2.70831 1.77989 3.85362 1.22485 5.19361C0.669803 6.53361 0.524579 8.00809 0.807537 9.43062C1.0905 10.8531 1.78893 12.1598 2.81451 13.1854C3.8401 14.211 5.14677 14.9094 6.5693 15.1924C7.99183 15.4753 9.46632 15.3301 10.8063 14.7751C12.1463 14.22 13.2916 13.2801 14.0974 12.0741C14.9032 10.8682 15.3333 9.45036 15.3333 7.99996C15.3333 6.05504 14.5607 4.18978 13.1854 2.81451C11.8101 1.43924 9.94488 0.666626 7.99996 0.666626ZM7.99996 14C6.81327 14 5.65324 13.6481 4.66654 12.9888C3.67985 12.3295 2.91081 11.3924 2.45669 10.2961C2.00256 9.1997 1.88374 7.9933 2.11525 6.82942C2.34676 5.66553 2.91821 4.59643 3.75732 3.75732C4.59644 2.9182 5.66553 2.34676 6.82942 2.11525C7.99331 1.88374 9.19971 2.00256 10.2961 2.45668C11.3924 2.91081 12.3295 3.67984 12.9888 4.66654C13.6481 5.65323 14 6.81327 14 7.99996C14 9.59126 13.3678 11.1174 12.2426 12.2426C11.1174 13.3678 9.59126 14 7.99996 14Z" fill="#194BFB"></path>
                      </g>
                    </svg>
                  </div>
                  <div class="ms-4"><span class="d-block fs-10 fw-medium text-secondary-light">Main account</span><span class="d-block fw-semibold text-white">$16,045.00</span></div>
                </div>
                <div class="d-flex align-items-end gap-2">
                  <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div>
                  <div class="d-inline-block pt-16 w-25 bg-primary rounded-top-3"></div>
                  <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div>
                  <div class="d-inline-block pt-14 w-25 bg-dark-light rounded-top-3"></div>
                  <div class="d-inline-block pt-16 w-25 bg-dark-light rounded-top-3"></div>
                </div>
              </div>
            </div>
            <div class="col-12 col-md-4 mb-6">
              <div class="pt-6 pb-4 px-4 bg-secondary rounded-4">
                <div class="d-flex align-items-center mb-9">
                  <div class="d-flex align-items-center justify-content-center bg-dark-light rounded-4" 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="M6.33338 7.00001H8.00005C8.17686 7.00001 8.34643 6.92977 8.47145 6.80474C8.59647 6.67972 8.66671 6.51015 8.66671 6.33334C8.66671 6.15653 8.59647 5.98696 8.47145 5.86193C8.34643 5.73691 8.17686 5.66667 8.00005 5.66667H7.33338V5.33334C7.33338 5.15653 7.26314 4.98696 7.13812 4.86193C7.01309 4.73691 6.84352 4.66667 6.66671 4.66667C6.4899 4.66667 6.32033 4.73691 6.19531 4.86193C6.07028 4.98696 6.00005 5.15653 6.00005 5.33334V5.70001C5.595 5.78225 5.23495 6.01207 4.98982 6.34485C4.74468 6.67762 4.63194 7.08961 4.67348 7.50084C4.71501 7.91206 4.90787 8.29318 5.2146 8.57021C5.52133 8.84725 5.92006 9.00042 6.33338 9.00001H7.00005C7.08845 9.00001 7.17324 9.03512 7.23575 9.09764C7.29826 9.16015 7.33338 9.24493 7.33338 9.33334C7.33338 9.42174 7.29826 9.50653 7.23575 9.56904C7.17324 9.63155 7.08845 9.66667 7.00005 9.66667H5.33338C5.15657 9.66667 4.987 9.73691 4.86198 9.86193C4.73695 9.98696 4.66671 10.1565 4.66671 10.3333C4.66671 10.5101 4.73695 10.6797 4.86198 10.8047C4.987 10.9298 5.15657 11 5.33338 11H6.00005V11.3333C6.00005 11.5101 6.07028 11.6797 6.19531 11.8047C6.32033 11.9298 6.4899 12 6.66671 12C6.84352 12 7.01309 11.9298 7.13812 11.8047C7.26314 11.6797 7.33338 11.5101 7.33338 11.3333V10.9667C7.73843 10.8844 8.09847 10.6546 8.34361 10.3218C8.58875 9.98905 8.70149 9.57706 8.65995 9.16584C8.61841 8.75461 8.42556 8.37349 8.11882 8.09646C7.81209 7.81943 7.41336 7.66626 7.00005 7.66667H6.33338C6.24497 7.66667 6.16019 7.63155 6.09768 7.56904C6.03516 7.50653 6.00005 7.42174 6.00005 7.33334C6.00005 7.24493 6.03516 7.16015 6.09768 7.09764C6.16019 7.03512 6.24497 7.00001 6.33338 7.00001ZM14 8.00001H12V2C12.0005 1.88253 11.9699 1.76702 11.9114 1.66517C11.8529 1.56332 11.7684 1.47874 11.6667 1.42C11.5654 1.36149 11.4504 1.33069 11.3334 1.33069C11.2164 1.33069 11.1014 1.36149 11 1.42L9.00005 2.56667L7.00005 1.42C6.8987 1.36149 6.78374 1.33069 6.66671 1.33069C6.54969 1.33069 6.43473 1.36149 6.33338 1.42L4.33338 2.56667L2.33338 1.42C2.23203 1.36149 2.11707 1.33069 2.00005 1.33069C1.88302 1.33069 1.76806 1.36149 1.66671 1.42C1.56498 1.47874 1.48057 1.56332 1.42203 1.66517C1.3635 1.76702 1.33291 1.88253 1.33338 2V12.6667C1.33338 13.1971 1.54409 13.7058 1.91917 14.0809C2.29424 14.456 2.80295 14.6667 3.33338 14.6667H12.6667C13.1971 14.6667 13.7059 14.456 14.0809 14.0809C14.456 13.7058 14.6667 13.1971 14.6667 12.6667V8.66667C14.6667 8.48986 14.5965 8.32029 14.4715 8.19527C14.3464 8.07024 14.1769 8.00001 14 8.00001ZM3.33338 13.3333C3.15657 13.3333 2.987 13.2631 2.86197 13.1381C2.73695 13.0131 2.66671 12.8435 2.66671 12.6667V3.15334L4.00005 3.91334C4.10294 3.96708 4.2173 3.99515 4.33338 3.99515C4.44946 3.99515 4.56382 3.96708 4.66671 3.91334L6.66671 2.76667L8.66671 3.91334C8.7696 3.96708 8.88396 3.99515 9.00005 3.99515C9.11613 3.99515 9.23049 3.96708 9.33338 3.91334L10.6667 3.15334V12.6667C10.6685 12.8941 10.7091 13.1196 10.7867 13.3333H3.33338ZM13.3334 12.6667C13.3334 12.8435 13.2631 13.0131 13.1381 13.1381C13.0131 13.2631 12.8435 13.3333 12.6667 13.3333C12.4899 13.3333 12.3203 13.2631 12.1953 13.1381C12.0703 13.0131 12 12.8435 12 12.6667V9.33334H13.3334V12.6667Z" fill="#194BFB"></path>
                    </svg>
                  </div>
                  <div class="ms-4"><span class="d-block fs-10 fw-medium text-secondary-light">Taxes</span><span class="d-block fw-semibold text-white">$5,025.00</span></div>
                </div>
                <div class="d-flex align-items-end gap-2">
                  <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div>
                  <div class="d-inline-block pt-16 w-25 bg-dark-light rounded-top-3"></div>
                  <div class="d-inline-block pt-14 w-25 bg-dark-light rounded-top-3"></div>
                  <div class="d-inline-block pt-14 w-25 bg-dark-light rounded-top-3"></div>
                  <div class="d-inline-block pt-16 w-25 bg-dark-light rounded-top-3"></div>
                </div>
              </div>
            </div>
            <div class="col-12 col-md-4 mb-6">
              <div class="pt-6 pb-4 px-4 bg-secondary rounded-4">
                <div class="d-flex align-items-center mb-9">
                  <div class="d-flex align-items-center justify-content-center bg-dark-light rounded-4" 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="M14.1467 8C14.4786 7.63491 14.6638 7.16004 14.6667 6.66667C14.6667 6.13623 14.456 5.62753 14.0809 5.25245C13.7058 4.87738 13.1971 4.66667 12.6667 4.66667H9.21337C9.31987 4.36545 9.35266 4.04311 9.30899 3.72662C9.26532 3.41013 9.14646 3.10871 8.96237 2.84759C8.77828 2.58647 8.53432 2.37325 8.2509 2.22579C7.96748 2.07832 7.65286 2.0009 7.33337 2H3.33337C2.80294 2 2.29423 2.21071 1.91916 2.58579C1.54409 2.96086 1.33337 3.46957 1.33337 4C1.33631 4.49337 1.52151 4.96824 1.85337 5.33333C1.5254 5.70002 1.34409 6.17471 1.34409 6.66667C1.34409 7.15862 1.5254 7.63332 1.85337 8C1.5254 8.36668 1.34409 8.84138 1.34409 9.33333C1.34409 9.82529 1.5254 10.3 1.85337 10.6667C1.52151 11.0318 1.33631 11.5066 1.33337 12C1.33337 12.5304 1.54409 13.0391 1.91916 13.4142C2.29423 13.7893 2.80294 14 3.33337 14H12.6667C13.0519 13.9979 13.4283 13.8847 13.7506 13.6739C14.073 13.4631 14.3276 13.1637 14.4839 12.8116C14.6403 12.4596 14.6916 12.0699 14.6318 11.6894C14.5719 11.3089 14.4035 10.9538 14.1467 10.6667C14.4747 10.3 14.656 9.82529 14.656 9.33333C14.656 8.84138 14.4747 8.36668 14.1467 8ZM7.33337 12.6667H3.33337C3.15656 12.6667 2.98699 12.5964 2.86197 12.4714C2.73695 12.3464 2.66671 12.1768 2.66671 12C2.66671 11.8232 2.73695 11.6536 2.86197 11.5286C2.98699 11.4036 3.15656 11.3333 3.33337 11.3333H7.33337C7.51018 11.3333 7.67975 11.4036 7.80478 11.5286C7.9298 11.6536 8.00004 11.8232 8.00004 12C8.00004 12.1768 7.9298 12.3464 7.80478 12.4714C7.67975 12.5964 7.51018 12.6667 7.33337 12.6667ZM7.33337 10H3.33337C3.15656 10 2.98699 9.92976 2.86197 9.80474C2.73695 9.67971 2.66671 9.51014 2.66671 9.33333C2.66671 9.15652 2.73695 8.98695 2.86197 8.86193C2.98699 8.73691 3.15656 8.66667 3.33337 8.66667H7.33337C7.51018 8.66667 7.67975 8.73691 7.80478 8.86193C7.9298 8.98695 8.00004 9.15652 8.00004 9.33333C8.00004 9.51014 7.9298 9.67971 7.80478 9.80474C7.67975 9.92976 7.51018 10 7.33337 10ZM7.33337 7.33333H3.33337C3.15656 7.33333 2.98699 7.2631 2.86197 7.13807C2.73695 7.01305 2.66671 6.84348 2.66671 6.66667C2.66671 6.48986 2.73695 6.32029 2.86197 6.19526C2.98699 6.07024 3.15656 6 3.33337 6H7.33337C7.51018 6 7.67975 6.07024 7.80478 6.19526C7.9298 6.32029 8.00004 6.48986 8.00004 6.66667C8.00004 6.84348 7.9298 7.01305 7.80478 7.13807C7.67975 7.2631 7.51018 7.33333 7.33337 7.33333ZM7.33337 4.66667H3.33337C3.15656 4.66667 2.98699 4.59643 2.86197 4.4714C2.73695 4.34638 2.66671 4.17681 2.66671 4C2.66671 3.82319 2.73695 3.65362 2.86197 3.5286C2.98699 3.40357 3.15656 3.33333 3.33337 3.33333H7.33337C7.51018 3.33333 7.67975 3.40357 7.80478 3.5286C7.9298 3.65362 8.00004 3.82319 8.00004 4C8.00004 4.17681 7.9298 4.34638 7.80478 4.4714C7.67975 4.59643 7.51018 4.66667 7.33337 4.66667ZM13.1267 12.4733C13.0676 12.5357 12.9962 12.585 12.917 12.6183C12.8378 12.6516 12.7526 12.6681 12.6667 12.6667H9.21337C9.37324 12.2366 9.37324 11.7634 9.21337 11.3333H12.6667C12.8435 11.3333 13.0131 11.4036 13.1381 11.5286C13.2631 11.6536 13.3334 11.8232 13.3334 12C13.3321 12.0887 13.3132 12.1762 13.2777 12.2575C13.2423 12.3388 13.1909 12.4121 13.1267 12.4733ZM13.1267 9.80667C13.0676 9.869 12.9962 9.91837 12.917 9.95165C12.8378 9.98493 12.7526 10.0014 12.6667 10H9.21337C9.37324 9.56993 9.37324 9.09674 9.21337 8.66667H12.6667C12.8435 8.66667 13.0131 8.73691 13.1381 8.86193C13.2631 8.98695 13.3334 9.15652 13.3334 9.33333C13.3321 9.42201 13.3132 9.50955 13.2777 9.59083C13.2423 9.6721 13.1909 9.74548 13.1267 9.80667ZM13.1267 7.14C13.0676 7.20233 12.9962 7.2517 12.917 7.28499C12.8378 7.31827 12.7526 7.33473 12.6667 7.33333H9.21337C9.37324 6.90327 9.37324 6.43007 9.21337 6H12.6667C12.8435 6 13.0131 6.07024 13.1381 6.19526C13.2631 6.32029 13.3334 6.48986 13.3334 6.66667C13.3321 6.75534 13.3132 6.84288 13.2777 6.92416C13.2423 7.00544 13.1909 7.07882 13.1267 7.14Z" fill="#194BFB"></path>
                    </svg>
                  </div>
                  <div class="ms-4"><span class="d-block fs-10 fw-medium text-secondary-light">Savings</span><span class="d-block fw-semibold text-white">$2,525.00</span></div>
                </div>
                <div class="d-flex align-items-end gap-2">
                  <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div>
                  <div class="d-inline-block pt-16 w-25 bg-primary rounded-top-3"></div>
                  <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div>
                  <div class="d-inline-block pt-14 w-25 bg-dark-light rounded-top-3"></div>
                  <div class="d-inline-block pt-16 w-25 bg-dark-light rounded-top-3"></div>
                </div>
              </div>
            </div>
            <div class="col-12 mb-6">
              <div class="py-6 px-5 bg-secondary rounded-4">
                <div class="d-md-flex flex-wrap align-items-center justify-content-between">
                  <h6 class="fs-8 fw-semibold text-secondary-light mb-4 mb-md-0">Money Flow</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="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="12" height="4" rx="2" fill="#194BFB"></rect>
                      </svg><span class="ms-2 fs-10 fw-semibold text-light">Income</span>
                    </div>
                    <div class="d-flex mb-4 mb-sm-0 me-sm-4 align-items-center">
                      <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="12" height="4" rx="2" fill="#FACC15"></rect>
                      </svg><span class="ms-2 fs-10 fw-semibold text-light">Expenses</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-6 fs-10 fw-semibold text-secondary-light bg-transparent border-0" name="" id="">
                        <option value="1">7 Days</option>
                        <option value="1">14 Days</option>
                        <option value="1">21 Days</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="chart mt-8 mb-3" data-type="chart-line" style="min-height: 200px;"></div>
              </div>
            </div>
            <div class="col-12 mb-6">
              <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>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="pt-6 pb-4 px-4 bg-secondary rounded-4">
            <div class="d-flex mb-8 align-items-center justify-content-between">
              <h6 class="fs-8 fw-semibold text-secondary-light mb-0">Wallet</h6>
              <button class="btn btn-outline-secondary-light p-0 border-0 bg-transparent">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 12C4 12.5523 4.44772 13 5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M18 12C18 12.5523 18.4477 13 19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
            <div class="mw-xs mx-auto mb-9"><img class="img-fluid d-block mb-6 mx-auto" src="trizzle-assets/images/card.png" alt="">
              <div class="d-flex mb-6 align-items-center justify-content-center">
                <button class="btn btn-primary me-1 pt-1 pb-0 ps-3 pe-4 rounded-pill"></button>
                <button class="btn btn-secondary-dark me-1 pt-1 pb-0 px-2 rounded-pill"></button>
                <button class="btn btn-secondary-dark me-1 pt-1 pb-0 px-2 rounded-pill"></button>
              </div><a class="btn w-100 d-flex align-items-center justify-content-center btn-secondary-dark" href="#">
                <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.3334 3.75H4.66669C4.00365 3.75 3.36776 4.01339 2.89892 4.48223C2.43008 4.95107 2.16669 5.58696 2.16669 6.25V13.75C2.16669 14.413 2.43008 15.0489 2.89892 15.5178C3.36776 15.9866 4.00365 16.25 4.66669 16.25H16.3334C16.9964 16.25 17.6323 15.9866 18.1011 15.5178C18.57 15.0489 18.8334 14.413 18.8334 13.75V6.25C18.8334 5.58696 18.57 4.95107 18.1011 4.48223C17.6323 4.01339 16.9964 3.75 16.3334 3.75ZM17.1667 13.75C17.1667 13.971 17.0789 14.183 16.9226 14.3393C16.7663 14.4955 16.5544 14.5833 16.3334 14.5833H4.66669C4.44567 14.5833 4.23371 14.4955 4.07743 14.3393C3.92115 14.183 3.83335 13.971 3.83335 13.75V6.25C3.83335 6.02899 3.92115 5.81702 4.07743 5.66074C4.23371 5.50446 4.44567 5.41667 4.66669 5.41667H16.3334C16.5544 5.41667 16.7663 5.50446 16.9226 5.66074C17.0789 5.81702 17.1667 6.02899 17.1667 6.25V13.75ZM13.8334 8.75C13.3903 8.7531 12.956 8.87389 12.575 9.1C12.1954 8.87477 11.763 8.75405 11.3216 8.7501C10.8803 8.74615 10.4458 8.85912 10.0622 9.07752C9.67867 9.29592 9.35978 9.61197 9.13796 9.99355C8.91613 10.3751 8.79928 10.8086 8.79928 11.25C8.79928 11.6914 8.91613 12.1249 9.13796 12.5065C9.35978 12.888 9.67867 13.2041 10.0622 13.4225C10.4458 13.6409 10.8803 13.7538 11.3216 13.7499C11.763 13.746 12.1954 13.6252 12.575 13.4C12.9065 13.5967 13.279 13.714 13.6634 13.7429C14.0477 13.7718 14.4336 13.7114 14.7908 13.5664C15.1479 13.4215 15.4667 13.1959 15.7223 12.9074C15.9778 12.6188 16.1632 12.275 16.2639 11.903C16.3645 11.5309 16.3778 11.1406 16.3027 10.7625C16.2275 10.3845 16.066 10.0289 15.8307 9.72364C15.5953 9.41836 15.2926 9.17163 14.9461 9.00273C14.5996 8.83383 14.2188 8.74733 13.8334 8.75ZM11.475 12.0833C11.4279 12.0874 11.3805 12.0874 11.3334 12.0833C11.1123 12.0833 10.9004 11.9955 10.7441 11.8393C10.5878 11.683 10.5 11.471 10.5 11.25C10.5 11.029 10.5878 10.817 10.7441 10.6607C10.9004 10.5045 11.1123 10.4167 11.3334 10.4167C11.3805 10.4126 11.4279 10.4126 11.475 10.4167C11.2864 10.9333 11.2864 11.5 11.475 12.0167V12.0833ZM13.8334 12.0833C13.6685 12.0833 13.5074 12.0345 13.3704 11.9429C13.2333 11.8513 13.1265 11.7212 13.0635 11.5689C13.0004 11.4166 12.9839 11.2491 13.016 11.0874C13.0482 10.9258 13.1276 10.7773 13.2441 10.6607C13.3606 10.5442 13.5091 10.4648 13.6708 10.4327C13.8324 10.4005 14 10.417 14.1523 10.4801C14.3045 10.5432 14.4347 10.65 14.5262 10.787C14.6178 10.9241 14.6667 11.0852 14.6667 11.25C14.6667 11.471 14.5789 11.683 14.4226 11.8393C14.2663 11.9955 14.0544 12.0833 13.8334 12.0833Z" fill="#3D485B"></path>
                </svg><span class="ms-2">Add new Card</span></a>
            </div>
            <div class="pt-8 border-top border-light-dark">
              <div class="d-flex mb-9 align-items-center justify-content-between">
                <h6 class="fs-8 fw-semibold text-secondary-light mb-0">Recent Activity</h6><span class="fs-9 fw-medium text-secondary-light">View all</span>
              </div>
              <div class="d-flex mb-6 align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                  <div class="d-flex me-3 align-items-center justify-content-center rounded-pill bg-dark-light" 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="M13.479 9.88303C11.853 9.27903 10.967 8.81603 10.967 8.08003C10.967 7.45803 11.478 7.10303 12.39 7.10303C14.057 7.10303 15.769 7.74503 16.948 8.32303L17.614 4.21203C16.679 3.76603 14.767 3.03503 12.124 3.03503C10.254 3.03503 8.69903 3.52403 7.58803 4.43603C6.43303 5.39003 5.83103 6.77003 5.83103 8.43603C5.83103 11.459 7.67803 12.748 10.678 13.839C12.614 14.527 13.257 15.017 13.257 15.773C13.257 16.505 12.628 16.928 11.495 16.928C10.092 16.928 7.77903 16.239 6.26403 15.35L5.59003 19.507C6.89403 20.239 9.29503 20.995 11.787 20.995C13.763 20.995 15.411 20.528 16.522 19.639C17.767 18.662 18.412 17.217 18.412 15.35C18.412 12.259 16.523 10.97 13.477 9.88203H13.479V9.88303Z" fill="#936DFF"></path>
                    </svg>
                  </div>
                  <div><span class="d-block fs-9 fw-semibold text-secondary-light">Stripe</span><span class="d-block fs-10 fw-semibold text-light-dark">Deposit</span></div>
                </div>
                <div class="text-end"><span class="d-block fs-9 fw-semibold text-secondary-light">+$523.10</span><span class="d-block fs-10 fw-semibold text-light-dark">Today at 7.18 AM</span></div>
              </div>
              <div class="d-flex mb-6 align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                  <div class="d-flex me-3 align-items-center justify-content-center rounded-pill bg-dark-light" style="width: 48px; height: 48px;">
                    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M18.4167 3.79172C18.4167 3.64807 18.3596 3.51029 18.258 3.40871C18.1564 3.30713 18.0187 3.25006 17.875 3.25006H15.1667C13.8029 3.18212 12.4676 3.65673 11.4527 4.57019C10.4377 5.48364 9.8256 6.76168 9.75 8.12506V11.0501H7.04167C6.89801 11.0501 6.76023 11.1071 6.65865 11.2087C6.55707 11.3103 6.5 11.4481 6.5 11.5917V14.4084C6.5 14.552 6.55707 14.6898 6.65865 14.7914C6.76023 14.893 6.89801 14.9501 7.04167 14.9501H9.75V22.2084C9.75 22.352 9.80707 22.4898 9.90865 22.5914C10.0102 22.693 10.148 22.7501 10.2917 22.7501H13.5417C13.6853 22.7501 13.8231 22.693 13.9247 22.5914C14.0263 22.4898 14.0833 22.352 14.0833 22.2084V14.9501H16.9217C17.0421 14.9518 17.1597 14.9133 17.2559 14.8407C17.352 14.7681 17.4212 14.6656 17.4525 14.5492L18.2325 11.7326C18.2541 11.6525 18.2569 11.5686 18.241 11.4873C18.225 11.4059 18.1906 11.3294 18.1403 11.2634C18.0901 11.1975 18.0254 11.144 17.9512 11.107C17.8771 11.07 17.7954 11.0505 17.7125 11.0501H14.0833V8.12506C14.1103 7.85691 14.2362 7.60843 14.4365 7.42814C14.6368 7.24786 14.8972 7.14871 15.1667 7.15006H17.875C18.0187 7.15006 18.1564 7.09299 18.258 6.99141C18.3596 6.88982 18.4167 6.75205 18.4167 6.60839V3.79172Z" fill="#194BFB"></path>
                    </svg>
                  </div>
                  <div><span class="d-block fs-9 fw-semibold text-secondary-light">Facebook</span><span class="d-block fs-10 fw-semibold text-light-dark">Advertising</span></div>
                </div>
                <div class="text-end"><span class="d-block fs-9 fw-semibold text-secondary-light">-$600.00</span><span class="d-block fs-10 fw-semibold text-light-dark">Today at 6.24 AM</span></div>
              </div>
              <div class="d-flex mb-6 align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                  <div class="d-flex me-3 align-items-center justify-content-center rounded-pill bg-dark-light" 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 5.80003C21.2483 6.12612 20.4534 6.34169 19.64 6.44003C20.4982 5.92735 21.1413 5.12081 21.45 4.17003C20.6436 4.65009 19.7608 4.98832 18.84 5.17003C18.2245 4.5026 17.405 4.05832 16.5098 3.90688C15.6147 3.75543 14.6945 3.90538 13.8938 4.33322C13.093 4.76105 12.4569 5.44256 12.0852 6.27086C11.7135 7.09917 11.6273 8.02742 11.84 8.91003C10.2094 8.82755 8.61444 8.40298 7.15865 7.66389C5.70287 6.9248 4.41885 5.88772 3.39 4.62003C3.02914 5.25019 2.83952 5.96385 2.84 6.69003C2.83872 7.36441 3.00422 8.02864 3.32176 8.62359C3.63929 9.21854 4.09902 9.72574 4.66 10.1C4.00798 10.0823 3.36989 9.90733 2.8 9.59003V9.64003C2.80489 10.5849 3.13599 11.4991 3.73731 12.228C4.33864 12.9569 5.17326 13.4557 6.1 13.64C5.74326 13.7486 5.37287 13.8058 5 13.81C4.74189 13.807 4.48442 13.7836 4.23 13.74C4.49391 14.5528 5.00462 15.2632 5.69107 15.7722C6.37753 16.2812 7.20558 16.5636 8.06 16.58C6.6172 17.7153 4.83588 18.3349 3 18.34C2.66574 18.3411 2.33174 18.3211 2 18.28C3.87443 19.4903 6.05881 20.1327 8.29 20.13C9.82969 20.146 11.3571 19.855 12.7831 19.2741C14.2091 18.6932 15.505 17.8339 16.5952 16.7465C17.6854 15.6591 18.548 14.3654 19.1326 12.9409C19.7172 11.5164 20.012 9.98975 20 8.45003C20 8.28003 20 8.10003 20 7.92003C20.7847 7.33484 21.4615 6.61745 22 5.80003Z" fill="#00ACEE"></path>
                    </svg>
                  </div>
                  <div><span class="d-block fs-9 fw-semibold text-secondary-light">Twitter</span><span class="d-block fs-10 fw-semibold text-light-dark">Advertising</span></div>
                </div>
                <div class="text-end"><span class="d-block fs-9 fw-semibold text-secondary-light">-$1,243.00</span><span class="d-block fs-10 fw-semibold text-light-dark">Yesterday at 10.00 PM </span></div>
              </div>
              <div class="d-flex mb-6 align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                  <div class="d-flex me-3 align-items-center justify-content-center rounded-pill bg-dark-light" style="width: 48px; height: 48px;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_161_2891)">
                        <path d="M5.14016 15.1181C5.14016 16.4976 4.0252 17.6126 2.64567 17.6126C1.26614 17.6126 0.151184 16.4976 0.151184 15.1181C0.151184 13.7386 1.26614 12.6236 2.64567 12.6236H5.14016V15.1181ZM6.3874 15.1181C6.3874 13.7386 7.50237 12.6236 8.88189 12.6236C10.2614 12.6236 11.3764 13.7386 11.3764 15.1181V21.3543C11.3764 22.7338 10.2614 23.8488 8.88189 23.8488C7.50237 23.8488 6.3874 22.7338 6.3874 21.3543V15.1181Z" fill="#E01E5A"></path>
                        <path d="M8.88144 5.10238C7.50191 5.10238 6.38695 3.98742 6.38695 2.60789C6.38695 1.22836 7.50191 0.113403 8.88144 0.113403C10.261 0.113403 11.3759 1.22836 11.3759 2.60789V5.10238H8.88144ZM8.88144 6.36852C10.261 6.36852 11.3759 7.48348 11.3759 8.86301C11.3759 10.2425 10.261 11.3575 8.88144 11.3575H2.62632C1.2468 11.3575 0.131836 10.2425 0.131836 8.86301C0.131836 7.48348 1.2468 6.36852 2.62632 6.36852H8.88144Z" fill="#36C5F0"></path>
                        <path d="M18.8787 8.86301C18.8787 7.48348 19.9937 6.36852 21.3732 6.36852C22.7528 6.36852 23.8677 7.48348 23.8677 8.86301C23.8677 10.2425 22.7528 11.3575 21.3732 11.3575H18.8787V8.86301ZM17.6315 8.86301C17.6315 10.2425 16.5165 11.3575 15.137 11.3575C13.7575 11.3575 12.6425 10.2425 12.6425 8.86301V2.60789C12.6425 1.22836 13.7575 0.113403 15.137 0.113403C16.5165 0.113403 17.6315 1.22836 17.6315 2.60789V8.86301Z" fill="#2EB67D"></path>
                        <path d="M15.137 18.8598C16.5165 18.8598 17.6315 19.9748 17.6315 21.3543C17.6315 22.7338 16.5165 23.8488 15.137 23.8488C13.7575 23.8488 12.6425 22.7338 12.6425 21.3543V18.8598H15.137ZM15.137 17.6126C13.7575 17.6126 12.6425 16.4976 12.6425 15.1181C12.6425 13.7386 13.7575 12.6236 15.137 12.6236H21.3921C22.7716 12.6236 23.8866 13.7386 23.8866 15.1181C23.8866 16.4976 22.7716 17.6126 21.3921 17.6126H15.137Z" fill="#ECB22E"></path>
                      </g>
                    </svg>
                  </div>
                  <div><span class="d-block fs-9 fw-semibold text-secondary-light">Slack</span><span class="d-block fs-10 fw-semibold text-light-dark">Payment</span></div>
                </div>
                <div class="text-end"><span class="d-block fs-9 fw-semibold text-secondary-light">-$190.00</span><span class="d-block fs-10 fw-semibold text-light-dark">Yesterday at 4.00 PM</span></div>
              </div>
              <div class="d-flex mb-6 align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                  <div class="d-flex me-3 align-items-center justify-content-center rounded-pill bg-dark-light" style="width: 48px; height: 48px;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_695_7689)">
                        <path d="M9.406 17.183C9.837 16.158 9.356 14.977 8.33 14.546L6.568 13.805C6.899 13.68 7.222 13.623 7.55 13.622C9.068 13.622 10.315 14.858 10.329 16.376C10.343 17.914 9.112 19.168 7.576 19.182C6.417 19.187 5.438 18.498 5.005 17.517L6.768 18.258C7.795 18.69 8.975 18.208 9.406 17.183ZM19 0H5C2.239 0 0 2.239 0 5V11.043L5.585 13.392C6.181 13.002 6.868 12.793 7.631 12.809L10.648 8.588C10.696 6.047 12.77 4 15.322 4C17.904 4 20 6.094 20 8.677C20 11.258 17.902 13.38 15.268 13.352L11.153 16.419L11.144 16.423C11.132 18.385 9.551 19.981 7.583 20C5.806 20.015 4.349 18.751 4.023 17.105L0 15.413V19C0 21.761 2.239 24 5 24H19C21.762 24 24 21.761 24 19V5C24 2.239 21.762 0 19 0ZM15.322 11.857C13.57 11.857 12.143 10.43 12.143 8.677C12.143 6.924 13.57 5.498 15.322 5.498C17.076 5.498 18.501 6.924 18.501 8.677C18.501 10.43 17.076 11.857 15.322 11.857ZM15.322 11.078C16.647 11.078 17.722 10.001 17.722 8.677C17.722 7.354 16.647 6.276 15.322 6.276C13.998 6.276 12.921 7.354 12.921 8.677C12.921 10.001 13.998 11.078 15.322 11.078Z" fill="white"></path>
                      </g>
                    </svg>
                  </div>
                  <div><span class="d-block fs-9 fw-semibold text-secondary-light">Steam</span><span class="d-block fs-10 fw-semibold text-light-dark">Payment</span></div>
                </div>
                <div class="text-end"><span class="d-block fs-9 fw-semibold text-secondary-light">-$450.00</span><span class="d-block fs-10 fw-semibold text-light-dark">Yesterday at 4.00 PM</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #152

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"><a class="btn mb-4 w-100 btn-outline-primary text-light border-0 d-flex align-items-center p-4 rounded-4" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19.8999 12.66C19.7396 12.4775 19.6512 12.2429 19.6512 12C19.6512 11.7571 19.7396 11.5225 19.8999 11.34L21.1799 9.90002C21.3209 9.74269 21.4085 9.54472 21.4301 9.33452C21.4516 9.12433 21.4061 8.9127 21.2999 8.73002L19.2999 5.27002C19.1948 5.08754 19.0348 4.94289 18.8426 4.8567C18.6505 4.77051 18.4361 4.74718 18.2299 4.79002L16.3499 5.17002C16.1107 5.21945 15.8616 5.17961 15.6498 5.05802C15.4379 4.93643 15.2779 4.7415 15.1999 4.51002L14.5899 2.68002C14.5228 2.4814 14.395 2.30888 14.2245 2.18686C14.0541 2.06484 13.8495 1.99948 13.6399 2.00002H9.6399C9.42183 1.98864 9.20603 2.04894 9.02546 2.17173C8.84489 2.29452 8.70948 2.47304 8.6399 2.68002L8.0799 4.51002C8.0019 4.7415 7.84187 4.93643 7.63001 5.05802C7.41815 5.17961 7.16911 5.21945 6.9299 5.17002L4.9999 4.79002C4.80445 4.7624 4.6052 4.79324 4.42724 4.87866C4.24929 4.96407 4.1006 5.10025 3.9999 5.27002L1.9999 8.73002C1.89106 8.91067 1.84212 9.1211 1.86008 9.33124C1.87804 9.54138 1.96198 9.74046 2.0999 9.90002L3.3699 11.34C3.53022 11.5225 3.61863 11.7571 3.61863 12C3.61863 12.2429 3.53022 12.4775 3.3699 12.66L2.0999 14.1C1.96198 14.2596 1.87804 14.4587 1.86008 14.6688C1.84212 14.8789 1.89106 15.0894 1.9999 15.27L3.9999 18.73C4.10499 18.9125 4.26502 19.0571 4.45715 19.1433C4.64928 19.2295 4.86372 19.2529 5.0699 19.21L6.9499 18.83C7.18911 18.7806 7.43815 18.8204 7.65001 18.942C7.86187 19.0636 8.0219 19.2585 8.0999 19.49L8.7099 21.32C8.77948 21.527 8.91489 21.7055 9.09546 21.8283C9.27603 21.9511 9.49183 22.0114 9.7099 22H13.7099C13.9195 22.0006 14.1241 21.9352 14.2945 21.8132C14.465 21.6912 14.5928 21.5186 14.6599 21.32L15.2699 19.49C15.3479 19.2585 15.5079 19.0636 15.7198 18.942C15.9316 18.8204 16.1807 18.7806 16.4199 18.83L18.2999 19.21C18.5061 19.2529 18.7205 19.2295 18.9126 19.1433C19.1048 19.0571 19.2648 18.9125 19.3699 18.73L21.3699 15.27C21.4761 15.0873 21.5216 14.8757 21.5001 14.6655C21.4785 14.4553 21.3909 14.2573 21.2499 14.1L19.8999 12.66ZM18.4099 14L19.2099 14.9L17.9299 17.12L16.7499 16.88C16.0297 16.7328 15.2805 16.8551 14.6445 17.2238C14.0085 17.5925 13.53 18.1819 13.2999 18.88L12.9199 20H10.3599L9.9999 18.86C9.76975 18.1619 9.29128 17.5725 8.6553 17.2038C8.01932 16.8351 7.27012 16.7128 6.5499 16.86L5.3699 17.1L4.0699 14.89L4.8699 13.99C5.36185 13.44 5.63383 12.7279 5.63383 11.99C5.63383 11.2521 5.36185 10.54 4.8699 9.99002L4.0699 9.09002L5.3499 6.89002L6.5299 7.13002C7.25012 7.27724 7.99932 7.1549 8.6353 6.78622C9.27128 6.41753 9.74975 5.82818 9.9799 5.13002L10.3599 4.00002H12.9199L13.2999 5.14002C13.53 5.83818 14.0085 6.42753 14.6445 6.79622C15.2805 7.1649 16.0297 7.28724 16.7499 7.14002L17.9299 6.90002L19.2099 9.12002L18.4099 10.02C17.9235 10.5688 17.6549 11.2767 17.6549 12.01C17.6549 12.7433 17.9235 13.4513 18.4099 14ZM11.6399 8.00002C10.8488 8.00002 10.0754 8.23461 9.41761 8.67414C8.75982 9.11366 8.24713 9.73838 7.94438 10.4693C7.64163 11.2002 7.56241 12.0045 7.71675 12.7804C7.8711 13.5563 8.25206 14.269 8.81147 14.8284C9.37088 15.3879 10.0836 15.7688 10.8595 15.9232C11.6355 16.0775 12.4397 15.9983 13.1706 15.6955C13.9015 15.3928 14.5262 14.8801 14.9658 14.2223C15.4053 13.5645 15.6399 12.7911 15.6399 12C15.6399 10.9392 15.2185 9.92174 14.4683 9.17159C13.7182 8.42144 12.7008 8.00002 11.6399 8.00002ZM11.6399 14C11.2443 14 10.8577 13.8827 10.5288 13.663C10.1999 13.4432 9.94351 13.1308 9.79214 12.7654C9.64076 12.3999 9.60116 11.9978 9.67833 11.6098C9.7555 11.2219 9.94598 10.8655 10.2257 10.5858C10.5054 10.3061 10.8618 10.1156 11.2497 10.0384C11.6377 9.96128 12.0398 10.0009 12.4053 10.1523C12.7707 10.3036 13.0831 10.56 13.3028 10.8889C13.5226 11.2178 13.6399 11.6045 13.6399 12C13.6399 12.5304 13.4292 13.0392 13.0541 13.4142C12.679 13.7893 12.1703 14 11.6399 14Z" fill="currentColor"></path>
          </svg><span class="ms-4 fs-9 fw-semibold">Settings</span></a><a class="btn mb-4 w-100 btn-outline-primary text-light border-0 d-flex align-items-center p-4 rounded-4" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.59 13L10.29 15.29C10.1963 15.3829 10.1219 15.4935 10.0711 15.6154C10.0203 15.7373 9.9942 15.868 9.9942 16C9.9942 16.132 10.0203 16.2627 10.0711 16.3846C10.1219 16.5064 10.1963 16.617 10.29 16.71C10.383 16.8037 10.4936 16.8781 10.6154 16.9289C10.7373 16.9796 10.868 17.0058 11 17.0058C11.132 17.0058 11.2627 16.9796 11.3846 16.9289C11.5064 16.8781 11.617 16.8037 11.71 16.71L15.71 12.71C15.801 12.6149 15.8724 12.5027 15.92 12.38C16.02 12.1365 16.02 11.8634 15.92 11.62C15.8724 11.4972 15.801 11.3851 15.71 11.29L11.71 7.28998C11.6168 7.19674 11.5061 7.12278 11.3842 7.07232C11.2624 7.02186 11.1319 6.99589 11 6.99589C10.8681 6.99589 10.7376 7.02186 10.6158 7.07232C10.4939 7.12278 10.3832 7.19674 10.29 7.28998C10.1968 7.38322 10.1228 7.49391 10.0723 7.61573C10.0219 7.73755 9.99591 7.86812 9.99591 7.99998C9.99591 8.13184 10.0219 8.26241 10.0723 8.38423C10.1228 8.50605 10.1968 8.61674 10.29 8.70998L12.59 11H3C2.73478 11 2.48043 11.1053 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5195 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H12.59ZM12 1.99998C10.1311 1.99163 8.29724 2.50719 6.70647 3.48817C5.11569 4.46915 3.83165 5.87629 3 7.54998C2.88065 7.78867 2.86101 8.065 2.94541 8.31818C3.0298 8.57135 3.21131 8.78063 3.45 8.89998C3.68869 9.01932 3.96502 9.03896 4.2182 8.95457C4.47137 8.87018 4.68065 8.68867 4.8 8.44998C5.43219 7.1733 6.39383 6.0886 7.58555 5.30797C8.77727 4.52733 10.1558 4.0791 11.5788 4.00957C13.0017 3.94004 14.4174 4.25175 15.6795 4.91249C16.9417 5.57322 18.0045 6.55901 18.7581 7.76797C19.5118 8.97694 19.9289 10.3652 19.9664 11.7894C20.0039 13.2135 19.6605 14.6218 18.9715 15.8688C18.2826 17.1158 17.2731 18.1561 16.0475 18.8824C14.8219 19.6087 13.4246 19.9945 12 20C10.5089 20.0064 9.04615 19.5923 7.77969 18.8052C6.51323 18.0181 5.49435 16.8899 4.84 15.55C4.72065 15.3113 4.51137 15.1298 4.2582 15.0454C4.00502 14.961 3.72869 14.9806 3.49 15.1C3.25131 15.2193 3.0698 15.4286 2.98541 15.6818C2.90101 15.935 2.92065 16.2113 3.04 16.45C3.83283 18.0455 5.03752 19.4002 6.52947 20.374C8.02142 21.3478 9.74645 21.9054 11.5261 21.989C13.3058 22.0726 15.0755 21.6792 16.6521 20.8495C18.2288 20.0198 19.5552 18.784 20.4941 17.2698C21.433 15.7556 21.9503 14.0181 21.9925 12.237C22.0347 10.4558 21.6003 8.69577 20.7342 7.13881C19.8682 5.58185 18.6018 4.28454 17.0663 3.38108C15.5307 2.47762 13.7816 2.00081 12 1.99998Z" fill="currentColor"></path>
          </svg><span class="ms-4 fs-9 fw-semibold">Log Out</span></a>
      </div>
    </div>
  </div>
  <div class="mx-auto ms-lg-80"></div>
</section>

Bootstrap Component #153

Bootstrap

Trizzle

<section class="py-8">
  <div class="container">
    <div class="row mb-n6">
      <div class="col-12 col-md-4 mb-6">
        <div class="pt-6 pb-4 px-4 bg-secondary rounded-4">
          <div class="d-flex align-items-center mb-9">
            <div class="d-flex align-items-center justify-content-center bg-dark-light rounded-4" style="width: 32px; height: 32px;">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_695_7653)">
                  <path d="M7.3333 5.99996H9.99996C10.1768 5.99996 10.3463 5.92972 10.4714 5.8047C10.5964 5.67967 10.6666 5.5101 10.6666 5.33329C10.6666 5.15648 10.5964 4.98691 10.4714 4.86189C10.3463 4.73686 10.1768 4.66663 9.99996 4.66663H8.66663V3.99996C8.66663 3.82315 8.59639 3.65358 8.47137 3.52855C8.34634 3.40353 8.17677 3.33329 7.99996 3.33329C7.82315 3.33329 7.65358 3.40353 7.52856 3.52855C7.40353 3.65358 7.3333 3.82315 7.3333 3.99996V4.66663C6.80286 4.66663 6.29416 4.87734 5.91908 5.25241C5.54401 5.62748 5.3333 6.13619 5.3333 6.66663C5.3333 7.19706 5.54401 7.70577 5.91908 8.08084C6.29416 8.45591 6.80286 8.66663 7.3333 8.66663H8.66663C8.84344 8.66663 9.01301 8.73686 9.13803 8.86189C9.26306 8.98691 9.3333 9.15648 9.3333 9.33329C9.3333 9.5101 9.26306 9.67967 9.13803 9.8047C9.01301 9.92972 8.84344 9.99996 8.66663 9.99996H5.99996C5.82315 9.99996 5.65358 10.0702 5.52856 10.1952C5.40353 10.3202 5.3333 10.4898 5.3333 10.6666C5.3333 10.8434 5.40353 11.013 5.52856 11.138C5.65358 11.2631 5.82315 11.3333 5.99996 11.3333H7.3333V12C7.3333 12.1768 7.40353 12.3463 7.52856 12.4714C7.65358 12.5964 7.82315 12.6666 7.99996 12.6666C8.17677 12.6666 8.34634 12.5964 8.47137 12.4714C8.59639 12.3463 8.66663 12.1768 8.66663 12V11.3333C9.19706 11.3333 9.70577 11.1226 10.0808 10.7475C10.4559 10.3724 10.6666 9.86372 10.6666 9.33329C10.6666 8.80286 10.4559 8.29415 10.0808 7.91908C9.70577 7.54401 9.19706 7.33329 8.66663 7.33329H7.3333C7.15649 7.33329 6.98692 7.26305 6.86189 7.13803C6.73687 7.01301 6.66663 6.84344 6.66663 6.66663C6.66663 6.48981 6.73687 6.32025 6.86189 6.19522C6.98692 6.0702 7.15649 5.99996 7.3333 5.99996ZM7.99996 0.666626C6.54957 0.666626 5.13174 1.09672 3.92578 1.90252C2.71982 2.70831 1.77989 3.85362 1.22485 5.19361C0.669803 6.53361 0.524579 8.00809 0.807537 9.43062C1.0905 10.8531 1.78893 12.1598 2.81451 13.1854C3.8401 14.211 5.14677 14.9094 6.5693 15.1924C7.99183 15.4753 9.46632 15.3301 10.8063 14.7751C12.1463 14.22 13.2916 13.2801 14.0974 12.0741C14.9032 10.8682 15.3333 9.45036 15.3333 7.99996C15.3333 6.05504 14.5607 4.18978 13.1854 2.81451C11.8101 1.43924 9.94488 0.666626 7.99996 0.666626ZM7.99996 14C6.81327 14 5.65324 13.6481 4.66654 12.9888C3.67985 12.3295 2.91081 11.3924 2.45669 10.2961C2.00256 9.1997 1.88374 7.9933 2.11525 6.82942C2.34676 5.66553 2.91821 4.59643 3.75732 3.75732C4.59644 2.9182 5.66553 2.34676 6.82942 2.11525C7.99331 1.88374 9.19971 2.00256 10.2961 2.45668C11.3924 2.91081 12.3295 3.67984 12.9888 4.66654C13.6481 5.65323 14 6.81327 14 7.99996C14 9.59126 13.3678 11.1174 12.2426 12.2426C11.1174 13.3678 9.59126 14 7.99996 14Z" fill="#194BFB"></path>
                </g>
              </svg>
            </div>
            <div class="ms-4"><span class="d-block fs-10 fw-medium text-secondary-light">Main account</span><span class="d-block fw-semibold text-white">$16,045.00</span></div>
          </div>
          <div class="d-flex align-items-end gap-2">
            <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div>
            <div class="d-inline-block pt-16 w-25 bg-primary rounded-top-3"></div>
            <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div>
            <div class="d-inline-block pt-14 w-25 bg-dark-light rounded-top-3"></div>
            <div class="d-inline-block pt-16 w-25 bg-dark-light rounded-top-3"></div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4 mb-6">
        <div class="pt-6 pb-4 px-4 bg-secondary rounded-4">
          <div class="d-flex align-items-center mb-9">
            <div class="d-flex align-items-center justify-content-center bg-dark-light rounded-4" 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="M6.33338 7.00001H8.00005C8.17686 7.00001 8.34643 6.92977 8.47145 6.80474C8.59647 6.67972 8.66671 6.51015 8.66671 6.33334C8.66671 6.15653 8.59647 5.98696 8.47145 5.86193C8.34643 5.73691 8.17686 5.66667 8.00005 5.66667H7.33338V5.33334C7.33338 5.15653 7.26314 4.98696 7.13812 4.86193C7.01309 4.73691 6.84352 4.66667 6.66671 4.66667C6.4899 4.66667 6.32033 4.73691 6.19531 4.86193C6.07028 4.98696 6.00005 5.15653 6.00005 5.33334V5.70001C5.595 5.78225 5.23495 6.01207 4.98982 6.34485C4.74468 6.67762 4.63194 7.08961 4.67348 7.50084C4.71501 7.91206 4.90787 8.29318 5.2146 8.57021C5.52133 8.84725 5.92006 9.00042 6.33338 9.00001H7.00005C7.08845 9.00001 7.17324 9.03512 7.23575 9.09764C7.29826 9.16015 7.33338 9.24493 7.33338 9.33334C7.33338 9.42174 7.29826 9.50653 7.23575 9.56904C7.17324 9.63155 7.08845 9.66667 7.00005 9.66667H5.33338C5.15657 9.66667 4.987 9.73691 4.86198 9.86193C4.73695 9.98696 4.66671 10.1565 4.66671 10.3333C4.66671 10.5101 4.73695 10.6797 4.86198 10.8047C4.987 10.9298 5.15657 11 5.33338 11H6.00005V11.3333C6.00005 11.5101 6.07028 11.6797 6.19531 11.8047C6.32033 11.9298 6.4899 12 6.66671 12C6.84352 12 7.01309 11.9298 7.13812 11.8047C7.26314 11.6797 7.33338 11.5101 7.33338 11.3333V10.9667C7.73843 10.8844 8.09847 10.6546 8.34361 10.3218C8.58875 9.98905 8.70149 9.57706 8.65995 9.16584C8.61841 8.75461 8.42556 8.37349 8.11882 8.09646C7.81209 7.81943 7.41336 7.66626 7.00005 7.66667H6.33338C6.24497 7.66667 6.16019 7.63155 6.09768 7.56904C6.03516 7.50653 6.00005 7.42174 6.00005 7.33334C6.00005 7.24493 6.03516 7.16015 6.09768 7.09764C6.16019 7.03512 6.24497 7.00001 6.33338 7.00001ZM14 8.00001H12V2C12.0005 1.88253 11.9699 1.76702 11.9114 1.66517C11.8529 1.56332 11.7684 1.47874 11.6667 1.42C11.5654 1.36149 11.4504 1.33069 11.3334 1.33069C11.2164 1.33069 11.1014 1.36149 11 1.42L9.00005 2.56667L7.00005 1.42C6.8987 1.36149 6.78374 1.33069 6.66671 1.33069C6.54969 1.33069 6.43473 1.36149 6.33338 1.42L4.33338 2.56667L2.33338 1.42C2.23203 1.36149 2.11707 1.33069 2.00005 1.33069C1.88302 1.33069 1.76806 1.36149 1.66671 1.42C1.56498 1.47874 1.48057 1.56332 1.42203 1.66517C1.3635 1.76702 1.33291 1.88253 1.33338 2V12.6667C1.33338 13.1971 1.54409 13.7058 1.91917 14.0809C2.29424 14.456 2.80295 14.6667 3.33338 14.6667H12.6667C13.1971 14.6667 13.7059 14.456 14.0809 14.0809C14.456 13.7058 14.6667 13.1971 14.6667 12.6667V8.66667C14.6667 8.48986 14.5965 8.32029 14.4715 8.19527C14.3464 8.07024 14.1769 8.00001 14 8.00001ZM3.33338 13.3333C3.15657 13.3333 2.987 13.2631 2.86197 13.1381C2.73695 13.0131 2.66671 12.8435 2.66671 12.6667V3.15334L4.00005 3.91334C4.10294 3.96708 4.2173 3.99515 4.33338 3.99515C4.44946 3.99515 4.56382 3.96708 4.66671 3.91334L6.66671 2.76667L8.66671 3.91334C8.7696 3.96708 8.88396 3.99515 9.00005 3.99515C9.11613 3.99515 9.23049 3.96708 9.33338 3.91334L10.6667 3.15334V12.6667C10.6685 12.8941 10.7091 13.1196 10.7867 13.3333H3.33338ZM13.3334 12.6667C13.3334 12.8435 13.2631 13.0131 13.1381 13.1381C13.0131 13.2631 12.8435 13.3333 12.6667 13.3333C12.4899 13.3333 12.3203 13.2631 12.1953 13.1381C12.0703 13.0131 12 12.8435 12 12.6667V9.33334H13.3334V12.6667Z" fill="#194BFB"></path>
              </svg>
            </div>
            <div class="ms-4"><span class="d-block fs-10 fw-medium text-secondary-light">Taxes</span><span class="d-block fw-semibold text-white">$5,025.00</span></div>
          </div>
          <div class="d-flex align-items-end gap-2">
            <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div>
            <div class="d-inline-block pt-16 w-25 bg-dark-light rounded-top-3"></div>
            <div class="d-inline-block pt-14 w-25 bg-dark-light rounded-top-3"></div>
            <div class="d-inline-block pt-14 w-25 bg-dark-light rounded-top-3"></div>
            <div class="d-inline-block pt-16 w-25 bg-dark-light rounded-top-3"></div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4 mb-6">
        <div class="pt-6 pb-4 px-4 bg-secondary rounded-4">
          <div class="d-flex align-items-center mb-9">
            <div class="d-flex align-items-center justify-content-center bg-dark-light rounded-4" 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="M14.1467 8C14.4786 7.63491 14.6638 7.16004 14.6667 6.66667C14.6667 6.13623 14.456 5.62753 14.0809 5.25245C13.7058 4.87738 13.1971 4.66667 12.6667 4.66667H9.21337C9.31987 4.36545 9.35266 4.04311 9.30899 3.72662C9.26532 3.41013 9.14646 3.10871 8.96237 2.84759C8.77828 2.58647 8.53432 2.37325 8.2509 2.22579C7.96748 2.07832 7.65286 2.0009 7.33337 2H3.33337C2.80294 2 2.29423 2.21071 1.91916 2.58579C1.54409 2.96086 1.33337 3.46957 1.33337 4C1.33631 4.49337 1.52151 4.96824 1.85337 5.33333C1.5254 5.70002 1.34409 6.17471 1.34409 6.66667C1.34409 7.15862 1.5254 7.63332 1.85337 8C1.5254 8.36668 1.34409 8.84138 1.34409 9.33333C1.34409 9.82529 1.5254 10.3 1.85337 10.6667C1.52151 11.0318 1.33631 11.5066 1.33337 12C1.33337 12.5304 1.54409 13.0391 1.91916 13.4142C2.29423 13.7893 2.80294 14 3.33337 14H12.6667C13.0519 13.9979 13.4283 13.8847 13.7506 13.6739C14.073 13.4631 14.3276 13.1637 14.4839 12.8116C14.6403 12.4596 14.6916 12.0699 14.6318 11.6894C14.5719 11.3089 14.4035 10.9538 14.1467 10.6667C14.4747 10.3 14.656 9.82529 14.656 9.33333C14.656 8.84138 14.4747 8.36668 14.1467 8ZM7.33337 12.6667H3.33337C3.15656 12.6667 2.98699 12.5964 2.86197 12.4714C2.73695 12.3464 2.66671 12.1768 2.66671 12C2.66671 11.8232 2.73695 11.6536 2.86197 11.5286C2.98699 11.4036 3.15656 11.3333 3.33337 11.3333H7.33337C7.51018 11.3333 7.67975 11.4036 7.80478 11.5286C7.9298 11.6536 8.00004 11.8232 8.00004 12C8.00004 12.1768 7.9298 12.3464 7.80478 12.4714C7.67975 12.5964 7.51018 12.6667 7.33337 12.6667ZM7.33337 10H3.33337C3.15656 10 2.98699 9.92976 2.86197 9.80474C2.73695 9.67971 2.66671 9.51014 2.66671 9.33333C2.66671 9.15652 2.73695 8.98695 2.86197 8.86193C2.98699 8.73691 3.15656 8.66667 3.33337 8.66667H7.33337C7.51018 8.66667 7.67975 8.73691 7.80478 8.86193C7.9298 8.98695 8.00004 9.15652 8.00004 9.33333C8.00004 9.51014 7.9298 9.67971 7.80478 9.80474C7.67975 9.92976 7.51018 10 7.33337 10ZM7.33337 7.33333H3.33337C3.15656 7.33333 2.98699 7.2631 2.86197 7.13807C2.73695 7.01305 2.66671 6.84348 2.66671 6.66667C2.66671 6.48986 2.73695 6.32029 2.86197 6.19526C2.98699 6.07024 3.15656 6 3.33337 6H7.33337C7.51018 6 7.67975 6.07024 7.80478 6.19526C7.9298 6.32029 8.00004 6.48986 8.00004 6.66667C8.00004 6.84348 7.9298 7.01305 7.80478 7.13807C7.67975 7.2631 7.51018 7.33333 7.33337 7.33333ZM7.33337 4.66667H3.33337C3.15656 4.66667 2.98699 4.59643 2.86197 4.4714C2.73695 4.34638 2.66671 4.17681 2.66671 4C2.66671 3.82319 2.73695 3.65362 2.86197 3.5286C2.98699 3.40357 3.15656 3.33333 3.33337 3.33333H7.33337C7.51018 3.33333 7.67975 3.40357 7.80478 3.5286C7.9298 3.65362 8.00004 3.82319 8.00004 4C8.00004 4.17681 7.9298 4.34638 7.80478 4.4714C7.67975 4.59643 7.51018 4.66667 7.33337 4.66667ZM13.1267 12.4733C13.0676 12.5357 12.9962 12.585 12.917 12.6183C12.8378 12.6516 12.7526 12.6681 12.6667 12.6667H9.21337C9.37324 12.2366 9.37324 11.7634 9.21337 11.3333H12.6667C12.8435 11.3333 13.0131 11.4036 13.1381 11.5286C13.2631 11.6536 13.3334 11.8232 13.3334 12C13.3321 12.0887 13.3132 12.1762 13.2777 12.2575C13.2423 12.3388 13.1909 12.4121 13.1267 12.4733ZM13.1267 9.80667C13.0676 9.869 12.9962 9.91837 12.917 9.95165C12.8378 9.98493 12.7526 10.0014 12.6667 10H9.21337C9.37324 9.56993 9.37324 9.09674 9.21337 8.66667H12.6667C12.8435 8.66667 13.0131 8.73691 13.1381 8.86193C13.2631 8.98695 13.3334 9.15652 13.3334 9.33333C13.3321 9.42201 13.3132 9.50955 13.2777 9.59083C13.2423 9.6721 13.1909 9.74548 13.1267 9.80667ZM13.1267 7.14C13.0676 7.20233 12.9962 7.2517 12.917 7.28499C12.8378 7.31827 12.7526 7.33473 12.6667 7.33333H9.21337C9.37324 6.90327 9.37324 6.43007 9.21337 6H12.6667C12.8435 6 13.0131 6.07024 13.1381 6.19526C13.2631 6.32029 13.3334 6.48986 13.3334 6.66667C13.3321 6.75534 13.3132 6.84288 13.2777 6.92416C13.2423 7.00544 13.1909 7.07882 13.1267 7.14Z" fill="#194BFB"></path>
              </svg>
            </div>
            <div class="ms-4"><span class="d-block fs-10 fw-medium text-secondary-light">Savings</span><span class="d-block fw-semibold text-white">$2,525.00</span></div>
          </div>
          <div class="d-flex align-items-end gap-2">
            <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div>
            <div class="d-inline-block pt-16 w-25 bg-primary rounded-top-3"></div>
            <div class="d-inline-block pt-12 w-25 bg-dark-light rounded-top-3"></div>
            <div class="d-inline-block pt-14 w-25 bg-dark-light rounded-top-3"></div>
            <div class="d-inline-block pt-16 w-25 bg-dark-light rounded-top-3"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #154

Bootstrap

Trizzle

<section class="py-8">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-lg-3 mb-6 mb-lg-0">
        <div class="h-100 px-4 pt-6 pb-24 bg-secondary rounded-4">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div class="d-flex align-items-center">
              <h3 class="fs-8 fw-semibold text-light me-2 mb-0">To do</h3><span class="d-inline-flex align-items-center justify-content-center px-2 py-1 rounded-pill bg-dark-light fs-10 fw-medium text-light-dark">3</span>
            </div>
            <div>
              <button class="btn p-0 border-0 bg-transparent me-2 btn-outline-light-dark">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
                </svg>
              </button><a class="btn p-0 border-0 bg-transparent text-light-dark" href="#">
                <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
                </svg></a>
            </div>
          </div>
          <div class="pt-1 w-100 mb-4 rounded-pill bg-info"></div><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">Implement Login</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="#b9ddff"></circle>
              </svg><span class="ms-1 fs-10 fw-medium text-primary-light">Development</span>
            </div>
            <p class="fs-10 text-secondary-light lh-sm mb-10">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><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">Release MVP</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>
            <p class="fs-10 text-secondary-light lh-sm mb-10">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-2-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-2-circle-border.png" alt=""></div>
                </div>
              </div>
            </div></a><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">Design Review</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="#8565E6"></circle>
              </svg><span class="ms-1 fs-10 fw-medium text-info">Design</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 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-2-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-2-circle-border.png" alt=""></div>
                </div>
              </div>
            </div></a>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3 mb-6 mb-lg-0">
        <div class="h-100 px-4 pt-6 pb-24 bg-secondary rounded-4">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div class="d-flex align-items-center">
              <h3 class="fs-8 fw-semibold text-light me-2 mb-0">In progress</h3><span class="d-inline-flex align-items-center justify-content-center px-2 py-1 rounded-pill bg-dark-light fs-10 fw-medium text-light-dark">2</span>
            </div>
            <div>
              <button class="btn p-0 border-0 bg-transparent me-2 btn-outline-light-dark">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
                </svg>
              </button><a class="btn p-0 border-0 bg-transparent text-light-dark" href="#">
                <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
                </svg></a>
            </div>
          </div>
          <div class="pt-1 w-100 mb-4 rounded-pill bg-primary"></div><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">UI Adjustments</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="#8565E6"></circle>
              </svg><span class="ms-1 fs-10 fw-medium text-info">Design</span>
            </div>
            <p class="fs-10 text-secondary-light lh-sm mb-10">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><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">Design Review</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="#8565E6"></circle>
              </svg><span class="ms-1 fs-10 fw-medium text-info">Design</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 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-2-circle-border.png" alt=""></div>
                </div>
              </div>
            </div></a><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>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="h-100 px-4 pt-6 pb-24 bg-secondary rounded-4">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div class="d-flex align-items-center">
              <h3 class="fs-8 fw-semibold text-light me-2 mb-0">In Review</h3><span class="d-inline-flex align-items-center justify-content-center px-2 py-1 rounded-pill bg-dark-light fs-10 fw-medium text-light-dark">10</span>
            </div>
            <div>
              <button class="btn p-0 border-0 bg-transparent me-2 btn-outline-light-dark">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
                </svg>
              </button><a class="btn p-0 border-0 bg-transparent text-light-dark" href="#">
                <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
                </svg></a>
            </div>
          </div>
          <div class="pt-1 w-100 mb-4 rounded-pill bg-warning"></div><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">Implement Login</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="#b9ddff"></circle>
              </svg><span class="ms-1 fs-10 fw-medium text-primary-light">Development</span>
            </div>
            <p class="fs-10 text-secondary-light lh-sm mb-10">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><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><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">Design Review</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="#8565E6"></circle>
              </svg><span class="ms-1 fs-10 fw-medium text-info">Design</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 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-2-circle-border.png" alt=""><img class="ms-n3 img-fluid rounded-pill" style="width: 32px;" src="trizzle-assets/images/avatar-women-2-circle-border.png" alt=""></div>
                </div>
              </div>
            </div></a>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="h-100 px-4 pt-6 pb-24 bg-secondary rounded-4">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div class="d-flex align-items-center">
              <h3 class="fs-8 fw-semibold text-light me-2 mb-0">Done</h3><span class="d-inline-flex align-items-center justify-content-center px-2 py-1 rounded-pill bg-dark-light fs-10 fw-medium text-light-dark">2</span>
            </div>
            <div>
              <button class="btn p-0 border-0 bg-transparent me-2 btn-outline-light-dark">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
                </svg>
              </button><a class="btn p-0 border-0 bg-transparent text-light-dark" href="#">
                <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
                </svg></a>
            </div>
          </div>
          <div class="pt-1 w-100 mb-4 rounded-pill bg-success"></div><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">UI Adjustments</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="#8565E6"></circle>
              </svg><span class="ms-1 fs-10 fw-medium text-info">Design</span>
            </div>
            <p class="fs-10 text-secondary-light lh-sm mb-10">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><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">Design Review</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="#8565E6"></circle>
              </svg><span class="ms-1 fs-10 fw-medium text-info">Design</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 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-2-circle-border.png" alt=""></div>
                </div>
              </div>
            </div></a><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>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #155

Bootstrap

Trizzle

<section class="py-8">
  <div class="container">
    <div class="py-6 px-5 bg-secondary rounded-4">
      <div class="d-md-flex flex-wrap align-items-center justify-content-between">
        <h6 class="fs-8 fw-semibold text-secondary-light mb-4 mb-md-0">Money Flow</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="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="12" height="4" rx="2" fill="#194BFB"></rect>
            </svg><span class="ms-2 fs-10 fw-semibold text-light">Income</span>
          </div>
          <div class="d-flex mb-4 mb-sm-0 me-sm-4 align-items-center">
            <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="12" height="4" rx="2" fill="#FACC15"></rect>
            </svg><span class="ms-2 fs-10 fw-semibold text-light">Expenses</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-6 fs-10 fw-semibold text-secondary-light bg-transparent border-0" name="" id="">
              <option value="1">7 Days</option>
              <option value="1">14 Days</option>
              <option value="1">21 Days</option>
            </select>
          </div>
        </div>
      </div>
      <div class="chart mt-8 mb-3" data-type="chart-line" style="min-height: 200px;"></div>
    </div>
  </div>
</section>

Bootstrap Component #156

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 bg-secondary rounded-2 overflow-hidden">
      <div class="mw-sm mx-auto pt-12 pb-8 px-5 text-center">
        <div class="d-inline-flex align-items-center justify-content-center mb-5 bg-dark-light rounded-pill" style="width: 48px; height: 48px;">
          <svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.0005 15C11.8027 15 11.6093 15.0587 11.4449 15.1686C11.2804 15.2784 11.1523 15.4346 11.0766 15.6173C11.0009 15.8001 10.9811 16.0011 11.0197 16.1951C11.0583 16.3891 11.1535 16.5673 11.2933 16.7071C11.4332 16.847 11.6114 16.9422 11.8054 16.9808C11.9993 17.0194 12.2004 16.9996 12.3831 16.9239C12.5659 16.8482 12.722 16.72 12.8319 16.5556C12.9418 16.3911 13.0005 16.1978 13.0005 16C13.0005 15.7348 12.8951 15.4805 12.7076 15.2929C12.52 15.1054 12.2657 15 12.0005 15ZM22.6705 16.47L14.6205 2.47003C14.3603 2.00354 13.9802 1.61498 13.5196 1.3445C13.0591 1.07401 12.5346 0.931396 12.0005 0.931396C11.4663 0.931396 10.9419 1.07401 10.4813 1.3445C10.0207 1.61498 9.64065 2.00354 9.38046 2.47003L1.38046 16.47C1.11125 16.924 0.966598 17.441 0.9611 17.9688C0.955602 18.4966 1.08945 19.0166 1.34914 19.4761C1.60883 19.9356 1.98516 20.3185 2.44014 20.5861C2.89512 20.8536 3.41264 20.9964 3.94046 21H20.0605C20.5925 21.0053 21.1164 20.8689 21.5784 20.6049C22.0403 20.341 22.4238 19.9589 22.6894 19.4978C22.9551 19.0368 23.0933 18.5134 23.09 17.9814C23.0866 17.4493 22.9418 16.9277 22.6705 16.47ZM20.9405 18.47C20.8528 18.626 20.7249 18.7556 20.5701 18.8453C20.4154 18.935 20.2393 18.9815 20.0605 18.98H3.94046C3.76157 18.9815 3.58556 18.935 3.43077 18.8453C3.27599 18.7556 3.14811 18.626 3.06046 18.47C2.97269 18.318 2.92648 18.1456 2.92648 17.97C2.92648 17.7945 2.97269 17.622 3.06046 17.47L11.0605 3.47003C11.1444 3.30623 11.2719 3.16876 11.4289 3.07277C11.5859 2.97678 11.7664 2.92599 11.9505 2.92599C12.1345 2.92599 12.315 2.97678 12.472 3.07277C12.629 3.16876 12.7565 3.30623 12.8405 3.47003L20.8905 17.47C20.9897 17.6199 21.0467 17.7937 21.0555 17.9732C21.0643 18.1527 21.0245 18.3312 20.9405 18.49V18.47ZM12.0005 7.00003C11.7352 7.00003 11.4809 7.10538 11.2933 7.29292C11.1058 7.48046 11.0005 7.73481 11.0005 8.00003V12C11.0005 12.2652 11.1058 12.5196 11.2933 12.7071C11.4809 12.8947 11.7352 13 12.0005 13C12.2657 13 12.52 12.8947 12.7076 12.7071C12.8951 12.5196 13.0005 12.2652 13.0005 12V8.00003C13.0005 7.73481 12.8951 7.48046 12.7076 7.29292C12.52 7.10538 12.2657 7.00003 12.0005 7.00003Z" fill="#FF4842"></path>
          </svg>
        </div>
        <h4 class="fs-5 text-light fw-semibold mb-5">Deactivate account</h4>
        <p class="text-secondary-light fw-medium mb-0">Your account is important to you. Before deactivating it, please ensure that you have backed up all of your data.</p>
      </div>
      <div class="d-flex gap-4 justify-content-end pt-5 pb-6 px-6 text-right bg-dark-light"><a class="btn px-5 py-3 btn-secondary" href="#">Cancel</a><a class="btn px-5 py-3 btn-danger" href="#">Deactivate</a></div>
    </div>
  </div>
</section>

Bootstrap Component #157

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 bg-secondary rounded-2">
      <div class="position-relative px-6 px-8 px-md-16 py-16">
        <div class="position-absolute top-0 start-50 translate-middle d-flex 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-secondary">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-secondary">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-secondary">Password*</span>
          </div><span class="d-block 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-dark-light 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>
</section>

Bootstrap Component #158

Bootstrap

Trizzle

<section class="py-8">
  <div class="container">
    <div class="pt-10 pb-7 px-6 text-center bg-secondary rounded-4"><img class="d-block mx-auto mb-6 img-fluid" style="width: 112px; height: 112px;" src="trizzle-assets/images/avatar-men-1.png" alt=""><span class="d-block mb-3 fs-6 fw-bold text-white">John Doe</span><span class="d-block mb-3 text-secondary-light">Front-end Developer</span><span class="d-inline-block mb-6 px-2 bg-success-dark bg-opacity-50 text-success lh-lg fs-10 rounded-pill">Admin</span>
      <div class="d-flex align-items-center gap-4"><a class="btn py-3d-flex w-100 justify-content-center align-items-center btn-dark-light" href="#">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.6668 2.66666H3.3335C2.80306 2.66666 2.29436 2.87738 1.91928 3.25245C1.54421 3.62752 1.3335 4.13623 1.3335 4.66666V11.3333C1.3335 11.8638 1.54421 12.3725 1.91928 12.7475C2.29436 13.1226 2.80306 13.3333 3.3335 13.3333H12.6668C13.1973 13.3333 13.706 13.1226 14.081 12.7475C14.4561 12.3725 14.6668 11.8638 14.6668 11.3333V4.66666C14.6668 4.13623 14.4561 3.62752 14.081 3.25245C13.706 2.87738 13.1973 2.66666 12.6668 2.66666ZM12.3935 4L8.4735 7.92C8.41152 7.98248 8.33779 8.03208 8.25655 8.06593C8.17531 8.09977 8.08817 8.1172 8.00016 8.1172C7.91215 8.1172 7.82502 8.09977 7.74378 8.06593C7.66254 8.03208 7.5888 7.98248 7.52683 7.92L3.60683 4H12.3935ZM13.3335 11.3333C13.3335 11.5101 13.2633 11.6797 13.1382 11.8047C13.0132 11.9298 12.8436 12 12.6668 12H3.3335C3.15668 12 2.98712 11.9298 2.86209 11.8047C2.73707 11.6797 2.66683 11.5101 2.66683 11.3333V4.94L6.58683 8.86C6.96183 9.23453 7.47016 9.4449 8.00016 9.4449C8.53016 9.4449 9.03849 9.23453 9.4135 8.86L13.3335 4.94V11.3333Z" fill="#194BFB"></path>
          </svg><span class="ms-2 fs-9 fw-bold">Email</span></a><a class="btn py-3d-flex w-100 justify-content-center align-items-center btn-dark-light" href="#">
          <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.4601 8.66667C13.3134 8.66667 13.1601 8.62 13.0134 8.58667C12.7164 8.52121 12.4245 8.43432 12.1401 8.32666C11.8308 8.21415 11.4908 8.21999 11.1856 8.34307C10.8804 8.46614 10.6315 8.69775 10.4867 8.99333L10.3401 9.29333C9.69074 8.93212 9.09406 8.48349 8.56673 7.96C8.04325 7.43268 7.59461 6.836 7.2334 6.18666L7.5134 6C7.80898 5.85528 8.04059 5.60635 8.16366 5.30113C8.28674 4.9959 8.29258 4.65594 8.18007 4.34666C8.07422 4.06161 7.98736 3.76986 7.92007 3.47333C7.88673 3.32667 7.86007 3.17333 7.84007 3.02C7.75911 2.55041 7.51315 2.12516 7.14648 1.82082C6.77981 1.51649 6.31653 1.35307 5.84007 1.36H3.84007C3.55275 1.3573 3.26823 1.41654 3.00587 1.53369C2.74351 1.65083 2.50947 1.82313 2.31969 2.03885C2.1299 2.25458 1.98882 2.50866 1.90606 2.78381C1.82329 3.05895 1.80079 3.3487 1.84007 3.63333C2.19523 6.42625 3.47075 9.02125 5.46517 11.0084C7.45958 12.9956 10.0592 14.2617 12.8534 14.6067H13.1067C13.5983 14.6074 14.073 14.427 14.4401 14.1C14.651 13.9114 14.8195 13.6801 14.9344 13.4215C15.0493 13.163 15.108 12.883 15.1067 12.6V10.6C15.0986 10.1369 14.9299 9.69103 14.6296 9.33844C14.3293 8.98585 13.9159 8.74842 13.4601 8.66667ZM13.7934 12.6667C13.7933 12.7613 13.773 12.8549 13.7339 12.9411C13.6948 13.0273 13.6378 13.1042 13.5667 13.1667C13.4925 13.2313 13.4054 13.2796 13.3112 13.3083C13.217 13.337 13.1178 13.3456 13.0201 13.3333C10.5233 13.0132 8.20422 11.871 6.42854 10.0869C4.65286 8.30273 3.52167 5.97822 3.2134 3.48C3.20279 3.38234 3.21209 3.28355 3.24074 3.18959C3.26938 3.09563 3.31678 3.00846 3.38007 2.93333C3.44254 2.86222 3.51944 2.80523 3.60565 2.76614C3.69186 2.72706 3.78541 2.70678 3.88007 2.70667H5.88007C6.0351 2.70322 6.18648 2.75392 6.30816 2.85005C6.42984 2.94617 6.51421 3.08171 6.54673 3.23333C6.5734 3.41555 6.60673 3.59555 6.64673 3.77333C6.72375 4.12476 6.82624 4.47012 6.9534 4.80666L6.02007 5.24C5.94026 5.27661 5.86848 5.32863 5.80884 5.39306C5.7492 5.45749 5.70287 5.53307 5.67251 5.61546C5.64216 5.69785 5.62838 5.78542 5.63197 5.87315C5.63555 5.96087 5.65643 6.04703 5.6934 6.12666C6.65287 8.18183 8.3049 9.83387 10.3601 10.7933C10.5224 10.86 10.7044 10.86 10.8667 10.7933C10.9499 10.7636 11.0263 10.7176 11.0915 10.6581C11.1567 10.5986 11.2095 10.5267 11.2467 10.4467L11.6601 9.51333C12.0047 9.63658 12.3565 9.73899 12.7134 9.82C12.8912 9.86 13.0712 9.89333 13.2534 9.92C13.405 9.95252 13.5406 10.0369 13.6367 10.1586C13.7328 10.2802 13.7835 10.4316 13.7801 10.5867L13.7934 12.6667Z" fill="#194BFB"></path>
          </svg><span class="ms-2 fs-9 fw-bold">Call</span></a></div>
    </div>
  </div>
</section>

Bootstrap Component #159

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 bg-secondary rounded-2">
      <div class="position-relative px-6 px-8 px-md-16 py-16">
        <div class="position-absolute top-0 start-50 translate-middle d-flex 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">Log in to your account</h6>
          <p class="fw-medium text-secondary-light mb-0">Welcome back! Please enter your details.</p>
        </div>
        <form action="">
          <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-secondary">Email</span>
          </div>
          <div class="position-relative mb-6">
            <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-secondary">Password</span>
          </div>
          <div class="d-flex mb-6 flex-wrap gap-4 align-items-center justify-content-between">
            <div class="form-check">
              <input class="form-check-input bg-transparent border-light-dark" type="checkbox" value="" id="">
              <label class="form-check-label fs-10 lh-lg fw-semibold text-secondary-light" for="">Remember for 30 days</label>
            </div><a class="btn btn-link p-0 fs-10 fw-semibold" href="#">Forgot password?</a>
          </div><a class="btn mb-4 btn-primary lh-sm w-100" href="#">Sign In</a><a class="btn mb-6 btn-dark-light 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 In with Gmail</span></a>
          <p class="text-center fw-medium mb-0 text-secondary-light"><span>Don’t have an account?</span><a class="btn btn-link fw-medium p-0" href="#">Sign up</a></p>
        </form>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #160

Bootstrap

Trizzle

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark-light">
    <div class="container" 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="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 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-8" 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>
      </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-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>

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

Tailwind Component #141

Tailwind Component #142

Tailwind Component #143

Your next website starts here

Bootstrap Component #144

Bootstrap Component #145

Bootstrap Component #146

Bootstrap Component #147

Bootstrap Component #148

Bootstrap Component #149

Bootstrap Component #150

Bootstrap Component #151

Bootstrap Component #152

Bootstrap Component #153

Bootstrap Component #154

Bootstrap Component #155

Bootstrap Component #156

Bootstrap Component #157

Bootstrap Component #158

Bootstrap Component #159

Bootstrap Component #160

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