Form Account
Component 1
Basic info
<div class="bg-gray-100 py-5">
<div class="container">
<div class="bg-white rounded-12 shadow-dark-80 mb-3">
<div class="border-bottom border-gray-200 px-4 px-md-5 py-4">
<h5 class="mb-0">Basic info</h5>
</div>
<div class="px-4 px-md-5 py-4">
<form>
<div class="row">
<div class="col-md-6">
<div class="mb-4">
<label class="form-label form-label-lg">Full name</label>
<input type="text" class="form-control form-control-xl" placeholder="Full name" value="Noell Blue">
</div>
</div>
<div class="col-md-6">
<div class="mb-4">
<label class="form-label form-label-lg">Email</label>
<input type="text" class="form-control form-control-xl" placeholder="Email" value="muse@email.com">
</div>
</div>
<div class="col-md-12">
<div class="mb-4">
<label class="form-label form-label-lg">Bio</label>
<textarea rows="3" class="form-control form-control-xl" placeholder="Message">We create intuitive user interface and design systems to bridge the gap between your product and customers.</textarea>
</div>
</div>
<div class="col-md-12 py-2">
<a href="#" class="btn btn-lg btn-primary">Save Profile</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Component 2
Privacy
Show profile publicly
Currently set to publicShow profile publicly
Currently set to public
<div class="bg-gray-100 py-5">
<div class="container">
<div class="bg-white rounded-12 shadow-dark-80 mb-3">
<div class="border-bottom border-gray-200 px-4 px-md-5 py-4">
<h5 class="mb-0">Privacy</h5>
</div>
<div class="px-4 px-md-5 py-4">
<div class="d-flex align-items-center">
<div>
<h6 class="font-weight-normal">Show profile publicly</h6>
<small class="d-block text-gray-600">Currently set to public</small>
</div>
<div class="form-check form-switch ml-auto">
<input class="form-check-input mr-0" type="checkbox" checked id="flexSwitchCheckDefault">
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-flex align-items-center">
<div>
<h6 class="font-weight-normal">Show profile publicly</h6>
<small class="d-block text-gray-600">Currently set to public</small>
</div>
<div class="form-check form-switch ml-auto">
<input class="form-check-input mr-0" type="checkbox" id="flexSwitchCheckDefault2">
</div>
</div>
</div>
</div>
</div>
</div>
Component 3
Connected Accounts
<div class="bg-gray-100 py-5">
<div class="container">
<div class="bg-white rounded-12 shadow-dark-80">
<div class="border-bottom border-gray-200 px-4 px-md-5 py-4">
<h5 class="mb-0">Connected Accounts</h5>
</div>
<div class="px-4 px-md-5 py-4">
<div class="d-flex align-items-center">
<div>
<h6 class="font-weight-normal">Facebook</h6>
<small class="d-block text-gray-600">noell@gmail.com</small>
</div>
<div class="ml-auto">
<a href="#" class="text-primary caption font-weight-semibold">Disconnect</a>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-flex align-items-center">
<div>
<h6 class="font-weight-normal">Twitter</h6>
<small class="d-block text-gray-600">Not connected</small>
</div>
<div class="ml-auto">
<a href="#" class="text-black-600 caption font-weight-semibold">Connect</a>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-flex align-items-center">
<div>
<h6 class="font-weight-normal">Dribbble</h6>
<small class="d-block text-gray-600">Not connected</small>
</div>
<div class="ml-auto">
<a href="#" class="text-black-600 caption font-weight-semibold">Connect</a>
</div>
</div>
</div>
</div>
</div>
</div>
Component 4
Current Plan
Basic plan
10,000 contacts and 30,000 marketing emails/month$0.003 per additional contact or email
$24/mo
Usage
5,348 unique contacts stored this month Show full stats
56%
<div class="bg-gray-100 py-5">
<div class="container">
<div class="bg-white rounded-12 shadow-dark-80 mb-3">
<div class="border-bottom border-gray-200 px-4 px-md-5 py-4 d-flex align-items-center">
<h5 class="mb-0">Current Plan</h5>
<div class=" ml-auto"><a href="#" class="btn btn-sm btn-primary text-nowrap text-uppercase">Change Plan</a></div>
</div>
<div class="px-4 px-md-5 py-4">
<div class="d-flex align-items-center">
<div class="pr-2">
<h6 class="font-weight-normal">Basic plan</h6>
<small class="d-block text-gray-600 lh-lg">10,000 contacts and 30,000 marketing emails/month <br class="d-none d-lg-block">
$0.003 per additional contact or email</small>
</div>
<div class="ml-auto">
<span class="h5">$24/mo</span>
</div>
</div>
</div>
<hr class="bg-gray-200 my-0">
<div class="px-4 px-md-5 py-4">
<div class="d-flex align-items-center">
<div class="pr-2">
<h6 class="font-weight-normal">Usage</h6>
<small class="d-block text-gray-600">5,348 unique contacts stored this month</small>
<a href="#" class="small link-primary">Show full stats</a>
</div>
<div class="ml-auto">
<span class="h5">56%</span>
</div>
</div>
</div>
</div>
</div>
</div>
Component 5
Payment Methods
<div class="bg-gray-100 py-5">
<div class="container">
<div class="bg-white rounded-12 shadow-dark-80 mb-3">
<div class="border-bottom border-gray-200 px-4 px-md-5 py-4 d-flex align-items-center">
<h5 class="mb-0">Payment Methods</h5>
<div class=" ml-auto"><a href="#" class="btn btn-sm btn-primary text-nowrap text-uppercase">Add Payment</a></div>
</div>
<div class="px-4 px-md-5 py-4">
<div class="d-flex align-items-center">
<div class="d-md-flex align-items-center">
<span class="mr-3 mb-2"><img src="../assets/img/pages/visa.svg" alt="Visa"></span>
<div>
<h6 class="font-weight-normal">Ending in 6745 <span class="badge badge-sm badge-primary font-weight-semibold ml-2">Primary</span></h6>
<small class="d-block text-gray-600">Expires 05/2023</small>
</div>
</div>
<div class="ml-auto dropdown">
<a href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-expanded="false">
<svg data-name="icons/tabler/dots" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Dots background" width="16" height="16" fill="none"></rect>
<path d="M0,12.4A1.6,1.6,0,1,1,1.6,14,1.6,1.6,0,0,1,0,12.4Zm1.372,0a.229.229,0,1,0,.229-.229A.229.229,0,0,0,1.372,12.4ZM0,7A1.6,1.6,0,1,1,1.6,8.6,1.6,1.6,0,0,1,0,7ZM1.372,7A.229.229,0,1,0,1.6,6.772.229.229,0,0,0,1.372,7ZM0,1.6A1.6,1.6,0,1,1,1.6,3.2,1.6,1.6,0,0,1,0,1.6Zm1.372,0A.229.229,0,1,0,1.6,1.372.229.229,0,0,0,1.372,1.6Z" transform="translate(6 1)" fill="#ADB5BD"></path>
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-flex align-items-center">
<div class="d-md-flex align-items-center">
<span class="mr-3 mb-2"><img src="../assets/img/pages/mastercard.svg" alt="Mastercard"></span>
<div>
<h6 class="font-weight-normal">Ending in 1254</h6>
<small class="d-block text-gray-600">Expires 06/2022</small>
</div>
</div>
<div class="ml-auto dropup">
<a href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-expanded="false">
<svg data-name="icons/tabler/dots" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Dots background" width="16" height="16" fill="none"></rect>
<path d="M0,12.4A1.6,1.6,0,1,1,1.6,14,1.6,1.6,0,0,1,0,12.4Zm1.372,0a.229.229,0,1,0,.229-.229A.229.229,0,0,0,1.372,12.4ZM0,7A1.6,1.6,0,1,1,1.6,8.6,1.6,1.6,0,0,1,0,7ZM1.372,7A.229.229,0,1,0,1.6,6.772.229.229,0,0,0,1.372,7ZM0,1.6A1.6,1.6,0,1,1,1.6,3.2,1.6,1.6,0,0,1,0,1.6Zm1.372,0A.229.229,0,1,0,1.6,1.372.229.229,0,0,0,1.372,1.6Z" transform="translate(6 1)" fill="#ADB5BD"></path>
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Component 6
<div class="bg-gray-100 py-5">
<div class="container">
<div class="bg-white rounded-12 shadow-dark-80 mb-4">
<div class="border-bottom border-gray-200 px-4 px-md-5 py-4">
<h5 class="mb-0">Invoices</h5>
</div>
<div class="px-4 px-md-5 py-4">
<div class="d-md-flex align-items-center">
<div>
<h6 class="font-weight-normal">Invoice #11432 <span class="badge badge-sm badge-primary font-weight-semibold ml-2">Pending</span></h6>
<small class="d-block text-gray-600">Billed Jun, 06, 2021</small>
</div>
<div class="ml-auto mt-3 mb-md-3">
<a href="#" class="btn btn-sm btn-primary text-uppercase">Pay Now</a>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-md-flex align-items-center">
<div>
<h6 class="font-weight-normal">Invoice #11431</h6>
<small class="d-block text-gray-600">Billed Jun, 06, 2021</small>
</div>
<div class="ml-auto mt-3 mb-md-3">
<a href="#" class="btn btn-sm bg-gray-100 px-4 text-success text-uppercase">Paid</a>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-md-flex align-items-center">
<div>
<h6 class="font-weight-normal">Invoice #11430</h6>
<small class="d-block text-gray-600">Billed Jun, 06, 2021</small>
</div>
<div class="ml-auto mt-3 mb-md-3">
<a href="#" class="btn btn-sm bg-gray-100 px-4 text-success text-uppercase">Paid</a>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-md-flex align-items-center">
<div>
<h6 class="font-weight-normal">Invoice #11429</h6>
<small class="d-block text-gray-600">Billed Jun, 06, 2021</small>
</div>
<div class="ml-auto mt-3 mb-md-3">
<a href="#" class="btn btn-sm bg-gray-100 px-4 text-success text-uppercase">Paid</a>
</div>
</div>
</div>
</div>
</div>
</div>
Component 7
Friends
<div class="bg-gray-100 py-5">
<div class="container">
<div class="bg-white rounded-12 shadow-dark-80">
<div class="border-bottom border-gray-200 px-4 px-md-5 py-4">
<h5 class="mb-0">Friends</h5>
</div>
<div class="px-4 px-md-5 py-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<span>
<span class="avatar avatar-circle avatar-border mr-3">
<img class="avatar-img" src="../assets/img/pages/avatar30.png" alt="Avatars">
<span class="avatar-status avatar-success"> </span>
</span>
</span>
<div>
<h6 class="font-weight-normal">Wen Yahui</h6>
<small class="d-block text-gray-600">UI Designer</small>
</div>
</div>
<div class="ml-auto dropdown">
<a href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-expanded="false">
<svg data-name="icons/tabler/dots" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Dots background" width="16" height="16" fill="none"></rect>
<path d="M0,12.4A1.6,1.6,0,1,1,1.6,14,1.6,1.6,0,0,1,0,12.4Zm1.372,0a.229.229,0,1,0,.229-.229A.229.229,0,0,0,1.372,12.4ZM0,7A1.6,1.6,0,1,1,1.6,8.6,1.6,1.6,0,0,1,0,7ZM1.372,7A.229.229,0,1,0,1.6,6.772.229.229,0,0,0,1.372,7ZM0,1.6A1.6,1.6,0,1,1,1.6,3.2,1.6,1.6,0,0,1,0,1.6Zm1.372,0A.229.229,0,1,0,1.6,1.372.229.229,0,0,0,1.372,1.6Z" transform="translate(6 1)" fill="#ADB5BD"></path>
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<span>
<span class="avatar avatar-circle avatar-border mr-3">
<img class="avatar-img" src="../assets/img/pages/avatar31.png" alt="Avatars">
<span class="avatar-status avatar-success"> </span>
</span>
</span>
<div>
<h6 class="font-weight-normal">Siri Jakobsson</h6>
<small class="d-block text-gray-600">Community Manager</small>
</div>
</div>
<div class="ml-auto dropdown">
<a href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-expanded="false">
<svg data-name="icons/tabler/dots" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Dots background" width="16" height="16" fill="none"></rect>
<path d="M0,12.4A1.6,1.6,0,1,1,1.6,14,1.6,1.6,0,0,1,0,12.4Zm1.372,0a.229.229,0,1,0,.229-.229A.229.229,0,0,0,1.372,12.4ZM0,7A1.6,1.6,0,1,1,1.6,8.6,1.6,1.6,0,0,1,0,7ZM1.372,7A.229.229,0,1,0,1.6,6.772.229.229,0,0,0,1.372,7ZM0,1.6A1.6,1.6,0,1,1,1.6,3.2,1.6,1.6,0,0,1,0,1.6Zm1.372,0A.229.229,0,1,0,1.6,1.372.229.229,0,0,0,1.372,1.6Z" transform="translate(6 1)" fill="#ADB5BD"></path>
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<span>
<span class="avatar avatar-circle avatar-border mr-3">
<img class="avatar-img" src="../assets/img/pages/avatar32.png" alt="Avatars">
<span class="avatar-status avatar-success"> </span>
</span>
</span>
<div>
<h6 class="font-weight-normal">Martina Brito</h6>
<small class="d-block text-gray-600">Art Director</small>
</div>
</div>
<div class="ml-auto dropdown">
<a href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-expanded="false">
<svg data-name="icons/tabler/dots" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Dots background" width="16" height="16" fill="none"></rect>
<path d="M0,12.4A1.6,1.6,0,1,1,1.6,14,1.6,1.6,0,0,1,0,12.4Zm1.372,0a.229.229,0,1,0,.229-.229A.229.229,0,0,0,1.372,12.4ZM0,7A1.6,1.6,0,1,1,1.6,8.6,1.6,1.6,0,0,1,0,7ZM1.372,7A.229.229,0,1,0,1.6,6.772.229.229,0,0,0,1.372,7ZM0,1.6A1.6,1.6,0,1,1,1.6,3.2,1.6,1.6,0,0,1,0,1.6Zm1.372,0A.229.229,0,1,0,1.6,1.372.229.229,0,0,0,1.372,1.6Z" transform="translate(6 1)" fill="#ADB5BD"></path>
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink2">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<span>
<span class="avatar avatar-circle avatar-border mr-3">
<img class="avatar-img" src="../assets/img/pages/avatar33.png" alt="Avatars">
<span class="avatar-status avatar-danger"> </span>
</span>
</span>
<div>
<h6 class="font-weight-normal">Pan Hyuk</h6>
<small class="d-block text-gray-600">Project Manager</small>
</div>
</div>
<div class="ml-auto dropdown">
<a href="#" role="button" id="dropdownMenuLink3" data-toggle="dropdown" aria-expanded="false">
<svg data-name="icons/tabler/dots" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Dots background" width="16" height="16" fill="none"></rect>
<path d="M0,12.4A1.6,1.6,0,1,1,1.6,14,1.6,1.6,0,0,1,0,12.4Zm1.372,0a.229.229,0,1,0,.229-.229A.229.229,0,0,0,1.372,12.4ZM0,7A1.6,1.6,0,1,1,1.6,8.6,1.6,1.6,0,0,1,0,7ZM1.372,7A.229.229,0,1,0,1.6,6.772.229.229,0,0,0,1.372,7ZM0,1.6A1.6,1.6,0,1,1,1.6,3.2,1.6,1.6,0,0,1,0,1.6Zm1.372,0A.229.229,0,1,0,1.6,1.372.229.229,0,0,0,1.372,1.6Z" transform="translate(6 1)" fill="#ADB5BD"></path>
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink3">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<span>
<span class="avatar avatar-circle avatar-border mr-3">
<img class="avatar-img" src="../assets/img/pages/avatar34.png" alt="Avatars">
<span class="avatar-status avatar-danger"> </span>
</span>
</span>
<div>
<h6 class="font-weight-normal">Jennifer Reid</h6>
<small class="d-block text-gray-600">Product Support</small>
</div>
</div>
<div class="ml-auto dropdown">
<a href="#" role="button" id="dropdownMenuLink4" data-toggle="dropdown" aria-expanded="false">
<svg data-name="icons/tabler/dots" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Dots background" width="16" height="16" fill="none"></rect>
<path d="M0,12.4A1.6,1.6,0,1,1,1.6,14,1.6,1.6,0,0,1,0,12.4Zm1.372,0a.229.229,0,1,0,.229-.229A.229.229,0,0,0,1.372,12.4ZM0,7A1.6,1.6,0,1,1,1.6,8.6,1.6,1.6,0,0,1,0,7ZM1.372,7A.229.229,0,1,0,1.6,6.772.229.229,0,0,0,1.372,7ZM0,1.6A1.6,1.6,0,1,1,1.6,3.2,1.6,1.6,0,0,1,0,1.6Zm1.372,0A.229.229,0,1,0,1.6,1.372.229.229,0,0,0,1.372,1.6Z" transform="translate(6 1)" fill="#ADB5BD"></path>
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink4">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<span>
<span class="avatar avatar-circle avatar-border mr-3">
<img class="avatar-img" src="../assets/img/pages/avatar35.png" alt="Avatars">
<span class="avatar-status avatar-warning"> </span>
</span>
</span>
<div>
<h6 class="font-weight-normal">Jel Chibuzo</h6>
<small class="d-block text-gray-600">UI Designer</small>
</div>
</div>
<div class="ml-auto dropdown">
<a href="#" role="button" id="dropdownMenuLink5" data-toggle="dropdown" aria-expanded="false">
<svg data-name="icons/tabler/dots" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Dots background" width="16" height="16" fill="none"></rect>
<path d="M0,12.4A1.6,1.6,0,1,1,1.6,14,1.6,1.6,0,0,1,0,12.4Zm1.372,0a.229.229,0,1,0,.229-.229A.229.229,0,0,0,1.372,12.4ZM0,7A1.6,1.6,0,1,1,1.6,8.6,1.6,1.6,0,0,1,0,7ZM1.372,7A.229.229,0,1,0,1.6,6.772.229.229,0,0,0,1.372,7ZM0,1.6A1.6,1.6,0,1,1,1.6,3.2,1.6,1.6,0,0,1,0,1.6Zm1.372,0A.229.229,0,1,0,1.6,1.372.229.229,0,0,0,1.372,1.6Z" transform="translate(6 1)" fill="#ADB5BD"></path>
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink5">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<span>
<span class="avatar avatar-circle avatar-border mr-3">
<img class="avatar-img" src="../assets/img/pages/avatar36.png" alt="Avatars">
<span class="avatar-status avatar-offline"> </span>
</span>
</span>
<div>
<h6 class="font-weight-normal">Jaspreet Bhamrai</h6>
<small class="d-block text-gray-600">Lead Web Developer</small>
</div>
</div>
<div class="ml-auto dropdown">
<a href="#" role="button" id="dropdownMenuLink6" data-toggle="dropdown" aria-expanded="false">
<svg data-name="icons/tabler/dots" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Dots background" width="16" height="16" fill="none"></rect>
<path d="M0,12.4A1.6,1.6,0,1,1,1.6,14,1.6,1.6,0,0,1,0,12.4Zm1.372,0a.229.229,0,1,0,.229-.229A.229.229,0,0,0,1.372,12.4ZM0,7A1.6,1.6,0,1,1,1.6,8.6,1.6,1.6,0,0,1,0,7ZM1.372,7A.229.229,0,1,0,1.6,6.772.229.229,0,0,0,1.372,7ZM0,1.6A1.6,1.6,0,1,1,1.6,3.2,1.6,1.6,0,0,1,0,1.6Zm1.372,0A.229.229,0,1,0,1.6,1.372.229.229,0,0,0,1.372,1.6Z" transform="translate(6 1)" fill="#ADB5BD"></path>
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink6">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<span>
<span class="avatar avatar-circle avatar-border mr-3">
<img class="avatar-img" src="../assets/img/pages/avatar37.png" alt="Avatars">
<span class="avatar-status avatar-offline"> </span>
</span>
</span>
<div>
<h6 class="font-weight-normal">Denice Ekdahl</h6>
<small class="d-block text-gray-600">UX Researcher</small>
</div>
</div>
<div class="ml-auto dropdown">
<a href="#" role="button" id="dropdownMenuLink7" data-toggle="dropdown" aria-expanded="false">
<svg data-name="icons/tabler/dots" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Dots background" width="16" height="16" fill="none"></rect>
<path d="M0,12.4A1.6,1.6,0,1,1,1.6,14,1.6,1.6,0,0,1,0,12.4Zm1.372,0a.229.229,0,1,0,.229-.229A.229.229,0,0,0,1.372,12.4ZM0,7A1.6,1.6,0,1,1,1.6,8.6,1.6,1.6,0,0,1,0,7ZM1.372,7A.229.229,0,1,0,1.6,6.772.229.229,0,0,0,1.372,7ZM0,1.6A1.6,1.6,0,1,1,1.6,3.2,1.6,1.6,0,0,1,0,1.6Zm1.372,0A.229.229,0,1,0,1.6,1.372.229.229,0,0,0,1.372,1.6Z" transform="translate(6 1)" fill="#ADB5BD"></path>
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink7">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="pt-2 mb-3">
<a href="#" class="btn btn-lg btn-block btn-primary">Load More</a>
</div>
</div>
</div>
</div>
</div>
Component 8
Password
<div class="bg-gray-100 py-5">
<div class="container">
<div class="bg-white rounded-12 shadow-dark-80">
<div class="border-bottom border-gray-200 px-4 px-md-5 py-4">
<h5 class="mb-0">Password</h5>
</div>
<div class="px-4 px-md-5 py-4">
<form>
<div class="row">
<div class="col-md-12">
<div class="mb-4">
<label class="form-label form-label-lg">Old password</label>
<input type="text" class="form-control form-control-xl" placeholder="Old password" value="Noell Blue">
</div>
</div>
<div class="col-md-6">
<div class="mb-4">
<label class="form-label form-label-lg">New password</label>
<input type="text" class="form-control form-control-xl" placeholder="New password" value="••••••••••••••••">
</div>
</div>
<div class="col-md-6">
<div class="mb-4">
<label class="form-label form-label-lg">Confirm password</label>
<input type="text" class="form-control form-control-xl" placeholder="Confirm password" value="••••••••••••••••">
</div>
</div>
<div class="col-md-12 py-2">
<a href="#" class="btn btn-lg btn-primary">Change Password</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Component 9
Devices
Chrome, Mac OS 
iPhone 12
Samsung Smart TV
iPad Pro
<div class="bg-gray-100 py-5">
<div class="container">
<div class="bg-white rounded-12 shadow-dark-80">
<div class="border-bottom border-gray-200 px-4 px-md-5 py-4 d-flex align-items-center">
<h5 class="mb-0">Devices</h5>
<div class=" ml-auto"><a href="#" class="btn btn-link link-dark text-nowrap tiny">Log out all devices <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#1e1e1e"></path>
</svg></a></div>
</div>
<div class="px-4 px-md-5 py-4">
<div class="d-md-flex align-items-center">
<div>
<h6 class="font-weight-normal"><img src="../assets/svg/icons/browser-outline.svg" alt="Icon" class="mr-1"> Chrome, Mac OS <span class="badge badge-sm badge-primary font-weight-semibold ml-2">Active</span></h6>
<div>
<small class="text-gray-600">New York, USA .</small>
<small class="text-gray-600">11:45PM</small>
</div>
</div>
<div class="ml-auto mt-3 mb-md-3">
<a href="#" class="btn btn-sm btn-outline-dark">Log Out</a>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-md-flex align-items-center">
<div>
<h6 class="font-weight-normal"><img src="../assets/svg/icons/phone.svg" alt="Icon" class="mr-1"> iPhone 12</h6>
<div>
<small class="text-gray-600">New York, USA .</small>
<small class="text-gray-600">12/05/21</small>
</div>
</div>
<div class="ml-auto mt-3 mb-md-3">
<a href="#" class="btn btn-sm btn-outline-dark">Log Out</a>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-md-flex align-items-center">
<div>
<h6 class="font-weight-normal"><img src="../assets/svg/icons/tv.svg" alt="Icon" class="mr-1"> Samsung Smart TV</h6>
<div>
<small class="text-gray-600">New York, USA .</small>
<small class="text-gray-600">17/02/21</small>
</div>
</div>
<div class="ml-auto mt-3 mb-md-3">
<a href="#" class="btn btn-sm btn-outline-dark">Log Out</a>
</div>
</div>
<hr class="bg-gray-200 my-4">
<div class="d-md-flex align-items-center">
<div>
<h6 class="font-weight-normal"><img src="../assets/svg/icons/tablet.svg" alt="Icon" class="mr-1"> iPad Pro</h6>
<div>
<small class="text-gray-600">New York, USA .</small>
<small class="text-gray-600">05/01/21</small>
</div>
</div>
<div class="ml-auto mt-3 mb-md-3">
<a href="#" class="btn btn-sm btn-outline-dark">Log Out</a>
</div>
</div>
</div>
</div>
</div>
</div>