Home
Framework
Theme
All
670
Forms
12
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
51
General
7
Tables
34
Cards
70
Contact Us
9
Testimonials
19
Cards Section
37
Features
25
Teams Section
11
Faq
9
Headers
45
Blogs
13
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Http Codes
6
Authentication
15
Call To Actions
21
Teams
16
Pricing
13
UI Components Library
Discover 670 components available in Loopple’s library! Create modern templates without creativity of a designer
Card Image
<div class="card draggable" style="width: 18rem;">
<img src="https://demo-basic.adminkit.io/img/photos/unsplash-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card#&39;s content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div><div class="card draggable" style="width: 18rem;">
<img src="https://demo-basic.adminkit.io/img/photos/unsplash-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card#&39;s content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Section Tables
<div class="row removable">
<div class="col-12 col-lg-8 col-xxl-9 d-flex drop-zone">
<div class="card flex-fill draggable">
<div class="card-header">
<h5 class="card-title mb-0">Latest Projects</h5>
</div>
<table class="table table-hover my-0">
<thead>
<tr>
<th>Name</th>
<th class="d-none d-xl-table-cell">Start Date</th>
<th class="d-none d-xl-table-cell">End Date</th>
<th>Status</th>
<th class="d-none d-md-table-cell">Assignee</th>
</tr>
</thead>
<tbody>
<tr>
<td>Project Apollo</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Vanessa Tucker</td>
</tr>
<tr>
<td>Project Fireball</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-danger">Cancelled</span>
</td>
<td class="d-none d-md-table-cell">William Harris</td>
</tr>
<tr>
<td>Project Hades</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Sharon Lessman</td>
</tr>
<tr>
<td>Project Nitro</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-warning">In progress</span>
</td>
<td class="d-none d-md-table-cell">Vanessa Tucker</td>
</tr>
<tr>
<td>Project Phoenix</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">William Harris</td>
</tr>
<tr>
<td>Project X</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Sharon Lessman</td>
</tr>
<tr>
<td>Project Romeo</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Christina Mason</td>
</tr>
<tr>
<td>Project Wombat</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-warning">In progress</span>
</td>
<td class="d-none d-md-table-cell">William Harris</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12 col-lg-4 col-xxl-3 d-flex drop-zone">
<div class="card flex-fill w-100 draggable">
<div class="card-header">
<h5 class="card-title mb-0">Monthly Sales</h5>
</div>
<div class="card-body d-flex w-100">
<div class="align-self-center chart chart-lg">
<div class="chartjs-size-monitor">
<div class="chartjs-size-monitor-expand">
<div class=""></div>
</div>
<div class="chartjs-size-monitor-shrink">
<div class=""></div>
</div>
</div>
<canvas id="chartjs-dashboard-bar" width="528" height="700" style="display: block; height: 350px; width: 264px;" class="chartjs-render-monitor"></canvas>
</div>
</div>
</div>
</div>
</div><div class="row removable">
<div class="col-12 col-lg-8 col-xxl-9 d-flex drop-zone">
<div class="card flex-fill draggable">
<div class="card-header">
<h5 class="card-title mb-0">Latest Projects</h5>
</div>
<table class="table table-hover my-0">
<thead>
<tr>
<th>Name</th>
<th class="d-none d-xl-table-cell">Start Date</th>
<th class="d-none d-xl-table-cell">End Date</th>
<th>Status</th>
<th class="d-none d-md-table-cell">Assignee</th>
</tr>
</thead>
<tbody>
<tr>
<td>Project Apollo</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Vanessa Tucker</td>
</tr>
<tr>
<td>Project Fireball</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-danger">Cancelled</span>
</td>
<td class="d-none d-md-table-cell">William Harris</td>
</tr>
<tr>
<td>Project Hades</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Sharon Lessman</td>
</tr>
<tr>
<td>Project Nitro</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-warning">In progress</span>
</td>
<td class="d-none d-md-table-cell">Vanessa Tucker</td>
</tr>
<tr>
<td>Project Phoenix</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">William Harris</td>
</tr>
<tr>
<td>Project X</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Sharon Lessman</td>
</tr>
<tr>
<td>Project Romeo</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Christina Mason</td>
</tr>
<tr>
<td>Project Wombat</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-warning">In progress</span>
</td>
<td class="d-none d-md-table-cell">William Harris</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12 col-lg-4 col-xxl-3 d-flex drop-zone">
<div class="card flex-fill w-100 draggable">
<div class="card-header">
<h5 class="card-title mb-0">Monthly Sales</h5>
</div>
<div class="card-body d-flex w-100">
<div class="align-self-center chart chart-lg">
<div class="chartjs-size-monitor">
<div class="chartjs-size-monitor-expand">
<div class=""></div>
</div>
<div class="chartjs-size-monitor-shrink">
<div class=""></div>
</div>
</div>
<canvas id="chartjs-dashboard-bar" width="528" height="700" style="display: block; height: 350px; width: 264px;" class="chartjs-render-monitor"></canvas>
</div>
</div>
</div>
</div>
</div>Table Projects
Chart Bar
<div class="border-black/12.5 shadow-soft-xl relative z-20 flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border mb-4 draggable">
<div class="flex-auto p-4">
<div class="py-4 pr-1 mb-4 bg-gradient-to-tl from-gray-900 to-slate-800 rounded-xl">
<div>
<canvas id="chart-bars" class="chart-canvas chart-bars" height="340" width="655" style="display: block; box-sizing: border-box; height: 170px; width: 327.5px;"></canvas>
</div>
</div>
<h6 class="mt-6 mb-0 ml-2">Active Users</h6>
<p class="ml-2 leading-normal text-sm">( <span class="font-bold">+23%</span>) than last week </p>
<div class="w-full px-6 mx-auto max-w-screen-2xl rounded-xl">
<div class="flex flex-wrap mt-0 -mx-3">
<div class="flex-none w-1/4 max-w-full py-4 pl-0 pr-3 mt-0">
<div class="flex mb-2">
<div class="flex items-center justify-center w-5 h-5 mr-2 text-center bg-center rounded fill-current shadow-soft-2xl bg-gradient-to-tl from-purple-700 to-pink-500 text-neutral-900">
<svg width="10px" height="10px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>document</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(154.000000, 300.000000)">
<path class="color-background" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path>
<path class="color-background" d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<p class="mt-1 mb-0 font-semibold leading-tight text-xs">Users</p>
</div>
<h4 class="font-bold">36K</h4>
<div class="text-xs h-0.75 flex w-3/4 overflow-visible rounded-lg bg-gray-200">
<div class="duration-600 ease-soft -mt-0.38 -ml-px flex h-1.5 w-3/5 flex-col justify-center overflow-hidden whitespace-nowrap rounded-lg bg-slate-700 text-center text-white transition-all" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="flex-none w-1/4 max-w-full py-4 pl-0 pr-3 mt-0">
<div class="flex mb-2">
<div class="flex items-center justify-center w-5 h-5 mr-2 text-center bg-center rounded fill-current shadow-soft-2xl bg-gradient-to-tl from-blue-600 to-cyan-400 text-neutral-900">
<svg width="10px" height="10px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>spaceship</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(4.000000, 301.000000)">
<path class="color-background" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path>
<path class="color-background" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path>
<path class="color-background" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path>
<path class="color-background" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity="0.598539807"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<p class="mt-1 mb-0 font-semibold leading-tight text-xs">Clicks</p>
</div>
<h4 class="font-bold">2m</h4>
<div class="text-xs h-0.75 flex w-3/4 overflow-visible rounded-lg bg-gray-200">
<div class="duration-600 ease-soft -mt-0.38 w-9/10 -ml-px flex h-1.5 flex-col justify-center overflow-hidden whitespace-nowrap rounded-lg bg-slate-700 text-center text-white transition-all" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="flex-none w-1/4 max-w-full py-4 pl-0 pr-3 mt-0">
<div class="flex mb-2">
<div class="flex items-center justify-center w-5 h-5 mr-2 text-center bg-center rounded fill-current shadow-soft-2xl bg-gradient-to-tl from-red-500 to-yellow-400 text-neutral-900">
<svg width="10px" height="10px" viewBox="0 0 43 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>credit-card</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(453.000000, 454.000000)">
<path class="color-background" d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z" opacity="0.593633743"></path>
<path class="color-background" d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<p class="mt-1 mb-0 font-semibold leading-tight text-xs">Sales</p>
</div>
<h4 class="font-bold">435$</h4>
<div class="text-xs h-0.75 flex w-3/4 overflow-visible rounded-lg bg-gray-200">
<div class="duration-600 ease-soft -mt-0.38 w-3/10 -ml-px flex h-1.5 flex-col justify-center overflow-hidden whitespace-nowrap rounded-lg bg-slate-700 text-center text-white transition-all" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="flex-none w-1/4 max-w-full py-4 pl-0 pr-3 mt-0">
<div class="flex mb-2">
<div class="flex items-center justify-center w-5 h-5 mr-2 text-center bg-center rounded fill-current shadow-soft-2xl bg-gradient-to-tl from-red-600 to-rose-400 text-neutral-900">
<svg width="10px" height="10px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>settings</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(304.000000, 151.000000)">
<polygon class="color-background" opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon>
<path class="color-background" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity="0.596981957"></path>
<path class="color-background" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<p class="mt-1 mb-0 font-semibold leading-tight text-xs">Items</p>
</div>
<h4 class="font-bold">43</h4>
<div class="text-xs h-0.75 flex w-3/4 overflow-visible rounded-lg bg-gray-200">
<div class="duration-600 ease-soft -mt-0.38 -ml-px flex h-1.5 w-1/2 flex-col justify-center overflow-hidden whitespace-nowrap rounded-lg bg-slate-700 text-center text-white transition-all" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div><div class="border-black/12.5 shadow-soft-xl relative z-20 flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border mb-4 draggable">
<div class="flex-auto p-4">
<div class="py-4 pr-1 mb-4 bg-gradient-to-tl from-gray-900 to-slate-800 rounded-xl">
<div>
<canvas id="chart-bars" class="chart-canvas chart-bars" height="340" width="655" style="display: block; box-sizing: border-box; height: 170px; width: 327.5px;"></canvas>
</div>
</div>
<h6 class="mt-6 mb-0 ml-2">Active Users</h6>
<p class="ml-2 leading-normal text-sm">( <span class="font-bold">+23%</span>) than last week </p>
<div class="w-full px-6 mx-auto max-w-screen-2xl rounded-xl">
<div class="flex flex-wrap mt-0 -mx-3">
<div class="flex-none w-1/4 max-w-full py-4 pl-0 pr-3 mt-0">
<div class="flex mb-2">
<div class="flex items-center justify-center w-5 h-5 mr-2 text-center bg-center rounded fill-current shadow-soft-2xl bg-gradient-to-tl from-purple-700 to-pink-500 text-neutral-900">
<svg width="10px" height="10px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>document</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(154.000000, 300.000000)">
<path class="color-background" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path>
<path class="color-background" d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<p class="mt-1 mb-0 font-semibold leading-tight text-xs">Users</p>
</div>
<h4 class="font-bold">36K</h4>
<div class="text-xs h-0.75 flex w-3/4 overflow-visible rounded-lg bg-gray-200">
<div class="duration-600 ease-soft -mt-0.38 -ml-px flex h-1.5 w-3/5 flex-col justify-center overflow-hidden whitespace-nowrap rounded-lg bg-slate-700 text-center text-white transition-all" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="flex-none w-1/4 max-w-full py-4 pl-0 pr-3 mt-0">
<div class="flex mb-2">
<div class="flex items-center justify-center w-5 h-5 mr-2 text-center bg-center rounded fill-current shadow-soft-2xl bg-gradient-to-tl from-blue-600 to-cyan-400 text-neutral-900">
<svg width="10px" height="10px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>spaceship</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(4.000000, 301.000000)">
<path class="color-background" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path>
<path class="color-background" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path>
<path class="color-background" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path>
<path class="color-background" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity="0.598539807"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<p class="mt-1 mb-0 font-semibold leading-tight text-xs">Clicks</p>
</div>
<h4 class="font-bold">2m</h4>
<div class="text-xs h-0.75 flex w-3/4 overflow-visible rounded-lg bg-gray-200">
<div class="duration-600 ease-soft -mt-0.38 w-9/10 -ml-px flex h-1.5 flex-col justify-center overflow-hidden whitespace-nowrap rounded-lg bg-slate-700 text-center text-white transition-all" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="flex-none w-1/4 max-w-full py-4 pl-0 pr-3 mt-0">
<div class="flex mb-2">
<div class="flex items-center justify-center w-5 h-5 mr-2 text-center bg-center rounded fill-current shadow-soft-2xl bg-gradient-to-tl from-red-500 to-yellow-400 text-neutral-900">
<svg width="10px" height="10px" viewBox="0 0 43 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>credit-card</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(453.000000, 454.000000)">
<path class="color-background" d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z" opacity="0.593633743"></path>
<path class="color-background" d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<p class="mt-1 mb-0 font-semibold leading-tight text-xs">Sales</p>
</div>
<h4 class="font-bold">435$</h4>
<div class="text-xs h-0.75 flex w-3/4 overflow-visible rounded-lg bg-gray-200">
<div class="duration-600 ease-soft -mt-0.38 w-3/10 -ml-px flex h-1.5 flex-col justify-center overflow-hidden whitespace-nowrap rounded-lg bg-slate-700 text-center text-white transition-all" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="flex-none w-1/4 max-w-full py-4 pl-0 pr-3 mt-0">
<div class="flex mb-2">
<div class="flex items-center justify-center w-5 h-5 mr-2 text-center bg-center rounded fill-current shadow-soft-2xl bg-gradient-to-tl from-red-600 to-rose-400 text-neutral-900">
<svg width="10px" height="10px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>settings</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(304.000000, 151.000000)">
<polygon class="color-background" opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon>
<path class="color-background" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity="0.596981957"></path>
<path class="color-background" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<p class="mt-1 mb-0 font-semibold leading-tight text-xs">Items</p>
</div>
<h4 class="font-bold">43</h4>
<div class="text-xs h-0.75 flex w-3/4 overflow-visible rounded-lg bg-gray-200">
<div class="duration-600 ease-soft -mt-0.38 -ml-px flex h-1.5 w-1/2 flex-col justify-center overflow-hidden whitespace-nowrap rounded-lg bg-slate-700 text-center text-white transition-all" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>Chart With Tabs
Section Tables Dark
<div class="row removable">
<div class="col-12 col-lg-8 col-xxl-9 drop-zone d-flex">
<div class="card bg-dark flex-fill draggable">
<div class="card-header bg-transparent">
<h5 class="card-title mb-0">Latest Projects</h5>
</div>
<table class="table table-hover table-dark table-borderless my-0">
<thead>
<tr>
<th>Name</th>
<th class="d-none d-xl-table-cell">Start Date</th>
<th class="d-none d-xl-table-cell">End Date</th>
<th>Status</th>
<th class="d-none d-md-table-cell">Assignee</th>
</tr>
</thead>
<tbody>
<tr>
<td>Project Apollo</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Vanessa Tucker</td>
</tr>
<tr>
<td>Project Fireball</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-danger">Cancelled</span>
</td>
<td class="d-none d-md-table-cell">William Harris</td>
</tr>
<tr>
<td>Project Hades</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Sharon Lessman</td>
</tr>
<tr>
<td>Project Nitro</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-warning">In progress</span>
</td>
<td class="d-none d-md-table-cell">Vanessa Tucker</td>
</tr>
<tr>
<td>Project Phoenix</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">William Harris</td>
</tr>
<tr>
<td>Project X</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Sharon Lessman</td>
</tr>
<tr>
<td>Project Romeo</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Christina Mason</td>
</tr>
<tr>
<td>Project Wombat</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-warning">In progress</span>
</td>
<td class="d-none d-md-table-cell">William Harris</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12 col-lg-4 col-xxl-3 drop-zone d-flex">
<div class="card bg-dark flex-fill w-100 draggable">
<div class="card-header bg-transparent">
<h5 class="card-title mb-0">Monthly Sales</h5>
</div>
<div class="card-body d-flex w-100">
<div class="align-self-center chart chart-lg">
<div class="chartjs-size-monitor">
<div class="chartjs-size-monitor-expand">
<div class=""></div>
</div>
<div class="chartjs-size-monitor-shrink">
<div class=""></div>
</div>
</div>
<canvas id="chartjs-dashboard-bar-dark" width="528" height="700" style="display: block; height: 350px; width: 264px;" class="chartjs-render-monitor"></canvas>
</div>
</div>
</div>
</div>
</div><div class="row removable">
<div class="col-12 col-lg-8 col-xxl-9 drop-zone d-flex">
<div class="card bg-dark flex-fill draggable">
<div class="card-header bg-transparent">
<h5 class="card-title mb-0">Latest Projects</h5>
</div>
<table class="table table-hover table-dark table-borderless my-0">
<thead>
<tr>
<th>Name</th>
<th class="d-none d-xl-table-cell">Start Date</th>
<th class="d-none d-xl-table-cell">End Date</th>
<th>Status</th>
<th class="d-none d-md-table-cell">Assignee</th>
</tr>
</thead>
<tbody>
<tr>
<td>Project Apollo</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Vanessa Tucker</td>
</tr>
<tr>
<td>Project Fireball</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-danger">Cancelled</span>
</td>
<td class="d-none d-md-table-cell">William Harris</td>
</tr>
<tr>
<td>Project Hades</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Sharon Lessman</td>
</tr>
<tr>
<td>Project Nitro</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-warning">In progress</span>
</td>
<td class="d-none d-md-table-cell">Vanessa Tucker</td>
</tr>
<tr>
<td>Project Phoenix</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">William Harris</td>
</tr>
<tr>
<td>Project X</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Sharon Lessman</td>
</tr>
<tr>
<td>Project Romeo</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-success">Done</span>
</td>
<td class="d-none d-md-table-cell">Christina Mason</td>
</tr>
<tr>
<td>Project Wombat</td>
<td class="d-none d-xl-table-cell">01/01/2021</td>
<td class="d-none d-xl-table-cell">31/06/2021</td>
<td>
<span class="badge bg-warning">In progress</span>
</td>
<td class="d-none d-md-table-cell">William Harris</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12 col-lg-4 col-xxl-3 drop-zone d-flex">
<div class="card bg-dark flex-fill w-100 draggable">
<div class="card-header bg-transparent">
<h5 class="card-title mb-0">Monthly Sales</h5>
</div>
<div class="card-body d-flex w-100">
<div class="align-self-center chart chart-lg">
<div class="chartjs-size-monitor">
<div class="chartjs-size-monitor-expand">
<div class=""></div>
</div>
<div class="chartjs-size-monitor-shrink">
<div class=""></div>
</div>
</div>
<canvas id="chartjs-dashboard-bar-dark" width="528" height="700" style="display: block; height: 350px; width: 264px;" class="chartjs-render-monitor"></canvas>
</div>
</div>
</div>
</div>
</div>Call To Action Section With Subscribe Form
Nav Tabs
<ul class="nav nav-tabs draggable" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p>True reasoning is only possible when there is no motivation.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p>Be patient, it takes 10 years to build a career in anything.</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p> The goal of media is to make every problem, your problem.</p>
</div>
</div>Nav Pills
<ul class="nav nav-pills mb-3 draggable" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<p>This is the last time a fiat currency bubble pops, because it’s the first time we have a viable alternative.</p>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<p>Live long enough, and you’ll become a philosopher.</p>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<p>It’s the nature of truth that once you see it, you can’t unsee it.</p>
</div>
</div>Card Stats
<div class="card draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title">Sales</h5>
</div>
<div class="col-auto">
<div class="stat text-primary">
<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="feather feather-truck align-middle"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3">2.382</h1>
<div class="mb-0">
<span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -3.65% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
</div><div class="card draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title">Sales</h5>
</div>
<div class="col-auto">
<div class="stat text-primary">
<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="feather feather-truck align-middle"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3">2.382</h1>
<div class="mb-0">
<span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -3.65% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
</div>