Home
Framework
Theme
All
669
Forms
12
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
51
General
6
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 669 components available in Loopple’s library! Create modern templates without creativity of a designer
Navbar With Languages
Chart Sales
Input
<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><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
<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><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>Http Code With Title Description And Button
<div class="w-full draggable">
<div class="container flex flex-col items-center gap-16 mx-auto my-32">
<div class="flex flex-col gap-7">
<div class="flex flex-col gap-2 px-6 text-center w-10/12 mx-auto">
<h2 class="text-3xl font-extrabold leading-tight lg:text-4xl text-dark-grey-900">Well, shoot! The page you're looking for couldn't be found.</h2>
<p class="text-base font-medium leading-7 text-dark-grey-600">We hit a snag... maybe it's time to head back to our main page.</p>
</div>
<div class="flex items-center justify-center">
<button class="flex items-center justify-center py-4 text-white px-7 rounded-2xl bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300">Go back to Homepage</button>
</div>
</div>
</div>
</div><div class="w-full draggable">
<div class="container flex flex-col items-center gap-16 mx-auto my-32">
<div class="flex flex-col gap-7">
<div class="flex flex-col gap-2 px-6 text-center w-10/12 mx-auto">
<h2 class="text-3xl font-extrabold leading-tight lg:text-4xl text-dark-grey-900">Well, shoot! The page you're looking for couldn't be found.</h2>
<p class="text-base font-medium leading-7 text-dark-grey-600">We hit a snag... maybe it's time to head back to our main page.</p>
</div>
<div class="flex items-center justify-center">
<button class="flex items-center justify-center py-4 text-white px-7 rounded-2xl bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300">Go back to Homepage</button>
</div>
</div>
</div>
</div>
