Framework
Theme
All
689
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
General
6
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 689 components available in Loopple’s library! Create modern templates without creativity of a designer
Content Title And Text
Dropdown
Component from
Argon Dashboard
Builder
<div class="dropdown draggable">
<button class="btn btn-dark dropdown-toggle mr-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>Section Contact Simple Horizontal
Profile Section Work
Register Form
How It Works Section With Image
Component from
Motion Landing Library React
Builder
<div data-type='div' className="w-full draggable">
<div data-type='div' className="container flex flex-col items-center gap-16 mx-auto my-32">
<div data-type='div' className="grid w-full grid-cols-1 gap-32 lg:grid-cols-2">
<div data-type='div' className="bg-cover bg-center hidden lg:block rounded-3xl overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/auth-3-bg.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col gap-16">
<div data-type='div' className="flex flex-col gap-2 text-center md:text-start">
<h2 data-type='h2' className="text-3xl font-extrabold md:text-4xl lg:text-5xl text-dark-grey-900">
How Motion Works?
</h2>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
Motion's operation involves seamlessly integrating various functions
to deliver optimal performance. Our platform is designed to provide
efficient solutions and streamline your experience.
</p>
</div>
<div data-type='div' className="grid w-full grid-cols-1 md:grid-cols-2 gap-y-16 gap-x-10">
<div data-type='div' className="flex flex-col items-start gap-1">
<div data-type='div' className="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2 mb-2">
<span data-type='span' className="text-base font-bold leading-7 text-white">
1
</span>
</div>
<h3 data-type='h3' className="text-base font-bold leading-tight text-dark-grey-900">
Exquisite Culinary Creations
</h3>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
Explore a world of flavors that will tantalize your taste buds.
</p>
</div>
<div data-type='div' className="flex flex-col items-start gap-1">
<div data-type='div' className="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2">
<span data-type='span' className="text-base font-bold leading-7 text-white">
2
</span>
</div>
<h3 data-type='h3' className="text-base font-bold leading-tight text-dark-grey-900">
Seamless Dining Coordination
</h3>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
We make sure every culinary journey detail is perfect.
</p>
</div>
<div data-type='div' className="flex flex-col items-start gap-1">
<div data-type='div' className="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2">
<span data-type='span' className="text-base font-bold leading-7 text-white">
3
</span>
</div>
<h3 data-type='h3' className="text-base font-bold leading-tight text-dark-grey-900">
Savor the Ambiance
</h3>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
Immerse yourself in a captivating dining ambiance.
</p>
</div>
<div data-type='div' className="flex flex-col items-start gap-1">
<div data-type='div' className="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2">
<span data-type='span' className="text-base font-bold leading-7 text-white">
4
</span>
</div>
<h3 data-type='h3' className="text-base font-bold leading-tight text-dark-grey-900">
Gourmet Delights
</h3>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
Treat your palate to an array of gourmet dishes.
</p>
</div>
</div>
</div>
</div>
</div>
</div>H3
Table Excel
Component from
Argon Dashboard
Builder
<div class="card table-responsive draggable">
<div class="card-header border-bottom-0">
<h5>Table Excel</h5>
</div>
<table class="table" data-integration="excel">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>Table Customers
Card Carousel
Component from
Asteria Dashboard
Builder
<div class="card min-height-300 h-100 draggable">
<div class="overflow-hidden position-relative border-radius-lg min-height-300 h-100">
<div class="card-body position-relative z-index-1 d-flex flex-column min-height-300 h-100 p-0">
<div id="carouselImageSlide" class="carousel slide min-height-300 h-100" data-bs-ride="carousel">
<div class="carousel-inner min-height-300 h-100">
<div class="carousel-item min-height-300 h-100 bg-cover" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1514894780887-121968d00567?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1746&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Go slow until you win</h5>
<p class="text-white text-sm mb-0">Remote work starts with eliminating commutes and cubicles.</p>
</div>
</div>
<div class="carousel-item min-height-300 h-100 bg-cover active" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1489710437720-ebb67ec84dd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1740&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Work with the rockets</h5>
<p class="text-white text-sm mb-0">Wealth creation is an evolutionarily recent positive-sum game.</p>
</div>
</div>
<div class="carousel-item min-height-300 h-100 bg-cover" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1511497584788-876760111969?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2064&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Books don’t need an audience.</h5>
<p class="text-white text-sm mb-0">Set and enforce an aspirational hourly rate.</p>
</div>
</div>
</div>
<button class="carousel-control-prev ms-auto end-8 w-5" type="button" data-bs-target="#carouselImageSlide" data-bs-slide="prev">
<span class="carousel-control-prev-icon position-absolute top-4 right-10" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next w-5 end-3" type="button" data-bs-target="#carouselImageSlide" data-bs-slide="next">
<span class="carousel-control-next-icon position-absolute top-4 right-10 text-sm" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>