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
Header With Navbar And Image In The Left
Footer Simple
Component from
Horizon UI Dashboard
Builder
const Footer = () => {
return (
<div className="flex w-full flex-col items-center justify-between px-1 pb-8 pt-3 lg:px-8 xl:flex-row">
<h5 className="mb-4 text-center text-sm font-medium text-gray-600 sm:!mb-0 md:text-lg">
<p className="mb-4 text-center text-sm text-gray-600 sm:!mb-0 md:text-base">
{1900 + new Date().getYear()} Horizon UI. All Rights Reserved.
</p>
</h5>
<div>
<ul className="flex flex-wrap items-center gap-3 sm:flex-nowrap md:gap-10">
<li>
<a
target="blank"
href="mailto:[email protected]"
className="text-base font-medium text-gray-600 hover:text-gray-600"
>
Support
</a>
</li>
<li>
<a
target="blank"
href="https://simmmple.com/licenses"
className="text-base font-medium text-gray-600 hover:text-gray-600"
>
License
</a>
</li>
<li>
<a
target="blank"
href="https://simmmple.com/terms-of-service"
className="text-base font-medium text-gray-600 hover:text-gray-600"
>
Terms of Use
</a>
</li>
<li>
<a
target="blank"
href="https://blog.horizon-ui.com/"
className="text-base font-medium text-gray-600 hover:text-gray-600"
>
Blog
</a>
</li>
</ul>
</div>
</div>
);
};
export default Footer;Call To Action With Text And Subscribe Input
Component from
Motion Landing Library React
Builder
<div data-type='div' className="container mx-auto draggable">
<div data-type='div' className="flex flex-col items-center justify-center w-full h-full my-auto text-center">
<h2 data-type='h2' className="w-full mb-4 text-4xl font-extrabold leading-tight text-dark-grey-900">
Unlock Motion's Immediate Benefits
</h2>
<p data-type='p' className="mb-10 text-lg font-normal lg:w-6/12 text-grey-700">
Experience Motion like never before with instant access. Our platform
offers unparalleled features and advantages to elevate your experience.
</p>
<div data-type='div' className="flex flex-col items-center justify-center w-full gap-4 mb-4 md:flex-row">
<div data-type='div' className="relative flex items-center">
<span data-type='span' className="absolute ml-3">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-5 h-5 text-grey-700"
>
<path data-type='path'
strokeLinecap="round"
d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25"
/>
</svg>
</span>
<input data-type='input'
type="search"
placeholder="E-mail address"
className="flex items-center py-2 pl-10 pr-3 text-sm font-medium border border-solid outline-none grow placeholder:text-dark-grey-500 placeholder:text-sm placeholder:font-medium border-grey-500 focus:border-grey-600 text-dark-grey-900 rounded-xl"
/>
</div>
<button data-type='button' className="flex items-center px-4 py-2 text-sm font-bold text-white border rounded-xl border-purple-blue-500 bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300">
Get Free Access
</button>
</div>
</div>
</div>Navbar Crypto
Logo Area With Text In The Left And Logos In The Right
Http Code With Title Description Button And Image
Button
Component from
Adminkit
Builder
<button type="button" class="btn btn-primary draggable">Primary</button>Input
Component from
Adminkit
Builder
<input type="text" class="form-control draggable" placeholder="Input" aria-label="Email" aria-describedby="email-addon">Section Profile
Component from
Adminkit
Builder
<div class="row removable">
<div class="col-md-4 col-xl-3 drop-zone">
<div class="card mb-3 draggable">
<div class="card-header">
<h5 class="card-title mb-0">Profile Details</h5>
</div>
<div class="card-body text-center">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" alt="Christina Mason" class="img-fluid rounded-circle mb-2" width="128" height="128">
<h5 class="card-title mb-0">Christina Mason</h5>
<div class="text-muted mb-2">Lead Developer</div>
<div>
<a class="btn btn-primary btn-sm" href="#">Follow</a>
<a class="btn btn-primary btn-sm" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg> Message </a>
</div>
</div>
<hr class="my-0">
<div class="card-body">
<h5 class="h6 card-title">Skills</h5>
<a href="#" class="badge bg-primary me-1 my-1">HTML</a>
<a href="#" class="badge bg-primary me-1 my-1">JavaScript</a>
<a href="#" class="badge bg-primary me-1 my-1">Sass</a>
<a href="#" class="badge bg-primary me-1 my-1">Angular</a>
<a href="#" class="badge bg-primary me-1 my-1">Vue</a>
<a href="#" class="badge bg-primary me-1 my-1">React</a>
<a href="#" class="badge bg-primary me-1 my-1">Redux</a>
<a href="#" class="badge bg-primary me-1 my-1">UI</a>
<a href="#" class="badge bg-primary me-1 my-1">UX</a>
</div>
<hr class="my-0">
<div class="card-body">
<h5 class="h6 card-title">About</h5>
<ul class="list-unstyled mb-0">
<li class="mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home feather-sm me-1">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg> Lives in <a href="#">San Francisco, SA</a>
</li>
<li class="mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-briefcase feather-sm me-1">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
</svg> Works at <a href="#">GitHub</a>
</li>
<li class="mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin feather-sm me-1">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg> From <a href="#">Boston</a>
</li>
</ul>
</div>
<hr class="my-0">
<div class="card-body">
<h5 class="h6 card-title">Elsewhere</h5>
<ul class="list-unstyled mb-0">
<li class="mb-1">
<a href="#">staciehall.co</a>
</li>
<li class="mb-1">
<a href="#">Twitter</a>
</li>
<li class="mb-1">
<a href="#">Facebook</a>
</li>
<li class="mb-1">
<a href="#">Instagram</a>
</li>
<li class="mb-1">
<a href="#">LinkedIn</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-8 col-xl-9 drop-zone">
<div class="card draggable">
<div class="card-header">
<h5 class="card-title mb-0">Activities</h5>
</div>
<div class="card-body h-100">
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Vanessa Tucker">
<div class="flex-grow-1">
<small class="float-end text-navy">5m ago</small>
<strong>Vanessa Tucker</strong> started following <strong>Christina Mason</strong>
<br>
<small class="text-muted">Today 7:51 pm</small>
<br>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Charles Hall">
<div class="flex-grow-1">
<small class="float-end text-navy">30m ago</small>
<strong>Charles Hall</strong> posted something on <strong>Christina Mason</strong>'s timeline <br>
<small class="text-muted">Today 7:21 pm</small>
<div class="border text-sm text-muted p-2 mt-1"> Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </div>
<a href="#" class="btn btn-sm btn-danger mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart feather-sm">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg> Like </a>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
<div class="flex-grow-1">
<small class="float-end text-navy">1h ago</small>
<strong>Christina Mason</strong> posted a new blog <br>
<small class="text-muted">Today 6:35 pm</small>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="William Harris">
<div class="flex-grow-1">
<small class="float-end text-navy">3h ago</small>
<strong>William Harris</strong> posted two photos on <strong>Christina Mason</strong>'s timeline <br>
<small class="text-muted">Today 5:12 pm</small>
<div class="row g-0 mt-1">
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<img src="https://demo-basic.adminkit.io/img/photos/unsplash-1.jpg" class="img-fluid pe-2" alt="Unsplash">
</div>
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<img src="https://demo-basic.adminkit.io/img/photos/unsplash-2.jpg" class="img-fluid pe-2" alt="Unsplash">
</div>
</div>
<a href="#" class="btn btn-sm btn-danger mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart feather-sm">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg> Like </a>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="William Harris">
<div class="flex-grow-1">
<small class="float-end text-navy">1d ago</small>
<strong>William Harris</strong> started following <strong>Christina Mason</strong>
<br>
<small class="text-muted">Yesterday 3:12 pm</small>
<div class="d-flex align-items-start mt-1">
<a class="pe-3" href="#">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
</a>
<div class="flex-grow-1">
<div class="border text-sm text-muted p-2 mt-1"> Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. </div>
</div>
</div>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
<div class="flex-grow-1">
<small class="float-end text-navy">1d ago</small>
<strong>Christina Mason</strong> posted a new blog <br>
<small class="text-muted">Yesterday 2:43 pm</small>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Charles Hall">
<div class="flex-grow-1">
<small class="float-end text-navy">1d ago</small>
<strong>Charles Hall</strong> started following <strong>Christina Mason</strong>
<br>
<small class="text-muted">Yesterdag 1:51 pm</small>
</div>
</div>
<hr>
<div class="d-grid">
<a href="#" class="btn btn-primary">Load more</a>
</div>
</div>
</div>
</div>
</div>Section Project
Component from
Adminkit
Builder
<div class="row removable">
<div class="col-md-4 drop-zone">
<div class="card mb-3 draggable">
<img src="https://images.unsplash.com/photo-1527219525722-f9767a7f2884?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mjl8fHByb2plY3R8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Slack</h5>
<p class="card-text">This project is about integrating a new chat system to slack platform.</p>
<a href="#" class="badge bg-info me-1 my-1">IOS App</a>
<a href="#" class="badge bg-primary me-1 my-1">Desktop App</a>
</div>
<div class="card-footer">
<div class="mb-1 d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file align-middle me-2">
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
<polyline points="13 2 13 9 20 9"></polyline>
</svg>
<span>Attach file</span>
</div>
</div>
</div>
</div>
<div class="col-md-8 drop-zone">
<div class="card draggable">
<div class="card-header">
<h5 class="card-title mb-0">Activities</h5>
</div>
<div class="card-body h-100">
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Vanessa Tucker">
<div class="flex-grow-1">
<small class="float-end text-navy">5m ago</small>
<strong>Vanessa Tucker</strong> added 2 new files to <strong>Loopple Update</strong>
<br>
<small class="text-muted">Today 7:51 pm</small>
<br>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Charles Hall">
<div class="flex-grow-1">
<small class="float-end text-navy">30m ago</small>
<strong>Charles Hall</strong> added a new comment to <strong>AdminKit</strong>#&39;s v2.9.1 Update <br>
<small class="text-muted">Today 7:21 pm</small>
<div class="border text-sm text-muted p-2 mt-1"> Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </div>
<a href="#" class="btn btn-sm btn-info mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag align-middle me-2">
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
<line x1="7" y1="7" x2="7.01" y2="7"></line>
</svg> View more </a>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
<div class="flex-grow-1">
<small class="float-end text-navy">1h ago</small>
<strong>Christina Mason</strong> finished tasks <br>
<small class="text-muted">Today 6:35 pm</small>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="William Harris">
<div class="flex-grow-1">
<small class="float-end text-navy">3h ago</small>
<strong>William Harris</strong> posted three updates on <strong>Slack code refactoring</strong>
<br>
<small class="text-muted">Today 5:12 pm</small>
<ul>
<li class="nav-item"> Fix channels new messages loading error </li>
<li class="nav-item"> Added view last 100 messages option </li>
</ul>
<a href="#" class="btn btn-sm btn-info mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag align-middle me-2">
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
<line x1="7" y1="7" x2="7.01" y2="7"></line>
</svg> View more </a>
</div>
</div>
<hr>
<div class="d-grid">
<a href="#" class="btn btn-primary">Load more</a>
</div>
</div>
</div>
</div>
</div>