Framework
Theme
All
683
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
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 683 components available in Loopple’s library! Create modern templates without creativity of a designer
Input
Component from
Asteria Dashboard
Builder
<input type="text" class="form-control mb-4 draggable" placeholder="Input" aria-label="Email" aria-describedby="email-addon">Section Profile
Component from
Asteria Dashboard
Builder
<div class="row removable mt-4">
<div class="col-12 col-xl-4 drop-zone mb-4">
<div class="card h-100 draggable">
<div class="card-header pb-0 p-3">
<h6 class="mb-0">Platform Settings</h6>
</div>
<div class="card-body p-3">
<h6 class="text-uppercase text-body text-xs font-weight-bolder">Account</h6>
<ul class="list-group">
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault" checked="">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault">Email me when someone follows me</label>
</div>
</li>
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault1">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault1">Email me when someone answers on my post</label>
</div>
</li>
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault2" checked="">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault2">Email me when someone mentions me</label>
</div>
</li>
</ul>
<h6 class="text-uppercase text-body text-xs font-weight-bolder mt-4">Application</h6>
<ul class="list-group">
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault3">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault3">New launches and projects</label>
</div>
</li>
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault4" checked="">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault4">Monthly product updates</label>
</div>
</li>
<li class="list-group-item border-0 px-0 pb-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault5">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault5">Subscribe to newsletter</label>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-xl-4 drop-zone mb-4">
<div class="card h-100 draggable">
<div class="card-header pb-0 p-3">
<div class="row">
<div class="col-md-8 d-flex align-items-center">
<h6 class="mb-0">Profile Information</h6>
</div>
<div class="col-md-4 text-right">
<a href="javascript:;">
<i class="fas fa-user-edit text-secondary text-sm" data-bs-toggle="tooltip" data-bs-placement="top" title="" aria-hidden="true" data-bs-original-title="Edit Profile" aria-label="Edit Profile"></i><span class="sr-only">Edit Profile</span>
</a>
</div>
</div>
</div>
<div class="card-body p-3">
<p class="text-sm">
Hi, I’m Alec Thompson, Decisions: If you can’t decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality).
</p>
<hr class="horizontal gray-light my-4">
<ul class="list-group">
<li class="list-group-item border-0 ps-0 pt-0 text-sm"><strong class="text-dark">Full Name:</strong> Alec M. Thompson</li>
<li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Mobile:</strong> (44) 123 1234 123</li>
<li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Email:</strong> [email protected]</li>
<li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Location:</strong> USA</li>
<li class="list-group-item border-0 ps-0 pb-0">
<strong class="text-dark text-sm">Social:</strong>
<a class="btn btn-facebook btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
<i class="fab fa-facebook fa-lg" aria-hidden="true"></i>
</a>
<a class="btn btn-twitter btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
<i class="fab fa-twitter fa-lg" aria-hidden="true"></i>
</a>
<a class="btn btn-instagram btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
<i class="fab fa-instagram fa-lg" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-xl-4 drop-zone mb-4">
<div class="card h-100 draggable">
<div class="card-header pb-0 p-3">
<h6 class="mb-0">Conversations</h6>
</div>
<div class="card-body p-3">
<ul class="list-group">
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
<div class="avatar rounded-circle me-3">
<img src="https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" alt="kal" class="shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Sophie B.</h6>
<p class="mb-0 text-xs">Hi! I need more information..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
<div class="avatar rounded-circle me-3">
<img src="https://images.unsplash.com/photo-1485893086445-ed75865251e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="kal" class="border-radius-lg shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Anne Marie</h6>
<p class="mb-0 text-xs">Awesome work, can you..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
<div class="avatar rounded-circle me-3">
<img src="https://images.unsplash.com/photo-1543123820-ac4a5f77da38?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA4fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="kal" class="border-radius-lg shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Ivanna</h6>
<p class="mb-0 text-xs">About files I can..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
<div class="avatar rounded-circle me-3">
<img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" alt="kal" class="border-radius-lg shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Peterson</h6>
<p class="mb-0 text-xs">Have a great afternoon..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
<li class="list-group-item border-0 d-flex align-items-center px-0">
<div class="avatar rounded-circle me-3">
<img src="https://images.unsplash.com/photo-1517588632672-9758d6acba04?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTg1fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="kal" class="border-radius-lg shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Nick Daniel</h6>
<p class="mb-0 text-xs">Hi! I need more information..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
</ul>
</div>
</div>
</div>
</div>Contact Us Section With Cards
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-5 md:grid-cols-2 lg:grid-cols-3">
<div data-type='div' className="flex flex-col items-center gap-3 px-8 py-10 bg-white rounded-3xl shadow-main">
<span data-type='span'>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={38}
height={38}
viewBox="0 0 38 38"
fill="none"
>
<path data-type='path'
d="M31.9904 13.965L22.4166 4.40166C21.6057 3.60976 20.5294 3.16817 19.4104 3.16817C18.2914 3.16817 17.2151 3.60976 16.4041 4.40166L6.8304 13.9017C6.40502 14.283 6.0629 14.7524 5.82645 15.279C5.58999 15.8056 5.46454 16.3776 5.45831 16.9575V30.5425C5.47456 31.6946 5.93476 32.793 6.73808 33.5973C7.5414 34.4016 8.62236 34.846 9.74415 34.8333H28.9225C30.0443 34.846 31.1252 34.4016 31.9285 33.5973C32.7319 32.793 33.1921 31.6946 33.2083 30.5425V16.9575C33.2071 16.4009 33.0989 15.85 32.8899 15.3365C32.6809 14.823 32.3752 14.3569 31.9904 13.965ZM18.47 6.68166C18.7058 6.46025 19.0138 6.33747 19.3333 6.33747C19.6528 6.33747 19.9608 6.46025 20.1966 6.68166L28.5833 15.0417L20.1504 23.4017C19.9146 23.6231 19.6066 23.7459 19.2871 23.7459C18.9675 23.7459 18.6596 23.6231 18.4237 23.4017L10.0833 15.0417L18.47 6.68166ZM30.125 30.5425C30.1052 30.8533 29.9688 31.144 29.7445 31.3537C29.5203 31.5633 29.2256 31.6755 28.9225 31.6667H9.74415C9.44102 31.6755 9.14636 31.5633 8.9221 31.3537C8.69785 31.144 8.56147 30.8533 8.54165 30.5425V17.9708L14.7854 24.1458L12.2262 26.6792C11.9391 26.9758 11.7779 27.3771 11.7779 27.7954C11.7779 28.2137 11.9391 28.615 12.2262 28.9117C12.3695 29.066 12.5417 29.1891 12.7324 29.2734C12.9232 29.3578 13.1286 29.4017 13.3362 29.4025C13.7332 29.4009 14.1142 29.2421 14.4 28.9592L17.1287 26.2675C17.8065 26.6928 18.5853 26.9179 19.3796 26.9179C20.1738 26.9179 20.9527 26.6928 21.6304 26.2675L24.3591 28.9592C24.6449 29.2421 25.026 29.4009 25.4229 29.4025C25.6306 29.4017 25.8359 29.3578 26.0267 29.2734C26.2174 29.1891 26.3896 29.066 26.5329 28.9117C26.82 28.615 26.9812 28.2137 26.9812 27.7954C26.9812 27.3771 26.82 26.9758 26.5329 26.6792L23.9583 24.1458L30.125 17.9708V30.5425Z"
fill="#581ff8"
/>
</svg>
</span>
<p data-type='p' className="text-2xl font-extrabold text-dark-grey-900">Email</p>
<p data-type='p' className="text-base leading-7 text-dark-grey-600">Contact us at</p>
<a data-type='a'
className="text-lg font-bold text-purple-blue-500"
href="mailto: [email protected]"
>
[email protected]
</a>
</div>
<div data-type='div' className="flex flex-col items-center gap-3 px-8 py-10 bg-white rounded-3xl shadow-main">
<span data-type='span'>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={38}
height={38}
viewBox="0 0 38 38"
fill="none"
>
<path data-type='path'
d="M30.4237 20.5833C30.0846 20.5833 29.73 20.4725 29.3908 20.3933C28.7045 20.2357 28.0297 20.0294 27.3712 19.7758C26.656 19.5086 25.8699 19.5225 25.164 19.8148C24.4582 20.1071 23.8826 20.6572 23.5479 21.3592L23.2087 22.0875C21.7115 21.2154 20.3283 20.1513 19.0925 18.9208C17.8944 17.6516 16.8583 16.231 16.0092 14.6933L16.7183 14.3608C17.4018 14.0171 17.9374 13.4259 18.222 12.701C18.5067 11.9761 18.5202 11.1687 18.26 10.4342C18.0151 9.7518 17.8143 9.05363 17.6587 8.34417C17.5817 7.99584 17.52 7.63167 17.4737 7.28334C17.2865 6.16807 16.7177 5.1581 15.8698 4.4353C15.0219 3.7125 13.9506 3.32439 12.8487 3.34084H8.20832C7.55657 3.33996 6.91201 3.48056 6.31687 3.75343C5.72174 4.02629 5.18948 4.42526 4.75498 4.92417C4.31148 5.43662 3.98125 6.04161 3.78698 6.69756C3.59271 7.35351 3.53901 8.04489 3.62957 8.72417C4.4676 15.3142 7.39927 21.4362 11.97 26.1408C16.5508 30.8351 22.5117 33.846 28.9283 34.7067C29.1284 34.7224 29.3294 34.7224 29.5296 34.7067C30.6664 34.7084 31.7641 34.28 32.6129 33.5033C33.0987 33.0571 33.4871 32.5105 33.7528 31.8992C34.0185 31.288 34.1554 30.626 34.1546 29.9567V25.2067C34.1463 24.1126 33.7705 23.0551 33.0907 22.2127C32.411 21.3704 31.4689 20.7948 30.4237 20.5833ZM31.1791 30.0833C31.1786 30.3043 31.1331 30.5227 31.0455 30.7245C30.9579 30.9263 30.8301 31.107 30.6704 31.255C30.5014 31.4131 30.3004 31.5306 30.0817 31.5991C29.8631 31.6676 29.6323 31.6852 29.4062 31.6508C23.6532 30.8792 18.3066 28.1865 14.19 23.9875C10.0698 19.756 7.4252 14.2458 6.66665 8.31251C6.63316 8.08028 6.65037 7.84332 6.71702 7.61877C6.78368 7.39422 6.89813 7.1877 7.05207 7.01417C7.19794 6.84816 7.3764 6.71577 7.57569 6.62571C7.77499 6.53565 7.99059 6.48997 8.20832 6.49167H12.8333C13.1897 6.48273 13.5381 6.6009 13.8192 6.82607C14.1002 7.05124 14.2967 7.3695 14.375 7.72667C14.375 8.15417 14.5137 8.59751 14.6062 9.025C14.7844 9.85446 15.0214 10.6694 15.3154 11.4633L13.1571 12.5083C12.7861 12.6832 12.4978 13.0021 12.3554 13.395C12.2012 13.7805 12.2012 14.2129 12.3554 14.5983C14.5742 19.4794 18.3945 23.4029 23.1471 25.6817C23.5224 25.84 23.9434 25.84 24.3187 25.6817C24.7013 25.5354 25.0118 25.2393 25.1821 24.8583L26.1533 22.6417C26.9487 22.9395 27.7624 23.1828 28.5891 23.37C28.99 23.465 29.4217 23.5442 29.8379 23.6075C30.1857 23.6879 30.4956 23.8897 30.7148 24.1784C30.934 24.467 31.0491 24.8248 31.0404 25.1908L31.1791 30.0833ZM22.0833 3.16667C21.7287 3.16667 21.3587 3.16667 21.0042 3.16667C20.5953 3.20237 20.217 3.40341 19.9524 3.72558C19.6879 4.04776 19.5588 4.46466 19.5935 4.88459C19.6283 5.30451 19.824 5.69306 20.1377 5.96476C20.4514 6.23645 20.8574 6.36903 21.2662 6.33334H22.0833C24.5366 6.33334 26.8893 7.33423 28.6241 9.11582C30.3588 10.8974 31.3333 13.3138 31.3333 15.8333C31.3333 16.1183 31.3333 16.3875 31.3333 16.6725C31.2991 17.0902 31.4276 17.5048 31.6906 17.8253C31.9536 18.1459 32.3296 18.3463 32.7362 18.3825H32.8596C33.2455 18.3841 33.618 18.237 33.9034 17.9702C34.1889 17.7035 34.3665 17.3364 34.4012 16.9417C34.4012 16.5775 34.4012 16.1975 34.4012 15.8333C34.4012 12.4767 33.104 9.25725 30.7943 6.88225C28.4847 4.50724 25.3516 3.17087 22.0833 3.16667ZM25.1667 15.8333C25.1667 16.2533 25.3291 16.656 25.6182 16.9529C25.9073 17.2499 26.2994 17.4167 26.7083 17.4167C27.1172 17.4167 27.5093 17.2499 27.7984 16.9529C28.0876 16.656 28.25 16.2533 28.25 15.8333C28.25 14.1536 27.6003 12.5427 26.4438 11.355C25.2873 10.1673 23.7188 9.50001 22.0833 9.50001C21.6744 9.50001 21.2823 9.66682 20.9932 9.96375C20.7041 10.2607 20.5417 10.6634 20.5417 11.0833C20.5417 11.5033 20.7041 11.906 20.9932 12.2029C21.2823 12.4999 21.6744 12.6667 22.0833 12.6667C22.9011 12.6667 23.6853 13.0003 24.2636 13.5942C24.8418 14.188 25.1667 14.9935 25.1667 15.8333Z"
fill="#581ff8"
/>
</svg>
</span>
<p data-type='p' className="text-2xl font-extrabold text-dark-grey-900">Phone</p>
<p data-type='p' className="text-base leading-7 text-dark-grey-600">
Reach out to us by phone
</p>
<a data-type='a'
className="text-lg font-bold text-purple-blue-500"
href="tel:+516-486-5135"
>
+516-486-5135
</a>
</div>
<div data-type='div' className="flex flex-col items-center gap-3 px-8 py-10 bg-white rounded-3xl shadow-main">
<span data-type='span'>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={38}
height={38}
viewBox="0 0 38 38"
fill="none"
>
<path data-type='path'
d="M31.7091 15.2475C31.4927 12.9341 30.6966 10.7177 29.3984 8.81412C28.1003 6.91054 26.3443 5.38464 24.3014 4.38503C22.2585 3.38541 19.9984 2.94614 17.7412 3.10998C15.4839 3.27383 13.3065 4.03522 11.4208 5.32C9.8008 6.43252 8.44083 7.89972 7.43858 9.6162C6.43633 11.3327 5.81667 13.2558 5.62413 15.2475C5.43524 17.2261 5.67758 19.2231 6.33355 21.0936C6.98953 22.9641 8.04269 24.6611 9.41663 26.0617L17.5875 34.4692C17.7308 34.6176 17.9013 34.7354 18.0892 34.8157C18.277 34.8961 18.4785 34.9375 18.682 34.9375C18.8856 34.9375 19.0871 34.8961 19.2749 34.8157C19.4628 34.7354 19.6333 34.6176 19.7766 34.4692L27.9166 26.0617C29.2906 24.6611 30.3437 22.9641 30.9997 21.0936C31.6557 19.2231 31.898 17.2261 31.7091 15.2475ZM25.7583 23.8292L18.6666 31.1125L11.575 23.8292C10.5298 22.7557 9.72928 21.4578 9.23081 20.0288C8.73233 18.5997 8.54834 17.075 8.69204 15.5642C8.83668 14.0301 9.31143 12.5482 10.082 11.2256C10.8525 9.90299 11.8996 8.77278 13.1475 7.91666C14.7831 6.80079 16.703 6.20555 18.6666 6.20555C20.6302 6.20555 22.5502 6.80079 24.1858 7.91666C25.4299 8.76947 26.4747 9.89469 27.245 11.2115C28.0154 12.5283 28.4922 14.0039 28.6412 15.5325C28.7896 17.0484 28.6079 18.5793 28.1093 20.0142C27.6107 21.4491 26.8076 22.7522 25.7583 23.8292ZM18.6666 9.5C17.2945 9.5 15.9532 9.91787 14.8124 10.7008C13.6715 11.4837 12.7823 12.5965 12.2572 13.8984C11.7321 15.2003 11.5947 16.6329 11.8624 18.015C12.1301 19.3971 12.7908 20.6667 13.7611 21.6631C14.7313 22.6596 15.9674 23.3382 17.3132 23.6131C18.6589 23.888 20.0538 23.7469 21.3215 23.2076C22.5892 22.6684 23.6726 21.7551 24.4349 20.5834C25.1972 19.4117 25.6041 18.0342 25.6041 16.625C25.6001 14.7366 24.8678 12.9268 23.5677 11.5915C22.2675 10.2562 20.5053 9.50418 18.6666 9.5ZM18.6666 20.5833C17.9043 20.5833 17.1592 20.3512 16.5254 19.9162C15.8916 19.4813 15.3976 18.8631 15.1058 18.1398C14.8141 17.4165 14.7378 16.6206 14.8865 15.8528C15.0352 15.0849 15.4023 14.3796 15.9413 13.826C16.4803 13.2724 17.1671 12.8955 17.9147 12.7427C18.6623 12.59 19.4373 12.6684 20.1416 12.968C20.8458 13.2676 21.4477 13.7749 21.8712 14.4259C22.2947 15.0768 22.5208 15.8421 22.5208 16.625C22.5208 17.6748 22.1147 18.6816 21.3919 19.424C20.6691 20.1663 19.6888 20.5833 18.6666 20.5833Z"
fill="#581ff8"
/>
</svg>
</span>
<p data-type='p' className="text-2xl font-extrabold text-dark-grey-900">Location</p>
<p data-type='p' className="text-base leading-7 text-dark-grey-600">
Find us at our office
</p>
<a data-type='a'
className="text-lg font-bold text-purple-blue-500"
target="_blank"
href="https://goo.gl/maps/QcWzYETAh4FS3KTD7"
>
10924 Urna Convallis
</a>
</div>
</div>
</div>
</div>Badge
Sidebar Simple
Component from
Soft UI Dashboard Tailwind
Builder
<div class="h-19.5">
<i class="absolute top-0 right-0 hidden p-4 opacity-50 cursor-pointer fas fa-times text-slate-400 xl:hidden" sidenav-close="" aria-hidden="true"></i>
<a class="block px-8 py-6 m-0 text-sm whitespace-nowrap text-slate-700" href="javascript:;">
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/logo-ct.png" class="inline h-full max-w-full transition-all duration-200 ease-nav-brand max-h-8" alt="main_logo">
<span class="ml-1 font-semibold transition-all duration-200 ease-nav-brand">Soft UI Dashboard</span>
</a>
</div>
<hr class="h-px mt-0 bg-transparent bg-gradient-horizontal-dark">
<div class="items-center block w-auto max-h-screen overflow-auto grow basis-full">
<ul class="flex flex-col pl-0 mb-0">
<li class="mt-0.5 w-full">
<a class="py-2.7 text-sm ease-nav-brand my-0 mx-4 flex items-center whitespace-nowrap px-4 transition-colors" href="javascript:;">
<div class="shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center stroke-0 text-center xl:p-2.5">
<svg width="12px" height="12px" viewBox="0 0 45 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>shop</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1716.000000, -439.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(0.000000, 148.000000)">
<path class="fill-slate-800 opacity-60" d="M46.7199583,10.7414583 L40.8449583,0.949791667 C40.4909749,0.360605034 39.8540131,0 39.1666667,0 L7.83333333,0 C7.1459869,0 6.50902508,0.360605034 6.15504167,0.949791667 L0.280041667,10.7414583 C0.0969176761,11.0460037 -1.23209662e-05,11.3946378 -1.23209662e-05,11.75 C-0.00758042603,16.0663731 3.48367543,19.5725301 7.80004167,19.5833333 L7.81570833,19.5833333 C9.75003686,19.5882688 11.6168794,18.8726691 13.0522917,17.5760417 C16.0171492,20.2556967 20.5292675,20.2556967 23.494125,17.5760417 C26.4604562,20.2616016 30.9794188,20.2616016 33.94575,17.5760417 C36.2421905,19.6477597 39.5441143,20.1708521 42.3684437,18.9103691 C45.1927731,17.649886 47.0084685,14.8428276 47.0000295,11.75 C47.0000295,11.3946378 46.9030823,11.0460037 46.7199583,10.7414583 Z"></path>
<path class="fill-slate-800" d="M39.198,22.4912623 C37.3776246,22.4928106 35.5817531,22.0149171 33.951625,21.0951667 L33.92225,21.1107282 C31.1430221,22.6838032 27.9255001,22.9318916 24.9844167,21.7998837 C24.4750389,21.605469 23.9777983,21.3722567 23.4960833,21.1018359 L23.4745417,21.1129513 C20.6961809,22.6871153 17.4786145,22.9344611 14.5386667,21.7998837 C14.029926,21.6054643 13.533337,21.3722507 13.0522917,21.1018359 C11.4250962,22.0190609 9.63246555,22.4947009 7.81570833,22.4912623 C7.16510551,22.4842162 6.51607673,22.4173045 5.875,22.2911849 L5.875,44.7220845 C5.875,45.9498589 6.7517757,46.9451667 7.83333333,46.9451667 L19.5833333,46.9451667 L19.5833333,33.6066734 L27.4166667,33.6066734 L27.4166667,46.9451667 L39.1666667,46.9451667 C40.2482243,46.9451667 41.125,45.9498589 41.125,44.7220845 L41.125,22.2822926 C40.4887822,22.4116582 39.8442868,22.4815492 39.198,22.4912623 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft">Dashboard</span>
</a>
</li>
<li class="mt-0.5 w-full">
<a class="py-2.7 shadow-soft-xl text-sm ease-nav-brand my-0 mx-4 flex items-center whitespace-nowrap rounded-lg bg-white px-4 font-semibold text-slate-700 transition-colors" href="javascript:;">
<div class="bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center stroke-0 text-center xl:p-2.5">
<svg width="12px" height="12px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>office</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1869.000000, -293.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(153.000000, 2.000000)">
<path class="opacity-60" d="M12.25,17.5 L8.75,17.5 L8.75,1.75 C8.75,0.78225 9.53225,0 10.5,0 L31.5,0 C32.46775,0 33.25,0.78225 33.25,1.75 L33.25,12.25 L29.75,12.25 L29.75,3.5 L12.25,3.5 L12.25,17.5 Z"></path>
<path class="" d="M40.25,14 L24.5,14 C23.53225,14 22.75,14.78225 22.75,15.75 L22.75,38.5 L19.25,38.5 L19.25,22.75 C19.25,21.78225 18.46775,21 17.5,21 L1.75,21 C0.78225,21 0,21.78225 0,22.75 L0,40.25 C0,41.21775 0.78225,42 1.75,42 L40.25,42 C41.21775,42 42,41.21775 42,40.25 L42,15.75 C42,14.78225 41.21775,14 40.25,14 Z M12.25,36.75 L7,36.75 L7,33.25 L12.25,33.25 L12.25,36.75 Z M12.25,29.75 L7,29.75 L7,26.25 L12.25,26.25 L12.25,29.75 Z M35,36.75 L29.75,36.75 L29.75,33.25 L35,33.25 L35,36.75 Z M35,29.75 L29.75,29.75 L29.75,26.25 L35,26.25 L35,29.75 Z M35,22.75 L29.75,22.75 L29.75,19.25 L35,19.25 L35,22.75 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft">Tables</span>
</a>
</li>
<li class="mt-0.5 w-full">
<a class="py-2.7 text-sm ease-nav-brand my-0 mx-4 flex items-center whitespace-nowrap px-4 transition-colors" href="javascript:;">
<div class="shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current stroke-0 text-center xl:p-2.5">
<svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>credit-card</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(453.000000, 454.000000)">
<path class="fill-slate-800 opacity-60" d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z"></path>
<path class="fill-slate-800" d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft">Billing</span>
</a>
</li>
<li class="mt-0.5 w-full">
<a class="py-2.7 text-sm ease-nav-brand my-0 mx-4 flex items-center whitespace-nowrap px-4 transition-colors" href="javascript:;">
<div class="shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center stroke-0 text-center xl:p-2.5">
<svg width="12px" height="12px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>box-3d-50</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(603.000000, 0.000000)">
<path class="fill-slate-800" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z"></path>
<path class="fill-slate-800 opacity-60" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z"></path>
<path class="fill-slate-800 opacity-60" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft">Virtual Reality</span>
</a>
</li>
<li class="mt-0.5 w-full">
<a class="py-2.7 text-sm ease-nav-brand my-0 mx-4 flex items-center whitespace-nowrap px-4 transition-colors" href="javascript:;">
<div class="shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center stroke-0 text-center xl:p-2.5">
<svg width="12px" height="12px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>settings</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(304.000000, 151.000000)">
<polygon class="fill-slate-800 opacity-60" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon>
<path class="fill-slate-800 opacity-60" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z"></path>
<path class="fill-slate-800" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft">RTL</span>
</a>
</li>
<li class="w-full mt-4">
<h6 class="pl-6 ml-2 font-bold leading-tight uppercase text-xs opacity-60 font-display">Account pages</h6>
</li>
<li class="mt-0.5 w-full">
<a class="py-2.7 text-sm ease-nav-brand my-0 mx-4 flex items-center whitespace-nowrap px-4 transition-colors" href="javascript:;">
<div class="shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center stroke-0 text-center xl:p-2.5">
<svg width="12px" height="12px" viewBox="0 0 46 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>customer-support</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1717.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(1.000000, 0.000000)">
<path class="fill-slate-800 opacity-60" d="M45,0 L26,0 C25.447,0 25,0.447 25,1 L25,20 C25,20.379 25.214,20.725 25.553,20.895 C25.694,20.965 25.848,21 26,21 C26.212,21 26.424,20.933 26.6,20.8 L34.333,15 L45,15 C45.553,15 46,14.553 46,14 L46,1 C46,0.447 45.553,0 45,0 Z"></path>
<path class="fill-slate-800" d="M22.883,32.86 C20.761,32.012 17.324,31 13,31 C8.676,31 5.239,32.012 3.116,32.86 C1.224,33.619 0,35.438 0,37.494 L0,41 C0,41.553 0.447,42 1,42 L25,42 C25.553,42 26,41.553 26,41 L26,37.494 C26,35.438 24.776,33.619 22.883,32.86 Z"></path>
<path class="fill-slate-800" d="M13,28 C17.432,28 21,22.529 21,18 C21,13.589 17.411,10 13,10 C8.589,10 5,13.589 5,18 C5,22.529 8.568,28 13,28 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft">Profile</span>
</a>
</li>
<li class="mt-0.5 w-full">
<a class="py-2.7 text-sm ease-nav-brand my-0 mx-4 flex items-center whitespace-nowrap px-4 transition-colors" href="javascript:;">
<div class="shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center stroke-0 text-center xl:p-2.5">
<svg width="12px" height="12px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>document</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(154.000000, 300.000000)">
<path class="fill-slate-800 opacity-60" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z"></path>
<path class="fill-slate-800" d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft">Sign In</span>
</a>
</li>
<li class="mt-0.5 w-full">
<a class="py-2.7 text-sm ease-nav-brand my-0 mx-4 flex items-center whitespace-nowrap px-4 transition-colors" href="javascript:;">
<div class="shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center stroke-0 text-center xl:p-2.5">
<svg width="12px" height="20px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>spaceship</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(4.000000, 301.000000)">
<path class="fill-slate-800" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path>
<path class="fill-slate-800 opacity-60" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path>
<path class="fill-slate-800 opacity-60" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z"></path>
<path class="fill-slate-800 opacity-60" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft">Sign Up</span>
</a>
</li>
</ul>
</div>
Requires JavaScript
Chart Line Nav
Component from
Argon Dashboard
Builder
<div class="card bg-default draggable"> <div class="card-header bg-transparent"> <div class="row align-items-center"> <div class="col"> <h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6> <h5 class="h3 text-white mb-0">Sales value</h5> </div> <div class="col"> <ul class="nav nav-pills justify-content-end"> <li class="nav-item mr-2 mr-md-0" data-toggle="chart"> <a href="#" class="nav-link py-2 px-3 active" data-toggle="tab"> <span class="d-none d-md-block">Month</span> <span class="d-md-none">M</span> </a> </li> <li class="nav-item" data-toggle="chart"> <a href="#" class="nav-link py-2 px-3" data-toggle="tab"> <span class="d-none d-md-block">Week</span> <span class="d-md-none">W</span> </a> </li> </ul> </div> </div> </div> <div class="card-body"> <div class="chart"> <canvas id="chart-sales-dark" class="chart-line chart-canvas"></canvas> </div> </div> </div>
<script>
var chartsLine = document.querySelectorAll(".chart-line"); chartsLine.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "line", data: { labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Performance", tension: 0.4, borderWidth: 4, borderColor: "#5e72e4", pointRadius: 0, backgroundColor: "transparent", data: [0, 20, 10, 30, 15, 40, 20, 60, 60], }, ], }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, tooltips: { enabled: true, mode: "index", intersect: false, }, scales: { yAxes: [{ barPercentage: 1.6, gridLines: { drawBorder: false, color: "rgba(29,140,248,0.0)", zeroLineColor: "transparent", }, ticks: { padding: 0, fontColor: "#8898aa", fontSize: 13, fontFamily: "Open Sans", }, }, ], xAxes: [{ barPercentage: 1.6, gridLines: { drawBorder: false, color: "rgba(29,140,248,0.0)", zeroLineColor: "transparent", }, ticks: { padding: 10, fontColor: "#8898aa", fontSize: 13, fontFamily: "Open Sans", }, }, ], }, layout: { padding: 0, }, }, }); chart.setAttribute("data-chart-initialized", "true"); } });
</script>
Footer Centered With Logo
Component from
Motion Landing Library React
Builder
<div data-type='div' className="w-full draggable">
<div data-type='div' className="container flex flex-col mx-auto">
<div data-type='div' className="flex flex-col items-center w-full my-20">
<span data-type='span' className="mb-8">
<svg data-type='svg'
width={140}
viewBox="0 0 419 95"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path data-type='path'
d="M121.4 69V25.32H132.6V30.68C133.72 28.5467 135.347 26.9733 137.48 25.96C139.613 24.8933 142.067 24.36 144.84 24.36C147.72 24.36 150.333 24.9733 152.68 26.2C155.08 27.3733 156.893 29 158.12 31.08C159.667 28.7867 161.587 27.1067 163.88 26.04C166.227 24.92 168.813 24.36 171.64 24.36C174.787 24.36 177.56 25.0533 179.96 26.44C182.413 27.8267 184.333 29.7733 185.72 32.28C187.107 34.7333 187.8 37.6133 187.8 40.92V69H175.8V43.48C175.8 40.9733 175.107 38.9733 173.72 37.48C172.387 35.9333 170.547 35.16 168.2 35.16C165.853 35.16 163.987 35.9333 162.6 37.48C161.267 38.9733 160.6 40.9733 160.6 43.48V69H148.6V43.48C148.6 40.9733 147.907 38.9733 146.52 37.48C145.187 35.9333 143.347 35.16 141 35.16C138.653 35.16 136.787 35.9333 135.4 37.48C134.067 38.9733 133.4 40.9733 133.4 43.48V69H121.4ZM217.377 69.96C213.057 69.96 209.11 68.9733 205.537 67C202.017 65.0267 199.19 62.3333 197.057 58.92C194.977 55.4533 193.937 51.5333 193.937 47.16C193.937 42.7333 194.977 38.8133 197.057 35.4C199.19 31.9867 202.017 29.2933 205.537 27.32C209.11 25.3467 213.057 24.36 217.377 24.36C221.697 24.36 225.617 25.3467 229.137 27.32C232.657 29.2933 235.457 31.9867 237.537 35.4C239.67 38.8133 240.737 42.7333 240.737 47.16C240.737 51.5333 239.67 55.4533 237.537 58.92C235.457 62.3333 232.657 65.0267 229.137 67C225.617 68.9733 221.697 69.96 217.377 69.96ZM217.377 59.16C220.63 59.16 223.27 58.04 225.297 55.8C227.324 53.56 228.337 50.68 228.337 47.16C228.337 43.6933 227.324 40.84 225.297 38.6C223.27 36.3067 220.63 35.16 217.377 35.16C214.124 35.16 211.457 36.3067 209.377 38.6C207.35 40.84 206.337 43.6933 206.337 47.16C206.337 50.68 207.35 53.56 209.377 55.8C211.457 58.04 214.124 59.16 217.377 59.16ZM268.065 69.48C262.785 69.48 258.678 68.0667 255.745 65.24C252.865 62.36 251.425 58.36 251.425 53.24V35.72H244.065V25.32H244.465C249.105 25.32 251.425 23.08 251.425 18.6V15.4H263.425V25.32H273.665V35.72H263.425V52.44C263.425 56.8667 265.905 59.08 270.865 59.08C271.612 59.08 272.545 59 273.665 58.84V69C272.865 69.1067 271.958 69.2133 270.945 69.32C269.932 69.4267 268.972 69.48 268.065 69.48ZM280.697 21.4V9.39999H292.697V21.4H280.697ZM280.697 69V25.32H292.697V69H280.697ZM323.158 69.96C318.838 69.96 314.891 68.9733 311.318 67C307.798 65.0267 304.971 62.3333 302.838 58.92C300.758 55.4533 299.718 51.5333 299.718 47.16C299.718 42.7333 300.758 38.8133 302.838 35.4C304.971 31.9867 307.798 29.2933 311.318 27.32C314.891 25.3467 318.838 24.36 323.158 24.36C327.478 24.36 331.398 25.3467 334.918 27.32C338.438 29.2933 341.238 31.9867 343.318 35.4C345.451 38.8133 346.518 42.7333 346.518 47.16C346.518 51.5333 345.451 55.4533 343.318 58.92C341.238 62.3333 338.438 65.0267 334.918 67C331.398 68.9733 327.478 69.96 323.158 69.96ZM323.158 59.16C326.411 59.16 329.051 58.04 331.078 55.8C333.105 53.56 334.118 50.68 334.118 47.16C334.118 43.6933 333.105 40.84 331.078 38.6C329.051 36.3067 326.411 35.16 323.158 35.16C319.905 35.16 317.238 36.3067 315.158 38.6C313.131 40.84 312.118 43.6933 312.118 47.16C312.118 50.68 313.131 53.56 315.158 55.8C317.238 58.04 319.905 59.16 323.158 59.16ZM353.588 69V25.32H364.788V30.68C365.908 28.5467 367.534 26.9733 369.668 25.96C371.801 24.8933 374.254 24.36 377.028 24.36C380.334 24.36 383.214 25.0533 385.668 26.44C388.174 27.8267 390.121 29.7733 391.508 32.28C392.894 34.7333 393.588 37.6133 393.588 40.92V69H381.588V43.48C381.588 40.9733 380.841 38.9733 379.348 37.48C377.854 35.9333 375.934 35.16 373.588 35.16C371.241 35.16 369.321 35.9333 367.828 37.48C366.334 38.9733 365.588 40.9733 365.588 43.48V69H353.588Z"
fill="url(#paint0_linear_1001_3)"
/>
<path data-type='path'
d="M34.2138 5.86107C34.7122 4.28095 36.3972 3.40401 37.9773 3.90239L76.9347 16.1896C78.5148 16.688 79.3917 18.373 78.8934 19.9531L72.8993 38.9574C72.2692 40.9554 69.8371 41.7086 68.188 40.4165L52.7882 28.3503C52.2168 27.9025 51.5023 27.6772 50.7773 27.7161L31.2415 28.7635C29.1495 28.8757 27.5896 26.8634 28.2198 24.8654L34.2138 5.86107Z"
fill="url(#paint1_linear_1001_3)"
/>
<path data-type='path'
d="M13.3226 80.1965C11.7071 80.5642 10.0994 79.5527 9.73164 77.9371L0.665552 38.1067C0.297829 36.4912 1.30938 34.8834 2.92491 34.5157L22.3551 30.093C24.3979 29.6281 26.2761 31.347 25.9936 33.4229L23.3549 52.808C23.2569 53.5274 23.4232 54.2578 23.8228 54.864L34.5917 71.1973C35.7449 72.9464 34.7957 75.3089 32.7529 75.7738L13.3226 80.1965Z"
fill="url(#paint2_linear_1001_3)"
/>
<path data-type='path'
d="M87.9774 60.8205C89.0945 62.0441 89.008 63.9417 87.7843 65.0587L57.6148 92.5988C56.3911 93.7158 54.4936 93.6294 53.3766 92.4057L39.9419 77.6883C38.5294 76.141 39.0976 73.6592 41.0426 72.8806L59.2053 65.6098C59.8793 65.34 60.4326 64.835 60.7626 64.1883L69.6548 46.762C70.6071 44.8959 73.1303 44.5557 74.5427 46.103L87.9774 60.8205Z"
fill="url(#paint3_linear_1001_3)"
/>
<defs data-type='defs' >
<linearGradient data-type='linearGradient'
id="paint0_linear_1001_3"
x1={268}
y1={0}
x2={268}
y2={86}
gradientUnits="userSpaceOnUse"
>
<stop data-type='stop' stopColor="#1A31A7" />
<stop data-type='stop' offset={1} stopColor="#7C3AED" />
</linearGradient>
<linearGradient data-type='linearGradient'
id="paint1_linear_1001_3"
x1="62.4802"
y1="11.9181"
x2="43.6919"
y2="47.2867"
gradientUnits="userSpaceOnUse"
>
<stop data-type='stop' stopColor="#1A31A7" />
<stop data-type='stop' offset={1} stopColor="#7C3AED" />
</linearGradient>
<linearGradient data-type='linearGradient'
id="paint2_linear_1001_3"
x1="4.27748"
y1="52.74"
x2="44.293"
y2="51.0974"
gradientUnits="userSpaceOnUse"
>
<stop data-type='stop' stopColor="#1A31A7" />
<stop data-type='stop' offset={1} stopColor="#7C3AED" />
</linearGradient>
<linearGradient data-type='linearGradient'
id="paint3_linear_1001_3"
x1="68.56"
y1="82.2363"
x2="47.3853"
y2="48.2426"
gradientUnits="userSpaceOnUse"
>
<stop data-type='stop' stopColor="#1A31A7" />
<stop data-type='stop' offset={1} stopColor="#7C3AED" />
</linearGradient>
</defs>
</svg>
</span>
<div data-type='div' className="flex flex-col items-center gap-6 mb-8">
<div data-type='div' className="flex flex-wrap items-center justify-center gap-5 lg:gap-12 gap-y-3 lg:flex-nowrap text-dark-grey-900">
<a data-type='a'
href="javascript:void(0)"
className="text-gray-600 hover:text-gray-900"
>
About
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-gray-600 hover:text-gray-900"
>
Features
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-gray-600 hover:text-gray-900"
>
Blog
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-gray-600 hover:text-gray-900"
>
Resources
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-gray-600 hover:text-gray-900"
>
Partners
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-gray-600 hover:text-gray-900"
>
Help
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-gray-600 hover:text-gray-900"
>
Terms
</a>
</div>
<div data-type='div' className="flex items-center gap-8">
<a data-type='a'
href="javascript:void(0)"
className="text-grey-700 hover:text-grey-900"
>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path data-type='path'
fillRule="evenodd"
clipRule="evenodd"
d="M13.6348 20.7273V12.766H16.3582L16.7668 9.66246H13.6348V7.68128C13.6348 6.78301 13.8881 6.17085 15.2029 6.17085L16.877 6.17017V3.39424C16.5875 3.35733 15.5937 3.27273 14.437 3.27273C12.0216 3.27273 10.368 4.71881 10.368 7.37391V9.66246H7.63636V12.766H10.368V20.7273H13.6348Z"
fill="currentColor"
/>
<mask data-type='mask'
id="mask0_3320_6483"
maskType="luminance"
maskUnits="userSpaceOnUse"
x={7}
y={3}
width={10}
height={18}
>x
<path data-type='path'
fillRule="evenodd"
clipRule="evenodd"
d="M13.6348 20.7273V12.766H16.3582L16.7668 9.66246H13.6348V7.68128C13.6348 6.78301 13.8881 6.17085 15.2029 6.17085L16.877 6.17017V3.39424C16.5875 3.35733 15.5937 3.27273 14.437 3.27273C12.0216 3.27273 10.368 4.71881 10.368 7.37391V9.66246H7.63636V12.766H10.368V20.7273H13.6348Z"
fill="white"
/>
</mask>
<g data-type='g' mask="url(#mask0_3320_6483)"></g>
</svg>
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-grey-700 hover:text-grey-900"
>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path data-type='path'
fillRule="evenodd"
clipRule="evenodd"
d="M21.8182 6.14597C21.1356 6.44842 20.4032 6.65355 19.6337 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.207 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4058 9.03391C9.24436 8.87512 6.44106 7.36048 4.56485 5.05894C4.23688 5.61985 4.0503 6.27342 4.0503 6.97109C4.0503 8.29106 4.72246 9.45573 5.74227 10.1371C5.11879 10.1163 4.53239 9.94476 4.01903 9.65967V9.70718C4.01903 11.5498 5.33088 13.0876 7.07033 13.4376C6.75164 13.5234 6.41558 13.5709 6.06791 13.5709C5.82224 13.5709 5.58467 13.5465 5.35173 13.5002C5.83612 15.0125 7.2407 16.1123 8.90485 16.1424C7.60343 17.1622 5.96246 17.7683 4.18012 17.7683C3.87303 17.7683 3.57055 17.7498 3.27273 17.7162C4.95658 18.7974 6.95564 19.4278 9.10418 19.4278C16.1026 19.4278 19.9281 13.6312 19.9281 8.60397L19.9153 8.11145C20.6628 7.57833 21.3094 6.90851 21.8182 6.14597Z"
fill="currentColor"
/>
<mask data-type='mask'
id="mask0_3320_6484"
maskType="luminance"
maskUnits="userSpaceOnUse"
x={3}
y={4}
width={19}
height={16}
>
<path data-type='path'
fillRule="evenodd"
clipRule="evenodd"
d="M21.8182 6.14597C21.1356 6.44842 20.4032 6.65355 19.6337 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.207 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4058 9.03391C9.24436 8.87512 6.44106 7.36048 4.56485 5.05894C4.23688 5.61985 4.0503 6.27342 4.0503 6.97109C4.0503 8.29106 4.72246 9.45573 5.74227 10.1371C5.11879 10.1163 4.53239 9.94476 4.01903 9.65967V9.70718C4.01903 11.5498 5.33088 13.0876 7.07033 13.4376C6.75164 13.5234 6.41558 13.5709 6.06791 13.5709C5.82224 13.5709 5.58467 13.5465 5.35173 13.5002C5.83612 15.0125 7.2407 16.1123 8.90485 16.1424C7.60343 17.1622 5.96246 17.7683 4.18012 17.7683C3.87303 17.7683 3.57055 17.7498 3.27273 17.7162C4.95658 18.7974 6.95564 19.4278 9.10418 19.4278C16.1026 19.4278 19.9281 13.6312 19.9281 8.60397L19.9153 8.11145C20.6628 7.57833 21.3094 6.90851 21.8182 6.14597Z"
fill="white"
/>
</mask>
<g data-type='g' mask="url(#mask0_3320_6484)"></g>
</svg>
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-grey-700 hover:text-grey-900"
>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path data-type='path'
d="M12 3C7.0275 3 3 7.13211 3 12.2284C3 16.3065 5.5785 19.7648 9.15375 20.9841C9.60375 21.0709 9.76875 20.7853 9.76875 20.5403C9.76875 20.3212 9.76125 19.7405 9.7575 18.9712C7.254 19.5277 6.726 17.7332 6.726 17.7332C6.3165 16.6681 5.72475 16.3832 5.72475 16.3832C4.9095 15.8111 5.78775 15.8229 5.78775 15.8229C6.6915 15.887 7.16625 16.7737 7.16625 16.7737C7.96875 18.1847 9.273 17.777 9.7875 17.5414C9.8685 16.9443 10.1003 16.5381 10.3575 16.3073C8.35875 16.0764 6.258 15.2829 6.258 11.7471C6.258 10.7399 6.60675 9.91659 7.18425 9.27095C7.083 9.03774 6.77925 8.0994 7.263 6.82846C7.263 6.82846 8.01675 6.58116 9.738 7.77462C10.458 7.56958 11.223 7.46785 11.988 7.46315C12.753 7.46785 13.518 7.56958 14.238 7.77462C15.948 6.58116 16.7017 6.82846 16.7017 6.82846C17.1855 8.0994 16.8818 9.03774 16.7917 9.27095C17.3655 9.91659 17.7142 10.7399 17.7142 11.7471C17.7142 15.2923 15.6105 16.0725 13.608 16.2995C13.923 16.5765 14.2155 17.1423 14.2155 18.0071C14.2155 19.242 14.2043 20.2344 14.2043 20.5341C14.2043 20.7759 14.3617 21.0647 14.823 20.9723C18.4237 19.7609 21 16.3002 21 12.2284C21 7.13211 16.9703 3 12 3Z"
fill="currentColor"
/>
</svg>
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-grey-700 hover:text-grey-900"
>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={18}
height={18}
viewBox="0 0 18 18"
fill="none"
>
<path data-type='path'
d="M16.2 0H1.8C0.81 0 0 0.81 0 1.8V16.2C0 17.19 0.81 18 1.8 18H16.2C17.19 18 18 17.19 18 16.2V1.8C18 0.81 17.19 0 16.2 0ZM5.4 15.3H2.7V7.2H5.4V15.3ZM4.05 5.67C3.15 5.67 2.43 4.95 2.43 4.05C2.43 3.15 3.15 2.43 4.05 2.43C4.95 2.43 5.67 3.15 5.67 4.05C5.67 4.95 4.95 5.67 4.05 5.67ZM15.3 15.3H12.6V10.53C12.6 9.81004 11.97 9.18 11.25 9.18C10.53 9.18 9.9 9.81004 9.9 10.53V15.3H7.2V7.2H9.9V8.28C10.35 7.56 11.34 7.02 12.15 7.02C13.86 7.02 15.3 8.46 15.3 10.17V15.3Z"
fill="currentColor"
/>
</svg>
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-grey-700 hover:text-grey-900"
>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path data-type='path'
fillRule="evenodd"
clipRule="evenodd"
d="M7.60063 2.18182H16.3991C19.3873 2.18182 21.8183 4.61281 21.8182 7.60074V16.3993C21.8182 19.3872 19.3873 21.8182 16.3991 21.8182H7.60063C4.6127 21.8182 2.18182 19.3873 2.18182 16.3993V7.60074C2.18182 4.61281 4.6127 2.18182 7.60063 2.18182ZM16.3993 20.0759C18.4266 20.0759 20.0761 18.4266 20.0761 16.3993H20.0759V7.60074C20.0759 5.57348 18.4265 3.92405 16.3991 3.92405H7.60063C5.57336 3.92405 3.92405 5.57348 3.92405 7.60074V16.3993C3.92405 18.4266 5.57336 20.0761 7.60063 20.0759H16.3993ZM6.85714 12.0001C6.85714 9.16424 9.16418 6.85714 12 6.85714C14.8358 6.85714 17.1429 9.16424 17.1429 12.0001C17.1429 14.8359 14.8358 17.1429 12 17.1429C9.16418 17.1429 6.85714 14.8359 6.85714 12.0001ZM8.62798 12C8.62798 13.8593 10.1407 15.3719 12 15.3719C13.8593 15.3719 15.372 13.8593 15.372 12C15.372 10.1406 13.8594 8.6279 12 8.6279C10.1406 8.6279 8.62798 10.1406 8.62798 12Z"
fill="currentColor"
/>
<mask data-type='mask'
id="mask0_3320_6487"
maskType="luminance"
maskUnits="userSpaceOnUse"
x={2}
y={2}
width={20}
height={20}
>
<path data-type='path'
fillRule="evenodd"
clipRule="evenodd"
d="M7.60063 2.18182H16.3991C19.3873 2.18182 21.8183 4.61281 21.8182 7.60074V16.3993C21.8182 19.3872 19.3873 21.8182 16.3991 21.8182H7.60063C4.6127 21.8182 2.18182 19.3873 2.18182 16.3993V7.60074C2.18182 4.61281 4.6127 2.18182 7.60063 2.18182ZM16.3993 20.0759C18.4266 20.0759 20.0761 18.4266 20.0761 16.3993H20.0759V7.60074C20.0759 5.57348 18.4265 3.92405 16.3991 3.92405H7.60063C5.57336 3.92405 3.92405 5.57348 3.92405 7.60074V16.3993C3.92405 18.4266 5.57336 20.0761 7.60063 20.0759H16.3993ZM6.85714 12.0001C6.85714 9.16424 9.16418 6.85714 12 6.85714C14.8358 6.85714 17.1429 9.16424 17.1429 12.0001C17.1429 14.8359 14.8358 17.1429 12 17.1429C9.16418 17.1429 6.85714 14.8359 6.85714 12.0001ZM8.62798 12C8.62798 13.8593 10.1407 15.3719 12 15.3719C13.8593 15.3719 15.372 13.8593 15.372 12C15.372 10.1406 13.8594 8.6279 12 8.6279C10.1406 8.6279 8.62798 10.1406 8.62798 12Z"
fill="white"
/>
</mask>
<g data-type='g' mask="url(#mask0_3320_6487)"></g>
</svg>
</a>
</div>
</div>
<div data-type='div' className="flex items-center">
<p data-type='p' className="text-base font-normal leading-7 text-center text-grey-700">
© 2023 Motion Tailwind CSS Library. All rights reserved.
</p>
</div>
</div>
</div>
</div>Profile Form
Component from
Asteria Dashboard
Builder
<div class="card mb-4 draggable">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h6 class="mb-0">Edit profile </h6>
</div>
<div class="col-4 text-end">
<a href="#!" class="btn btn-sm btn-primary mb-0">Settings</a>
</div>
</div>
</div>
<div class="card-body">
<form>
<h6 class="heading-small text-muted mb-4">User information</h6>
<div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-username">Username</label>
<input type="text" id="input-username" class="form-control" placeholder="Username" value="lucky.jesse">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-email">Email address</label>
<input type="email" id="input-email" class="form-control" placeholder="[email protected]">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-first-name">First name</label>
<input type="text" id="input-first-name" class="form-control" placeholder="First name" value="Lucky">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-last-name">Last name</label>
<input type="text" id="input-last-name" class="form-control" placeholder="Last name" value="Jesse">
</div>
</div>
</div>
</div>
<hr class="horizontal dark my-4">
<!-- Address -->
<h6 class="heading-small text-muted mb-4">Contact information</h6>
<div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="form-control-label" for="input-address">Address</label>
<input id="input-address" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-city">City</label>
<input type="text" id="input-city" class="form-control" placeholder="City" value="New York">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-country">Country</label>
<input type="text" id="input-country" class="form-control" placeholder="Country" value="United States">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-country">Postal code</label>
<input type="number" id="input-postal-code" class="form-control" placeholder="Postal code">
</div>
</div>
</div>
</div>
<hr class="horizontal dark my-4">
<!-- Description -->
<h6 class="heading-small text-muted mb-4">About me</h6>
<div">
<div class="form-group">
<label class="form-control-label">About Me</label>
<textarea rows="4" class="form-control" placeholder="A few words about you ...">A beautiful Dashboard for Bootstrap 5.</textarea>
</div>
</div"></form></div>
</div>
Requires JavaScript
Section Charts
Component from
Adminkit
Builder
<div class="row removable"> <div class="col-12 col-lg-6 drop-zone"> <div class="card flex-fill w-100 draggable"> <div class="card-header"> <h5 class="card-title">Line Chart</h5> <h6 class="card-subtitle text-muted">A line chart is a way of plotting data points on a line.</h6> </div> <div class="card-body"> <div class="chart"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <canvas id="chartjs-line" style="display: block; height: 300px; width: 428px;" width="856" height="600" class="chart-line-double chartjs-render-monitor"></canvas> </div> </div> </div> </div> <div class="col-12 col-lg-6 drop-zone"> <div class="card draggable"> <div class="card-header"> <h5 class="card-title">Bar Chart</h5> <h6 class="card-subtitle text-muted">A bar chart provides a way of showing data values represented as vertical bars.</h6> </div> <div class="card-body"> <div class="chart"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <canvas id="chartjs-bar" width="856" height="600" style="display: block; height: 300px; width: 428px;" class="chart-bar chartjs-render-monitor"></canvas> </div> </div> </div> </div> </div>
<script>
var chartsLineDouble = document.querySelectorAll(".chart-line-double"); chartsLineDouble.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "line", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Sales ($)", fill: true, backgroundColor: "transparent", borderColor: window.theme.primary, data: [2115, 1562, 1584, 1892, 1487, 2223, 2966, 2448, 2905, 3838, 2917, 3327] }, { label: "Orders", fill: true, backgroundColor: "transparent", borderColor: "#adb5bd", borderDash: [4, 4], data: [958, 724, 629, 883, 915, 1214, 1476, 1212, 1554, 2128, 1466, 1827] }] }, options: { maintainAspectRatio: false, legend: { display: false }, tooltips: { intersect: false }, hover: { intersect: true }, plugins: { filler: { propagate: false } }, scales: { xAxes: [{ reverse: true, gridLines: { color: "rgba(0,0,0,0.05)" } }], yAxes: [{ ticks: { stepSize: 500 }, display: true, borderDash: [5, 5], gridLines: { color: "rgba(0,0,0,0)", fontColor: "#fff" } }] } } }); chart.setAttribute("data-chart-initialized", "true"); } }); var chartsBar = document.querySelectorAll(".chart-bar"); chartsBar.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "bar", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Last year", backgroundColor: window.theme.primary, borderColor: window.theme.primary, hoverBackgroundColor: window.theme.primary, hoverBorderColor: window.theme.primary, data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79], barPercentage: .75, categoryPercentage: .5 }, { label: "This year", backgroundColor: "#dee2e6", borderColor: "#dee2e6", hoverBackgroundColor: "#dee2e6", hoverBorderColor: "#dee2e6", data: [69, 66, 24, 48, 52, 51, 44, 53, 62, 79, 51, 68], barPercentage: .75, categoryPercentage: .5 }] }, options: { maintainAspectRatio: false, legend: { display: false }, scales: { yAxes: [{ gridLines: { display: false }, stacked: false, ticks: { stepSize: 20 } }], xAxes: [{ stacked: false, gridLines: { color: "transparent" } }] } } }); chart.setAttribute("data-chart-initialized", "true"); } });
</script>
Input
Component from
Soft UI Dashboard
Builder
<input type="text" class="form-control draggable" placeholder="Input" aria-label="Email" aria-describedby="email-addon">