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
Card Payment
Form Change Password
Table Authors
Component from
Soft UI Dashboard Tailwind
Builder
<div class="relative flex flex-col w-full min-w-0 mb-0 break-words bg-white border-0 border-transparent border-solid shadow-soft-xl rounded-2xl bg-clip-border mb-4 draggable">
<div class="p-6 pb-0 mb-0 bg-white rounded-t-2xl">
<h6 class="font-display">Authors table</h6>
</div>
<div class="flex-auto px-0 pt-0 pb-2">
<div class="p-0 overflow-x-auto">
<table class="items-center w-full mb-0 align-top border-gray-200 text-slate-500">
<thead class="align-bottom">
<tr>
<th class="px-6 py-3 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">Author</th>
<th class="px-6 py-3 pl-2 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">Function</th>
<th class="px-6 py-3 font-bold text-center uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">Status</th>
<th class="px-6 py-3 font-bold text-center uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">Employed</th>
<th class="px-6 py-3 font-semibold capitalize align-middle bg-transparent border-b border-gray-200 border-solid shadow-none tracking-none whitespace-nowrap text-slate-400 opacity-70"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<div class="flex px-2 py-1">
<div>
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-2.jpg" class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-sm h-9 w-9 rounded-xl" alt="user1" />
</div>
<div class="flex flex-col justify-center">
<h6 class="mb-0 leading-normal text-sm font-display">John Michael</h6>
<p class="mb-0 leading-tight text-xs text-slate-400">[email protected]</p>
</div>
</div>
</td>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<p class="mb-0 font-semibold leading-tight text-xs">Manager</p>
<p class="mb-0 leading-tight text-xs text-slate-400">Organization</p>
</td>
<td class="p-2 leading-normal text-center align-middle bg-transparent border-b text-sm whitespace-nowrap shadow-transparent">
<span class="bg-gradient-to-tl from-green-600 to-lime-400 px-2 text-xxs rounded py-1 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white">Online</span>
</td>
<td class="p-2 text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<span class="font-semibold leading-tight text-xs text-slate-400">23/04/18</span>
</td>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<a href="javascript:;" class="font-semibold leading-tight text-xs text-slate-400"> Edit </a>
</td>
</tr>
<tr>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<div class="flex px-2 py-1">
<div>
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-3.jpg" class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-sm h-9 w-9 rounded-xl" alt="user2" />
</div>
<div class="flex flex-col justify-center">
<h6 class="mb-0 leading-normal text-sm font-display">Alexa Liras</h6>
<p class="mb-0 leading-tight text-xs text-slate-400">[email protected]</p>
</div>
</div>
</td>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<p class="mb-0 font-semibold leading-tight text-xs">Programator</p>
<p class="mb-0 leading-tight text-xs text-slate-400">Developer</p>
</td>
<td class="p-2 leading-normal text-center align-middle bg-transparent border-b text-sm whitespace-nowrap shadow-transparent">
<span class="bg-gradient-to-tl from-slate-600 to-slate-300 px-2 text-xxs rounded py-1 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white">Offline</span>
</td>
<td class="p-2 text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<span class="font-semibold leading-tight text-xs text-slate-400">11/01/19</span>
</td>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<a href="javascript:;" class="font-semibold leading-tight text-xs text-slate-400"> Edit </a>
</td>
</tr>
<tr>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<div class="flex px-2 py-1">
<div>
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-4.jpg" class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-sm h-9 w-9 rounded-xl" alt="user3" />
</div>
<div class="flex flex-col justify-center">
<h6 class="mb-0 leading-normal text-sm font-display">Laurent Perrier</h6>
<p class="mb-0 leading-tight text-xs text-slate-400">[email protected]</p>
</div>
</div>
</td>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<p class="mb-0 font-semibold leading-tight text-xs">Executive</p>
<p class="mb-0 leading-tight text-xs text-slate-400">Projects</p>
</td>
<td class="p-2 leading-normal text-center align-middle bg-transparent border-b text-sm whitespace-nowrap shadow-transparent">
<span class="bg-gradient-to-tl from-green-600 to-lime-400 px-2 text-xxs rounded py-1 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white">Online</span>
</td>
<td class="p-2 text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<span class="font-semibold leading-tight text-xs text-slate-400">19/09/17</span>
</td>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<a href="javascript:;" class="font-semibold leading-tight text-xs text-slate-400"> Edit </a>
</td>
</tr>
<tr>
<td class="p-2 align-middle bg-transparent border-b-0 whitespace-nowrap shadow-transparent">
<div class="flex px-2 py-1">
<div>
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-1.jpg" class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-sm h-9 w-9 rounded-xl" alt="user6" />
</div>
<div class="flex flex-col justify-center">
<h6 class="mb-0 leading-normal text-sm font-display">Miriam Eric</h6>
<p class="mb-0 leading-tight text-xs text-slate-400">[email protected]</p>
</div>
</div>
</td>
<td class="p-2 align-middle bg-transparent border-b-0 whitespace-nowrap shadow-transparent">
<p class="mb-0 font-semibold leading-tight text-xs">Programtor</p>
<p class="mb-0 leading-tight text-xs text-slate-400">Developer</p>
</td>
<td class="p-2 leading-normal text-center align-middle bg-transparent border-b-0 text-sm whitespace-nowrap shadow-transparent">
<span class="bg-gradient-to-tl from-green-600 to-lime-400 px-2 text-xxs rounded py-1 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white">Online</span>
</td>
<td class="p-2 text-center align-middle bg-transparent border-b-0 whitespace-nowrap shadow-transparent">
<span class="font-semibold leading-tight text-xs text-slate-400">14/09/20</span>
</td>
<td class="p-2 align-middle bg-transparent border-b-0 whitespace-nowrap shadow-transparent">
<a href="javascript:;" class="font-semibold leading-tight text-xs text-slate-400"> Edit </a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Blog Posts With Background Image
Header With Background Image
Requires JavaScript
Testimonial Section With Carousel And Customer Profile Image
Requires JavaScript
Authentication Section With Testimonials
Simple Authentication Card
Component from
Motion Landing Library
Builder
<div class="flex justify-center w-full h-full my-auto xl:gap-14 lg:justify-normal md:gap-5 draggable">
<div class="flex items-center justify-center w-full lg:p-12">
<div class="flex items-center xl:p-10">
<form class="flex flex-col w-full h-full pb-6 text-center bg-white rounded-3xl">
<h3 class="mb-3 text-4xl font-extrabold text-dark-grey-900 font-display">Sign In</h3>
<p class="mb-4 text-grey-700">Enter your email and password</p>
<a class="flex items-center justify-center w-full py-4 mb-6 text-sm font-medium transition duration-300 rounded-2xl text-grey-900 bg-grey-300 hover:bg-grey-400 focus:ring-4 focus:ring-grey-300">
<img class="h-5 mr-2" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/logos/logo-google.png" alt="">
<span>Sign in with Google</span>
</a>
<div class="flex items-center mb-3">
<hr class="h-0 border-b border-solid border-grey-500 grow">
<p class="mx-4 text-grey-600">or</p>
<hr class="h-0 border-b border-solid border-grey-500 grow">
</div>
<label for="email" class="mb-2 text-sm text-start text-grey-900">Email*</label>
<input id="email" type="email" placeholder="[email protected]" class="flex items-center w-full px-5 py-4 mr-2 text-sm font-medium outline-none focus:bg-grey-400 mb-7 placeholder:text-grey-700 bg-grey-200 text-dark-grey-900 rounded-2xl"/>
<label for="password" class="mb-2 text-sm text-start text-grey-900">Password*</label>
<input id="password" type="password" placeholder="Enter a password" class="flex items-center w-full px-5 py-4 mb-5 mr-2 text-sm font-medium outline-none focus:bg-grey-400 placeholder:text-grey-700 bg-grey-200 text-dark-grey-900 rounded-2xl"/>
<div class="flex flex-row justify-between mb-8">
<label class="relative inline-flex items-center mr-3 cursor-pointer select-none">
<input type="checkbox" checked value="" class="sr-only peer">
<div
class="w-5 h-5 bg-white border-2 rounded-sm border-grey-500 peer peer-checked:border-0 peer-checked:bg-purple-blue-500">
<img class="" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/icons/check.png" alt="tick">
</div>
<span class="ml-3 text-sm font-normal text-grey-900">Keep me logged in</span>
</label>
<a href="javascript:void(0)" class="mr-4 text-sm font-medium text-purple-blue-500">Forget password?</a>
</div>
<button class="w-full px-6 py-5 mb-5 text-sm font-bold leading-none text-white transition duration-300 md:w-96 rounded-2xl hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 bg-purple-blue-500">Sign In</button>
<p class="text-sm leading-relaxed text-grey-900">Not registered yet? <a href="javascript:void(0)" class="font-bold text-grey-700">Create an Account</a></p>
</form>
</div>
</div>
</div>