Tabler components

Card with bottom tabs Card with footer buttons Card with ribbon Card with side image Color input Comments card Empty state Image input Progress bar Revenue chart Sales widget Simple avatar Simple box
Revenue chart

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!

<div class="card">
   <div class="card-body">
      <div class="d-flex align-items-center">
         <div class="subheader">Revenue</div>
         <div class="ml-auto">
            <div class="dropdown">
               <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Last 7 days
               </a>
               <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                  <a class="dropdown-item active" href="#">Last 7 days</a>
                  <a class="dropdown-item" href="#">Last 30 days</a>
                  <a class="dropdown-item" href="#">Last 3 months</a>
               </div>
            </div>
         </div>
      </div>
      <div class="d-flex align-items-baseline">
         <div class="h1 mb-0 mr-2">$4,300</div>
         <div class="mr-auto">
            <span class="text-green d-inline-flex align-items-center lh-1">
               8% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
            </span>
         </div>
      </div>
   </div>
   <div id="chart-revenue-bg"  class="chart-sm" ></div>
</div>
Copy code