Framework
Theme
All
217
Sidebars
6
Components
23
Cards Section
8
Forms
7
Navbars
13
Tables Section
3
Typography
14
Teams Section
3
Profiles Section
5
Tables
8
Cards
17
Projects Section
3
Charts
7
Headers
12
Charts Section
3
Testimonials
7
Logo Areas
6
Stats
6
Http Codes
4
Pricing
6
Contact Us
6
Faq
6
Teams
7
Features
6
Call To Actions
8
Authentication
5
Blogs
4
General
1
Contents
6
Tailwind Components
Discover 23 Tailwind Components available in Loopple
Button With Icon
Button Social
Avatar Group
Tab Navigation Icons
Input Icon Left
Input Icon Right
Button
Component from
Soft UI Dashboard Tailwind
Builder
<button type="button" class="inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl from-purple-700 to-pink-500 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 hover:scale-102 active:opacity-85 hover:shadow-soft-xs draggable mb-4">Button</button>Input
Component from
Soft UI Dashboard Tailwind
Builder
<input type="text" placeholder="Default input" class="focus:shadow-soft-primary-outline text-sm leading-5.6 ease-soft block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-2 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none mb-4 draggable"></input>Button Outline
Component from
Soft UI Dashboard Tailwind
Builder
<button type="button" class="inline-block px-6 py-3 mr-3 font-bold text-center uppercase align-middle transition-all bg-transparent border rounded-lg cursor-pointer border-fuchsia-500 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 hover:scale-102 active:opacity-85 hover:shadow-soft-xs text-fuchsia-500 mb-4 draggable">Button</button>Progress
Component from
Soft UI Dashboard Tailwind
Builder
<div class="w-full mb-4 draggable">
<div class="flex mb-2">
<span class="mr-2 font-semibold leading-normal capitalize text-sm">default progress</span>
<span class="ml-auto font-semibold leading-normal text-sm">50%</span>
</div>
<div>
<div class="h-0.75 text-xs flex overflow-visible rounded-lg bg-gray-200">
<div class="bg-fuchsia-500 w-1/2 transition-width duration-600 ease-soft rounded-1 -mt-0.38 -ml-px flex h-1.5 flex-col justify-center overflow-hidden whitespace-nowrap text-center text-white"></div>
</div>
</div>
</div>