<div class="w-full p-4 rounded-lg bg-white border border-grey-100">
  <div class="flex flex-row items-center justify-between mb-6">
    <div class="flex flex-col">
      <div class="text-sm font-light text-grey-500">Conversions</div>
      <div class="text-sm font-bold"><span>This year</span></div>
    </div>
    <div class="relative"><button
        class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"><svg
          stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
          stroke-linejoin="round" class="stroke-current stroke-1" size="18" height="18" width="18"
          xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="1"></circle>
          <circle cx="12" cy="5" r="1"></circle>
          <circle cx="12" cy="19" r="1"></circle>
        </svg></button>
      <div class="dropdown absolute top-0 right-0 mt-8 ">
        <div class="dropdown-content w-48 bottom-start">
          <div class="flex flex-col w-full">
            <ul class="list-none">
              <li><a
                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                  href="/">Today</a></li>
              <li><a
                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                  href="/">This week</a></li>
              <li><a
                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                  href="/">This month</a></li>
              <li><a
                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                  href="/">This year</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-row w-full">
    <div style="width:100%;height:240px">
      <div class="recharts-responsive-container" style="width:100%;height:100%">
        <div class="recharts-wrapper"
          style="position: relative; cursor: default; width: 704px; height: 240px;"><svg
            class="recharts-surface" width="704" height="240" viewBox="0 0 704 240" version="1.1">
            <defs>
              <clipPath id="recharts3-clip">
                <rect x="40" y="10" height="190" width="654"></rect>
              </clipPath>
            </defs>
            <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
              <g class="recharts-cartesian-axis-ticks">
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30" x="67.25"
                    y="208" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
                    text-anchor="middle">
                    <tspan x="67.25" dy="0.71em">Jan</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="121.75" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="121.75" dy="0.71em">Feb</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="176.25" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="176.25" dy="0.71em">Mar</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="230.75" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="230.75" dy="0.71em">Apr</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="285.25" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="285.25" dy="0.71em">May</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="339.75" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="339.75" dy="0.71em">Jun</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="394.25" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="394.25" dy="0.71em">Jul</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="448.75" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="448.75" dy="0.71em">Aug</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="503.25" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="503.25" dy="0.71em">Sep</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="557.75" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="557.75" dy="0.71em">Oct</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="612.25" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="612.25" dy="0.71em">Nov</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
                    x="666.75" y="208" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
                    <tspan x="666.75" dy="0.71em">Dec</tspan>
                  </text></g>
              </g>
            </g>
            <g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
              <g class="recharts-cartesian-axis-ticks">
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
                    y="200" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
                    text-anchor="end">
                    <tspan x="32" dy="0.355em">0</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
                    y="152.5" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
                    <tspan x="32" dy="0.355em">65</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
                    y="105" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
                    text-anchor="end">
                    <tspan x="32" dy="0.355em">130</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
                    y="57.5" stroke="none" fill="#666"
                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
                    <tspan x="32" dy="0.355em">195</tspan>
                  </text></g>
                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
                    y="10" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
                    text-anchor="end">
                    <tspan x="32" dy="0.355em">260</tspan>
                  </text></g>
              </g>
            </g>
            <g class="recharts-layer recharts-bar">
              <g class="recharts-layer recharts-bar-rectangles">
                <g class="recharts-layer">
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="119.11538461538461" x="55" y="80.88461538461539"
                      radius="0" class="recharts-rectangle"
                      d="M 55,80.88461538461539 h 10 v 119.11538461538461 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="95" x="109.5" y="105" radius="0"
                      class="recharts-rectangle" d="M 109.5,105 h 10 v 95 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="122.03846153846155" x="164" y="77.96153846153845"
                      radius="0" class="recharts-rectangle"
                      d="M 164,77.96153846153845 h 10 v 122.03846153846155 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="81.11538461538461" x="218.5"
                      y="118.88461538461539" radius="0" class="recharts-rectangle"
                      d="M 218.5,118.88461538461539 h 10 v 81.11538461538461 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="114" x="273" y="86" radius="0"
                      class="recharts-rectangle" d="M 273,86 h 10 v 114 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="117.65384615384616" x="327.5"
                      y="82.34615384615384" radius="0" class="recharts-rectangle"
                      d="M 327.5,82.34615384615384 h 10 v 117.65384615384616 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="103.76923076923076" x="382" y="96.23076923076924"
                      radius="0" class="recharts-rectangle"
                      d="M 382,96.23076923076924 h 10 v 103.76923076923076 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="92.80769230769232" x="436.5"
                      y="107.19230769230768" radius="0" class="recharts-rectangle"
                      d="M 436.5,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="92.80769230769232" x="491" y="107.19230769230768"
                      radius="0" class="recharts-rectangle"
                      d="M 491,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="127.8846153846154" x="545.5" y="72.1153846153846"
                      radius="0" class="recharts-rectangle"
                      d="M 545.5,72.1153846153846 h 10 v 127.8846153846154 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="105.23076923076924" x="600" y="94.76923076923076"
                      radius="0" class="recharts-rectangle"
                      d="M 600,94.76923076923076 h 10 v 105.23076923076924 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#90caf9" width="10" height="115.46153846153845" x="654.5"
                      y="84.53846153846155" radius="0" class="recharts-rectangle"
                      d="M 654.5,84.53846153846155 h 10 v 115.46153846153845 h -10 Z"></path>
                  </g>
                </g>
              </g>
            </g>
            <g class="recharts-layer recharts-bar">
              <g class="recharts-layer recharts-bar-rectangles">
                <g class="recharts-layer">
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="112.53846153846155" x="69" y="87.46153846153845"
                      radius="0" class="recharts-rectangle"
                      d="M 69,87.46153846153845 h 10 v 112.53846153846155 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="151.26923076923077" x="123.5"
                      y="48.730769230769226" radius="0" class="recharts-rectangle"
                      d="M 123.5,48.730769230769226 h 10 v 151.26923076923077 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="181.23076923076923" x="178" y="18.769230769230774"
                      radius="0" class="recharts-rectangle"
                      d="M 178,18.769230769230774 h 10 v 181.23076923076923 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="165.8846153846154" x="232.5" y="34.11538461538461"
                      radius="0" class="recharts-rectangle"
                      d="M 232.5,34.11538461538461 h 10 v 165.8846153846154 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="156.38461538461536" x="287" y="43.61538461538464"
                      radius="0" class="recharts-rectangle"
                      d="M 287,43.61538461538464 h 10 v 156.38461538461536 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="118.38461538461539" x="341.5"
                      y="81.61538461538461" radius="0" class="recharts-rectangle"
                      d="M 341.5,81.61538461538461 h 10 v 118.38461538461539 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="138.84615384615384" x="396" y="61.15384615384616"
                      radius="0" class="recharts-rectangle"
                      d="M 396,61.15384615384616 h 10 v 138.84615384615384 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="175.3846153846154" x="450.5"
                      y="24.615384615384613" radius="0" class="recharts-rectangle"
                      d="M 450.5,24.615384615384613 h 10 v 175.3846153846154 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="155.65384615384613" x="505" y="44.34615384615387"
                      radius="0" class="recharts-rectangle"
                      d="M 505,44.34615384615387 h 10 v 155.65384615384613 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="179.76923076923077" x="559.5"
                      y="20.230769230769226" radius="0" class="recharts-rectangle"
                      d="M 559.5,20.230769230769226 h 10 v 179.76923076923077 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="173.19230769230768" x="614" y="26.80769230769232"
                      radius="0" class="recharts-rectangle"
                      d="M 614,26.80769230769232 h 10 v 173.19230769230768 h -10 Z"></path>
                  </g>
                  <g class="recharts-layer recharts-bar-rectangle">
                    <path fill="#1e88e5" width="10" height="146.15384615384616" x="668.5"
                      y="53.84615384615384" radius="0" class="recharts-rectangle"
                      d="M 668.5,53.84615384615384 h 10 v 146.15384615384616 h -10 Z"></path>
                  </g>
                </g>
              </g>
            </g>
          </svg>
          <div class="recharts-tooltip-wrapper"
            style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);">
          </div>
        </div>
        <div style="position:absolute;width:0;height:0;visibility:hidden;display:none"></div>
      </div>
    </div>
  </div>
</div>