Framework
Theme
All
683
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
Features
25
Cards Section
38
Teams Section
11
Faq
9
Headers
47
Blogs
15
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Authentication
15
Call To Actions
21
Http Codes
6
Teams
16
Pricing
13
UI Components Library
Discover 683 components available in Loopple’s library! Create modern templates without creativity of a designer
Section Tables
Component from
Asteria Dashboard
Builder
<div class="row mt-4 removable">
<div class="col-lg-8 col-md-6 mb-md-0 mb-4 drop-zone">
<div class="card mb-4 draggable">
<div class="card-header pb-0">
<div class="row">
<div class="col-lg-6 col-7">
<h6>Projects</h6>
</div>
<div class="col-lg-6 col-5 my-auto text-end">
<p class="text-sm mb-0">
<i class="fa fa-check text-success" aria-hidden="true"></i>
<span class="font-weight-bold ms-1">21 done</span> this month
</p>
</div>
</div>
</div>
<div class="card-body px-0 pb-2">
<div class="table-responsive">
<table class="table align-items-center mb-0">
<thead>
<tr>
<th class="text-secondary text-sm font-weight-bolder opacity-7">Companies</th>
<th class="text-secondary text-sm font-weight-bolder opacity-7 ps-2">Members</th>
<th class="text-center text-secondary text-sm font-weight-bolder opacity-7">Budget</th>
<th class="text-center text-secondary text-sm font-weight-bolder opacity-7">Completion</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex px-2 py-1 ms-2">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Artensia UI Version</h6>
</div>
</div>
</td>
<td>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBob3RvfGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Romina Hadid">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZSUyMHBob3RvfGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Alexander Smith">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1623577284502-d65cdc6ba0b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nzd8fHByb2ZpbGUlMjBwaG90b3xlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60">
</a>
</div>
</td>
<td class="align-middle text-center text-sm">
<span class="text-xs font-weight-bold"> $14,000 </span>
</td>
<td class="align-middle">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info w-60" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2 py-1 ms-2">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Add Progress Track</h6>
</div>
</div>
</td>
<td>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-4.jpg">
</a>
</div>
</td>
<td class="align-middle text-center text-sm">
<span class="text-xs font-weight-bold"> $3,000 </span>
</td>
<td class="align-middle">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">10%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info w-10" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2 py-1 ms-2">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Fix Platform Errors</h6>
</div>
</div>
</td>
<td>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Romina Hadid">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZSUyMHBob3RvfGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-1.jpg">
</a>
</div>
</td>
<td class="align-middle text-center text-sm">
<span class="text-xs font-weight-bold"> Not set </span>
</td>
<td class="align-middle">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">100%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-success w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2 py-1 ms-2">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Launch our Mobile App</h6>
</div>
</div>
</td>
<td>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBob3RvfGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Romina Hadid">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZSUyMHBob3RvfGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60">
</a>
</div>
</td>
<td class="align-middle text-center text-sm">
<span class="text-xs font-weight-bold"> $20,500 </span>
</td>
<td class="align-middle">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">100%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-success w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2 py-1 ms-2">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Add the New Pricing Page</h6>
</div>
</div>
</td>
<td>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-4.jpg">
</a>
</div>
</td>
<td class="align-middle text-center text-sm">
<span class="text-xs font-weight-bold"> $500 </span>
</td>
<td class="align-middle">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">25%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="25"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2 py-1 ms-2">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Redesign New Online Shop</h6>
</div>
</div>
</td>
<td>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-1.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBob3RvfGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60">
</a>
</div>
</td>
<td class="align-middle text-center text-sm">
<span class="text-xs font-weight-bold"> $2,000 </span>
</td>
<td class="align-middle">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">40%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info w-40" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 drop-zone">
<div class="card mb-4 draggable">
<div class="card-header pb-0">
<div class="row">
<div class="col-lg-6 col-7">
<h6>Orders overview</h6>
</div>
<div class="col-lg-6 col-5 my-auto text-end">
<p class="text-sm">
<i class="fa fa-arrow-up text-success" aria-hidden="true"></i>
<span class="font-weight-bold text-success">24%</span> this month
</p>
</div>
</div>
</div>
<div class="card-body p-3">
<div class="timeline timeline-one-side">
<div class="timeline-block mb-3">
<span class="timeline-step">
<span class="p-1 bg-danger rounded-circle"></span>
</span>
<div class="timeline-content">
<h6 class="text-dark text-sm font-weight-bold mb-0">$2400, Design changes</h6>
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">22 DEC 7:20 PM</p>
</div>
</div>
<div class="timeline-block mb-3">
<span class="timeline-step">
<span class="p-1 bg-warning rounded-circle"></span>
</span>
<div class="timeline-content">
<h6 class="text-dark text-sm font-weight-bold mb-0">New order #1832412</h6>
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">21 DEC 11 PM</p>
</div>
</div>
<div class="timeline-block mb-3">
<span class="timeline-step">
<span class="p-1 bg-dark rounded-circle"></span>
</span>
<div class="timeline-content">
<h6 class="text-dark text-sm font-weight-bold mb-0">Server payments for April</h6>
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">21 DEC 9:34 PM</p>
</div>
</div>
<div class="timeline-block mb-3">
<span class="timeline-step">
<span class="p-1 bg-success rounded-circle"></span>
</span>
<div class="timeline-content">
<h6 class="text-dark text-sm font-weight-bold mb-0">New card added for order #4395133</h6>
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">20 DEC 2:20 AM</p>
</div>
</div>
<div class="timeline-block mb-3">
<span class="timeline-step">
<span class="p-1 bg-info rounded-circle"></span>
</span>
<div class="timeline-content">
<h6 class="text-dark text-sm font-weight-bold mb-0">Unlock packages for development</h6>
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">18 DEC 4:54 AM</p>
</div>
</div>
<div class="timeline-block">
<span class="timeline-step">
<span class="p-1 bg-secondary rounded-circle"></span>
</span>
<div class="timeline-content">
<h6 class="text-dark text-sm font-weight-bold mb-0">New order #9583120</h6>
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">17 DEC</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Feature 2
Component from
Soft UI Design System
Builder
<section class="py-4 draggable">
<div class="container">
<div class="row">
<div class="col-md-4 col-10 mx-auto">
<div class="p-3 text-center">
<img class="w-50 mb-3" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/medium-logos/logo-google.svg">
<p>We get insulted by others, lose trust for those others. We get back here to follow my dreams</p>
<a href="javascript:;" class="icon-move-right text-dark text-sm">Read more
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
<div class="col-md-4 col-10 mx-auto">
<div class="p-3 text-center">
<img class="w-50 mb-3" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/medium-logos/logo-vodafone.svg">
<p>We get insulted by others, lose trust for those others. We get back here to follow my dreams</p>
<a href="javascript:;" class="icon-move-right text-dark text-sm">Read more
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
<div class="col-md-4 col-10 mx-auto">
<div class="p-3 text-center">
<img class="w-50 mb-3" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/medium-logos/logo-coinbase.svg">
<p>We get insulted by others, lose trust for those others. We get back here to follow my dreams</p>
<a href="javascript:;" class="icon-move-right text-dark text-sm">Read more
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
</div>
</div>
</section>Input Group
Component from
Asteria Dashboard
Builder
<div class="form-group mb-4 draggable">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>Button Icon Left
Component from
Chakra UI Dashboard
Builder
<Button data-type='Button' leftIcon='{<EmailIcon/>}' variant='solid'>
Email
</Button>Header 1
Component from
Soft UI Design System
Builder
<header class="draggable">
<div class="page-header min-vh-75">
<div class="oblique position-absolute top-0 h-100 d-md-block d-none">
<div class="oblique-image bg-cover position-absolute fixed-top ms-auto h-100 z-index-0 ms-n8" style="background-image:url(https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/curved-images/curved11.jpg)"></div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-7 d-flex justify-content-center flex-column">
<h1 class="text-gradient text-primary">Your Work With</h1>
<h1 class="mb-4">Soft Design System</h1>
<p class="lead pe-5 me-5">The time is now for it be okay to be great. People in this world shun people for being nice. </p>
<div class="buttons">
<button type="button" class="btn bg-gradient-primary mt-4">Get Started</button>
<button type="button" class="btn text-primary shadow-none mt-4">Read more</button>
</div>
</div>
</div>
</div>
</div>
</header>Profile Form
Component from
Argon Dashboard
Builder
<div class="card draggable">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">Edit profile </h3>
</div>
<div class="col-4 text-right">
<a href="#!" class="btn btn-sm btn-primary">Settings</a>
</div>
</div>
</div>
<div class="card-body">
<form>
<h6 class="heading-small text-muted mb-4">User information</h6>
<div class="pl-lg-4">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-username">Username</label>
<input type="text" id="input-username" class="form-control" placeholder="Username" value="lucky.jesse">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-email">Email address</label>
<input type="email" id="input-email" class="form-control" placeholder="[email protected]">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-first-name">First name</label>
<input type="text" id="input-first-name" class="form-control" placeholder="First name" value="Lucky">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-last-name">Last name</label>
<input type="text" id="input-last-name" class="form-control" placeholder="Last name" value="Jesse">
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- Address -->
<h6 class="heading-small text-muted mb-4">Contact information</h6>
<div class="pl-lg-4">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="form-control-label" for="input-address">Address</label>
<input id="input-address" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-city">City</label>
<input type="text" id="input-city" class="form-control" placeholder="City" value="New York">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-country">Country</label>
<input type="text" id="input-country" class="form-control" placeholder="Country" value="United States">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-country">Postal code</label>
<input type="number" id="input-postal-code" class="form-control" placeholder="Postal code">
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- Description -->
<h6 class="heading-small text-muted mb-4">About me</h6>
<div class="pl-lg-4">
<div class="form-group">
<label class="form-control-label">About Me</label>
<textarea rows="4" class="form-control" placeholder="A few words about you ...">A beautiful Dashboard for Bootstrap 4. It is Free and Open Source.</textarea>
</div>
</div>
</form>
</div>
</div>Sidebar Complex
Component from
Argon Dashboard
Builder
<div class="sidenav-header align-items-center">
<a class="navbar-brand" href="javascript:void(0)">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/brand/blue.png" class="navbar-brand-img" alt="...">
</a>
</div>
<div class="navbar-inner">
<div class="collapse navbar-collapse" id="sidenav-collapse-main">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="javascript:">
<i class="fa fa-desktop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-globe text-info"></i>
<span class="nav-link-text">Icons</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-map-marker text-warning"></i>
<span class="nav-link-text">Maps</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-table text-dark"></i>
<span class="nav-link-text">Tables</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-lock text-danger"></i>
<span class="nav-link-text">Login</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-key text-success"></i>
<span class="nav-link-text">Register</span>
</a>
</li>
</ul>
<hr class="my-3">
<h6 class="navbar-heading p-0 text-muted">
<span class="docs-normal">Documentation</span>
</h6>
<ul class="navbar-nav mb-md-3">
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-rocket"></i>
<span class="nav-link-text">Getting started</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-palette"></i>
<span class="nav-link-text">Foundation</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-chart-pie"></i>
<span class="nav-link-text">Components</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-puzzle-piece"></i>
<span class="nav-link-text">Plugins</span>
</a>
</li>
</ul>
</div>
</div>Button
Alert
Component from
Asteria Dashboard
Builder
<div class="alert alert-primary text-white draggable" role="alert">
A simple primary alert—check it out!
</div>Card Stats
Component from
Soft UI Dashboard Tailwind
Builder
<div class="relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border mb-4 draggable">
<div class="flex-auto p-4">
<div class="flex flex-row -mx-3">
<div class="flex-none w-2/3 max-w-full px-3">
<div>
<p class="mb-0 font-sans font-semibold leading-normal text-sm">Today's Money</p>
<h5 class="mb-0 font-bold font-display"> $53,000 <span class="leading-normal text-sm font-weight-bolder text-lime-500">+55%</span>
</h5>
</div>
</div>
<div class="px-3 text-right basis-1/3">
<div class="inline-block w-12 h-12 text-center rounded-lg bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl">
<i class="ni ni-money-coins leading-none text-lg relative top-3.5 text-white"></i>
</div>
</div>
</div>
</div>
</div>