Graphs UI Components – Trizzle Library

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="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-lg text-gray-200 font-bold tracking-wide">Money Flow</h4>
        </div>
        <div class="w-full sm:w-auto px-4 mb-4">
          <div class="flex flex-wrap items-center">
            <div class="flex items-center mr-4">
              <span class="inline-block w-3 h-1 mr-2 bg-blue-500 rounded-full"></span>
              <span class="text-xs font-semibold text-gray-100">Income</span>
            </div>
            <div class="flex items-center mr-6">
              <span class="inline-block w-3 h-1 mr-2 bg-yellow-500 rounded-full"></span>
              <span class="text-xs font-semibold text-gray-100">Expenses</span>
            </div>
            <div class="w-full sm:w-auto mt-4 sm:mt-0">
              <div class="relative inline-block max-w-max bg-gray-600 rounded-xl">
                <select class="relative py-3 pl-4 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="">7 Days</option>
                  <option value="">30 Days</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>
      </div>
      <div class="chart mt-8 mb-3" data-type="chart-line" style="min-height: 200px;"></div>
    </div>
  </div>
</section>

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