Lists
Lists are a continuous group of items in a structured format. They can contain primary and supplemental actions, which are often represented by icons, text and images.
Velocity Boost
$234
Gravity Glide
$189
S4 Turbo Charge
$98
Flex Fit
$89
Endurance Pro
$78
Get instant updates about new messages and alerts.
Allow us to find you and suggest relevant content.
Turn on/off sounds for button clicks and alerts.
Switch to a darker color scheme for a better viewing experience.
Help us improve by sharing usage data with us.
- 4 new emails
Ellen Ripley
A tough, resourceful space officer.
- 2 new emails
Thomas Anderson
The chosen one, a hacker against the rules.
Luke Skywalker
A Jedi warrior who fights against the dark side.
- 1 new emails
Sarah Connor
A fierce leader who fights against machines.
Captain James T. Kirk
A charismatic and adventurous captain.
Variations
Simple text lists
Copy as:
Faster Development
Mobile-First Approach
Customizable
Low Learning Curve
Scalability
Faster Development
Rapidly build UI with pre-designed components.
Mobile-First Approach
Optimize design for mobile and small screens.
Customizable
Easily modify design and color scheme to fit brand.
Low Learning Curve
Simple and intuitive syntax for CSS thats easy to learn and progress.
Scalability
Easily maintainable and reusable code for large projects.
Faster Development
Rapidly build UI with pre-designed components and blocks.
Mobile-First Approach
Optimize design for mobile first and then for larger screens.
Customizable
Easily modify design and color scheme to fit brand and project.
Low Learning Curve
Simple and intuitive syntax for CSS thats easy to learn and progress.
Scalability
Easily maintainable and reusable code for large projects.
<!-- Component: One Line List -->
<ul class="divide-y divide-slate-100">
<li class="flex items-start gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">Faster Development</h4>
</div>
</li>
<li class="flex items-start gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">Mobile-First Approach</h4>
</div>
</li>
<li class="flex items-start gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">Customizable</h4>
</div>
</li>
<li class="flex items-start gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">Low Learning Curve</h4>
</div>
</li>
<li class="flex items-start gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">Scalability</h4>
</div>
</li>
</ul>
<!-- End One Line List -->Lists with leading avatar
Copy as:
Ellen Ripley
A tough, resourceful space officer and alien-fighting survivor.
Thomas Anderson
The chosen one, a hacker who can bend the rules of reality.
Luke Skywalker
A Jedi warrior who fights against the dark side of the Force.
Sarah Connor
A fierce resistance leader who fights against machines and cyborgs from the future.
Captain James T. Kirk
A charismatic and adventurous Starfleet captain who explores the final frontier.
Ellen Ripley
A tough space officer and alien-fighting survivor.
Thomas Anderson
The chosen one, a hacker who can bend the rules of reality.
Luke Skywalker
A Jedi warrior who fights against the dark side.
Sarah Connor
Fights against machines and cyborgs from the future.
Captain James T. Kirk
Starfleet captain who explores the final frontier.
<!-- Component: Leading Avatar One Line List -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=1" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 p-1 text-sm text-white"><span class="sr-only"> offline </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">Ellen Ripley</h4>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=3" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">Thomas Anderson</h4>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=7" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">Luke Skywalker</h4>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=5" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">Sarah Connor</h4>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=11" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 p-1 text-sm text-white"><span class="sr-only"> offline </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">Captain James T. Kirk</h4>
</div>
</li>
</ul>
<!-- End Leading Avatar One Line List -->Lists with leading icon
Copy as:
Dashboard
User profile
Analytics
Cloud settings
Settings
Dashboard
Key metrics and data visualizations.
User profile
Main user settings, and preferences.
Analytics
Insights and performance metrics.
Cloud storage
Cloud-based storage and settings.
Settings
App settings and configurations.
Dashboard
The main hub of the app, displaying data visualizations.
User profile
personal information, settings, and preferences for the logged-in user.
Analytics
Detailed insights and metrics for the app's usage and traffic.
Cloud storage
Cloud-based storage, security settings, and access permissions.
Settings
Settings and configurations for notifications and privacy.
<!-- Component: Leading Icon One Line List -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="Dashboard icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">Dashboard</h4>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="User icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">User profile</h4>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="Analytics icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">Analytics</h4>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="Cloud icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">Cloud settings</h4>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="Dashboard icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<h4 class="text-base text-slate-700 ">Settings</h4>
</div>
</li>
</ul>
<!-- End Leading Icon One Line List -->Lists with leading image
Copy as:
Velocity Boost 2023
Gravity Glide v2
S4 Turbo Charge
Flex Fit
Endurance Pro
Velocity Boost 2023
Designed for speed and agility, perfect for runners.
Gravity Glide v2
A shoe that provides superior cushioning and support, ideal for basketball players.
S4 Turbo Charge
A lightweight shoe that boosts performance for all kinds of athletes.
Flex Fit
Offers flexible and adaptive support for a range of activities, from yoga to cross-training.
Endurance Pro
A durable shoe that's built to last, suitable for long-distance running and endurance sports.
Velocity Boost 2023
Designed for speed and agility, perfect for runners.
Gravity Glide v2
A shoe for superior cushioning and support.
S4 Turbo Charge
A lightweight shoe for all kinds of athletes.
Flex Fit
Flexible & adaptive support for a range of activities.
Endurance Pro
A durable shoe that's built to last and long-distance.
<!-- Component: Leading Image One Line List -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-01.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<h4 class="w-full text-base truncate text-slate-700">Velocity Boost 2023 </h4>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-02.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<h4 class="w-full text-base truncate text-slate-700">Gravity Glide v2 </h4>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-03.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<h4 class="w-full text-base truncate text-slate-700">S4 Turbo Charge </h4>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-04.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<h4 class="w-full text-base truncate text-slate-700">Flex Fit </h4>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-05.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<h4 class="w-full text-base truncate text-slate-700">Endurance Pro </h4>
</div>
</li>
</ul>
<!-- End Leading Image One Line List -->Lists with leading checkbox
Copy as:
Creating visual mockups of the website's layout and organization.
Writing code to add functionality to a website, such as forms, interactive elements, and database integration.
Analyzing and improving a website's search engine rankings through various techniques, including keyword research and on-page optimization.
Measuring a website's speed, responsiveness, and functionality to ensure optimal user experience and identify areas for improvement.
Implementing measures to protect a website from cyber threats, such as malware, hacking attempts, and data breaches.
Creating visual mockups of the website's layout and organization.
Writing code to add functionality to a website, such as forms.
Analyzing and improving a website's search engine rankings.
Measuring a website's speed, responsiveness, and functionality.
Implementing measures to protect a website from cyber threats.
<!-- Component: Leading Checkbox One Line List -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a01" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<label class="text-base cursor-pointer text-slate-700" for="id-a01">Design Layout </label>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-b01" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<label class="text-base cursor-pointer text-slate-700" for="id-b01">Deveop features </label>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-c01" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<label class="text-base cursor-pointer text-slate-700" for="id-c01">Optimize SEO </label>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-d01" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<label class="text-base cursor-pointer text-slate-700" for="id-d01">Test Performance </label>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-e01" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
<label class="text-base cursor-pointer text-slate-700" for="id-e01">Maintain Security </label>
</div>
</li>
</ul>
<!-- End Leading Checkbox One Line List -->Trailing text list
Copy as:
Responsive Web Design
100+Front-End Frameworks
48Web Accessibility
31Backend Development
17Web Security
4
Responsive Web Design
Learn how to create websites that look great on any device.
100+Front-End Frameworks
Explore the world of popular front-end frameworks like React, Vue, and Angular.
48Web Accessibility
Make your websites more inclusive and accessible to all users.
31Backend Development
Discover the tools and technologies used to build the server-side.
17Web Security
Learn how to protect your websites from hackers and other security.
4
Responsive Web Design
Learn how to create websites that look great on any device.
100+Front-End Frameworks
Popular front-end frameworks like React, Vue, and Angular.
48Web Accessibility
Make your websites more inclusive and accessible to all users.
31Backend Development
Discover the tools and technologies used to build the server-side.
17Web Security
Learn how to protect your websites from hackers and other security.
4
<!-- Component: Trailing Text One Line List -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1">
<h4 class="text-base text-slate-700 ">Responsive Web Design</h4>
</div>
<div class="text-xs text-slate-400">100+</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1">
<h4 class="text-base text-slate-700 ">Front-End Frameworks</h4>
</div>
<div class="text-xs text-slate-400">48</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1">
<h4 class="text-base text-slate-700 ">Web Accessibility</h4>
</div>
<div class="text-xs text-slate-400">31</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1">
<h4 class="text-base text-slate-700 ">Backend Development</h4>
</div>
<div class="text-xs text-slate-400">17</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1">
<h4 class="text-base text-slate-700 ">Web Security</h4>
</div>
<div class="text-xs text-slate-400">4</div>
</li>
</ul>
<!-- End Trailing Text One Line List -->Lists with trailing text and leading avatar
Copy as:
Ellen Ripley
A tough, resourceful space officer and alien-fighting survivor.
97%Thomas Anderson
The chosen one, a hacker who can bend the rules of reality.
91%Luke Skywalker
A Jedi warrior who fights against the dark side of the Force.
82%Sarah Connor
A fierce resistance leader who fights against machines and cyborgs from the future.
69%Captain James T. Kirk
A charismatic and adventurous Starfleet captain who explores the final frontier.
58%
Ellen Ripley
A tough, resourceful space officer and survivor.
97%Thomas Anderson
The chosen one, a hacker who can bend the rules.
91%Luke Skywalker
A Jedi warrior who fights against the dark side.
82%Sarah Connor
A fierce resistance leader who fights against machines.
69%Captain James T. Kirk
A charismatic and adventurous captain.
58%
<!-- Component: One Line List With Trailing Text And Leading Avatar -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=1" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 p-1 text-sm text-white"><span class="sr-only"> offline </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Ellen Ripley</h4>
</div>
<div class="text-xs text-slate-400">97%</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=3" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Thomas Anderson</h4>
</div>
<div class="text-xs text-slate-400">91%</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=7" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Luke Skywalker</h4>
</div>
<div class="text-xs text-slate-400">82%</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=5" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Sarah Connor</h4>
</div>
<div class="text-xs text-slate-400">69%</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=11" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 p-1 text-sm text-white"><span class="sr-only"> offline </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Captain James T. Kirk</h4>
</div>
<div class="text-xs text-slate-400">58%</div>
</li>
</ul>
<!-- End One Line List With Trailing Text And Leading Avatar -->Lists with trailing text and leading image
Copy as:
Velocity Boost
$234Gravity Glide
$189S4 Turbo Charge
$98Flex Fit
$89Endurance Pro
$78
Velocity Boost
Available in 2-3 days.
$234Gravity Glide
Available now.
$189S4 Turbo Charge
Available in 2-3 days.
$98Flex Fit
Available in 7-10 days.
$89Endurance Pro
Available now.
$78
Velocity Boost
Color: Green
Size: 10.5$234Gravity Glide
Color: Cream
Size: 9.5$189S4 Turbo Charge
Color: Red
Size: 9.5$98Flex Fit
Color: Brown
Size: 11$89Endurance Pro
Color: Black
Size: 9$78
<!-- Component: One Line List With Trailing Text And Leading Image -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center shrink-0">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-01.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<h4 class="w-full text-base truncate text-slate-700">Velocity Boost</h4>
</div>
<div class="text-xs text-slate-400">$234</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-02.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<h4 class="w-full text-base truncate text-slate-700">Gravity Glide</h4>
</div>
<div class="text-xs text-slate-400">$189</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-03.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<h4 class="w-full text-base truncate text-slate-700">S4 Turbo Charge</h4>
</div>
<div class="text-xs text-slate-400">$98</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-04.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<h4 class="w-full text-base truncate text-slate-700">Flex Fit</h4>
</div>
<div class="text-xs text-slate-400">$89</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-05.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<h4 class="w-full text-base truncate text-slate-700">Endurance Pro</h4>
</div>
<div class="text-xs text-slate-400">$78</div>
</li>
</ul>
<!-- End One Line List With Trailing Text And Leading Image -->Lists with trailing icon and leading avatar
Copy as:
- user options
Ellen Ripley
- user options
Thomas Anderson
- user options
Luke Skywalker
- user options
Sarah Connor
- user options
Captain James T. Kirk
- user options
Ellen Ripley
A tough, resourceful space officer and alien-fighting survivor.
- user options
Thomas Anderson
The chosen one, a hacker who can bend the rules of reality.
- user options
Luke Skywalker
A Jedi warrior who fights against the dark side of the Force.
- user options
Sarah Connor
A fierce resistance leader who fights against machines and cyborgs from the future.
- user options
Captain James T. Kirk
A charismatic and adventurous Starfleet captain who explores the final frontier.
- user options
Ellen Ripley
A tough, resourceful space officer and survivor.
- user options
Thomas Anderson
The chosen one, a hacker who can bend the rules.
- user options
Luke Skywalker
A Jedi warrior who fights against the dark side.
- user options
Sarah Connor
A fierce resistance leader who fights machines.
- user options
Captain James T. Kirk
A charismatic and adventurous captain.
<!-- Component: One Line List With Trailing Icon And Leading Avatar -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=1" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 p-1 text-sm text-white"><span class="sr-only"> offline </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Ellen Ripley</h4>
</div>
<a href="#" class="flex items-center justify-center w-6 h-6 text-xs transition-colors text-slate-500 hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
</svg>
<span class="sr-only">user options</span>
</a>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=3" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Thomas Anderson</h4>
</div>
<a href="#" class="flex items-center justify-center w-6 h-6 text-xs transition-colors text-slate-500 hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
</svg>
<span class="sr-only">user options</span>
</a>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=7" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Luke Skywalker</h4>
</div>
<a href="#" class="flex items-center justify-center w-6 h-6 text-xs transition-colors text-slate-500 hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
</svg>
<span class="sr-only">user options</span>
</a>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=5" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Sarah Connor</h4>
</div>
<a href="#" class="flex items-center justify-center w-6 h-6 text-xs transition-colors text-slate-500 hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
</svg>
<span class="sr-only">user options</span>
</a>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=11" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 p-1 text-sm text-white"><span class="sr-only"> offline </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Captain James T. Kirk</h4>
</div>
<a href="#" class="flex items-center justify-center w-6 h-6 text-xs transition-colors text-slate-500 hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
</svg>
<span class="sr-only">user options</span>
</a>
</li>
</ul>
<!-- End One Line List With Trailing Icon And Leading Avatar -->Lists with trailing icon and leading icon
Copy as:
- user options
Dashboard
- user options
User profile
- user options
Analytics
- user options
Cloud settings
- user options
Settings
- user options
Dashboard
Key metrics and data visualizations.
- user options
User profile
Main user settings, and preferences.
- user options
Analytics
Insights and performance metrics.
- user options
Cloud storage
Cloud-based storage and settings.
- user options
Settings
App settings and configurations.
- user options
Dashboard
The main hub of the app, displaying data visualizations.
- user options
User profile
personal information, settings, and preferences for the logged-in user.
- user options
Analytics
Detailed insights and metrics for the app's usage and traffic.
- user options
Cloud storage
Cloud-based storage, security settings, and access permissions.
- user options
Settings
Settings and configurations for notifications and privacy.
<!-- Component: One Line List With Trailing Icon And Leading Icon -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="Dashboard icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Dashboard</h4>
</div>
<a href="#" class="flex items-center justify-center w-6 h-6 text-xs transition-colors text-slate-500 hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
</svg>
<span class="sr-only">user options</span>
</a>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="User icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">User profile</h4>
</div>
<a href="#" class="flex items-center justify-center w-6 h-6 text-xs transition-colors text-slate-500 hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
</svg>
<span class="sr-only">user options</span>
</a>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="Analytics icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Analytics</h4>
</div>
<a href="#" class="flex items-center justify-center w-6 h-6 text-xs transition-colors text-slate-500 hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
</svg>
<span class="sr-only">user options</span>
</a>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="Cloud icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Cloud settings</h4>
</div>
<a href="#" class="flex items-center justify-center w-6 h-6 text-xs transition-colors text-slate-500 hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
</svg>
<span class="sr-only">user options</span>
</a>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="Dashboard icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Settings</h4>
</div>
<a href="#" class="flex items-center justify-center w-6 h-6 text-xs transition-colors text-slate-500 hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
</svg>
<span class="sr-only">user options</span>
</a>
</li>
</ul>
<!-- End One Line List With Trailing Icon And Leading Icon -->Lists with trailing checkbox
Copy as:
Creating visual mockups of the website's layout and organization.
Writing code to add functionality to a website, such as forms, interactive elements, and database integration.
Analyzing and improving a website's search engine rankings through various techniques, including keyword research and on-page optimization.
Measuring a website's speed, responsiveness, and functionality to ensure optimal user experience and identify areas for improvement.
Implementing measures to protect a website from cyber threats, such as malware, hacking attempts, and data breaches.
Creating visual mockups of the website's layout and organization.
Writing code to add functionality to a website, such as forms.
Analyzing and improving a website's search engine rankings.
Measuring a website's speed, responsiveness, and functionality.
Implementing measures to protect a website from cyber threats.
<!-- Component: Trailing Checkbox One Line List -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center overflow-hidden flex-1">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-a01a">Design Layout </label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input checked class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a01a" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center overflow-hidden flex-1">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-b01a">Deveop features </label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-b01a" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center overflow-hidden flex-1">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-c01a">Optimize SEO </label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-c01a" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center overflow-hidden flex-1">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-d01a">Test Performance </label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input checked class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-d01a" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center overflow-hidden flex-1">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-e01a">Maintain Security </label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-e01a" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
</ul>
<!-- End Trailing Checkbox One Line List -->Lists with trailing checkbox and leading avatar
Copy as:
A tough, resourceful space officer and alien-fighting survivor.
The chosen one, a hacker who can bend the rules of reality.
A Jedi warrior who fights against the dark side of the Force.
A fierce resistance leader who fights against machines and cyborgs from the future.
A charismatic and adventurous Starfleet captain who explores the final frontier.
<!-- Component: One Line List With Trailing Checkbox And Leading Avatar -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=1" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 p-1 text-sm text-white"><span class="sr-only"> offline </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label for="id-a01ab" class="w-full text-base truncate cursor-pointer text-slate-700">Ellen Ripley</label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a01ab" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=3" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label for="id-a02ab" class="w-full text-base truncate cursor-pointer text-slate-700">Thomas Anderson</label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input checked class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a02ab" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=7" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label for="id-c01c" class="w-full text-base truncate cursor-pointer text-slate-700">Luke Skywalker</label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a03ab" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=5" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label for="id-a04ab" class="w-full text-base truncate cursor-pointer text-slate-700">Sarah Connor</label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a04ab" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=11" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 p-1 text-sm text-white"><span class="sr-only"> offline </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label for="id-a05ab" class="w-full text-base truncate cursor-pointer text-slate-700">Captain James T. Kirk</label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input checked class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a05ab" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="graphics-symbol">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
</ul>
<!-- End One Line List With Trailing Checkbox And Leading Avatar -->Lists with trailing checkbox and leading icon
Copy as:
Get instant updates about new messages and alerts.
Allow us to find you and suggest relevant content.
Turn on/off sounds for button clicks and alerts.
Switch to a darker color scheme for a better viewing experience.
Help us improve by sharing usage data with us.
Get instant updates about new messages and alerts.
Allow us to find you and suggest relevant content.
Turn on/off sounds for button clicks and alerts.
Switch to a darker color scheme for a better viewing experience.
Help us improve by sharing usage data with us.
<!-- Component: One Line List With Trailing Checkbox And Leading Icon -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-a10a">Push Notifications</label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a10a" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-a10b">Location Services</label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a10b" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-a10c">In-App Sound </label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input checked class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a10c" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-a10d">Dark Mode</label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a10d" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-a10e">Analytics Tracking</label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a10e" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
</ul>
<!-- End One Line List With Trailing Checkbox And Leading Icon -->Lists with trailing checkbox with leading image
Copy as:
Available in 2-3 days.
Available now.
Available in 2-3 days.
Available in 7-10 days.
Available now.
Color: Green
Size: 10.5Color: Cream
Size: 9.5Color: Red
Size: 9.5Color: Brown
Size: 11Color: Black
Size: 9
<!-- Component: One Line List With Trailing Checkbox And Leading Image -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center shrink-0">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-01.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<label for="id-a13a" class="w-full text-base truncate cursor-pointer text-slate-700">Velocity Boost</label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a13a" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-02.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<label for="id-a13b" class="w-full text-base truncate cursor-pointer text-slate-700">Gravity Glide</label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a13b" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-03.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<label for="id-a13c" class="w-full text-base truncate cursor-pointer text-slate-700">S4 Turbo Charge</label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a13c" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-04.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<label for="id-a13d" class="w-full text-base truncate cursor-pointer text-slate-700">Flex Fit</label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a13d" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center">
<img src="https://tailwindmix.b-cdn.net/products/product-shoe-05.jpeg" alt="product image" class="w-8 rounded">
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 min-w-0">
<label for="id-a13e" class="w-full text-base truncate cursor-pointer text-slate-700">Endurance Pro</label>
</div>
<div class="flex items-center self-center">
<div class="relative flex flex-wrap items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="checkbox" value="" id="id-a13e" />
<svg class="absolute top-0 left-0 w-4 h-4 transition-all duration-300 -rotate-90 opacity-0 pointer-events-none fill-white stroke-white peer-checked:rotate-0 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8116 5.17568C12.9322 5.2882 13 5.44079 13 5.5999C13 5.759 12.9322 5.91159 12.8116 6.02412L7.66416 10.8243C7.5435 10.9368 7.37987 11 7.20925 11C7.03864 11 6.87501 10.9368 6.75435 10.8243L4.18062 8.42422C4.06341 8.31105 3.99856 8.15948 4.00002 8.00216C4.00149 7.84483 4.06916 7.69434 4.18846 7.58309C4.30775 7.47184 4.46913 7.40874 4.63784 7.40737C4.80655 7.406 4.96908 7.46648 5.09043 7.57578L7.20925 9.55167L11.9018 5.17568C12.0225 5.06319 12.1861 5 12.3567 5C12.5273 5 12.691 5.06319 12.8116 5.17568Z" />
</svg>
</div>
</div>
</li>
</ul>
<!-- End One Line List With Trailing Checkbox And Leading Image -->Lists with trailing badge and leading avatar
Copy as:
- 4 new emails
Ellen Ripley
A tough, resourceful space officer and alien-fighting survivor.
- 2 new emails
Thomas Anderson
The chosen one, a hacker who can bend the rules of reality.
Luke Skywalker
A Jedi warrior who fights against the dark side of the Force.
- 1 new emails
Sarah Connor
A fierce resistance leader who fights against machines and cyborgs from the future.
Captain James T. Kirk
A charismatic and adventurous Starfleet captain who explores the final frontier.
- 4 new emails
Ellen Ripley
A tough, resourceful space officer and survivor.
- 2 new emails
Thomas Anderson
The chosen one, a hacker who can bend the rules.
Luke Skywalker
A Jedi warrior who fights against the dark side.
- 1 new emails
Sarah Connor
A fierce resistance leader who fights against machines.
Captain James T. Kirk
A charismatic and adventurous captain.
<!-- Component: One Line List With Trailing Badge And Leading Avatar -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=1" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 p-1 text-sm text-white"><span class="sr-only"> offline </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Ellen Ripley</h4>
</div>
<span class="inline-flex items-center justify-center rounded-full bg-pink-500 px-1.5 text-xs text-white">
2
<span class="sr-only"> new emails</span>
</span>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=3" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Thomas Anderson</h4>
</div>
<span class="inline-flex items-center justify-center rounded-full bg-pink-500 px-1.5 text-xs text-white">
4
<span class="sr-only"> new emails</span>
</span>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=7" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Luke Skywalker</h4>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=5" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-emerald-500 p-1 text-sm text-white"><span class="sr-only"> online </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Sarah Connor</h4>
</div>
<span class="inline-flex items-center justify-center rounded-full bg-pink-500 px-1.5 text-xs text-white">
1
<span class="sr-only"> new emails</span>
</span>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="self-start">
<a href="#" class="relative inline-flex items-center justify-center w-8 h-8 text-white rounded-full">
<img src="https://i.pravatar.cc/40?img=11" alt="user name" title="user name" width="32" height="32" class="max-w-full rounded-full" />
<span class=" absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 p-1 text-sm text-white"><span class="sr-only"> offline </span></span>
</a>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Captain James T. Kirk</h4>
</div>
</li>
</ul>
<!-- End One Line List With Trailing Badge And Leading Avatar -->Lists with trailing badge and leading icon
Copy as:
- 2 new notifications
Dashboard
User profile
- 4 new notifications
Analytics
- 1 new notifications
Cloud settings
Settings
- 2 new notifications
Dashboard
Key metrics and data visualizations.
- 4 new notifications
User profile
Main user settings, and preferences.
Analytics
Insights and performance metrics.
- 1 new notifications
Cloud storage
Cloud-based storage and settings.
Settings
App settings and configurations.
- 2 new notifications
Dashboard
The main hub of the app, displaying data visualizations.
- 4 new notifications
User profile
personal information, settings, and preferences for the logged-in user.
Analytics
Detailed insights and metrics for the app's usage and traffic.
- 1 new notifications
Cloud storage
Cloud-based storage, security settings, and access permissions.
Settings
Settings and configurations for notifications and privacy.
<!-- Component: One Line List With Trailing Badge And Leading Icon -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="Dashboard icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Dashboard</h4>
</div>
<span class="inline-flex items-center justify-center rounded-full bg-pink-500 px-1.5 text-xs text-white">
2
<span class="sr-only"> new notifications</span>
</span>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="User icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">User profile</h4>
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="Analytics icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Analytics</h4>
</div>
<span class="inline-flex items-center justify-center rounded-full bg-pink-500 px-1.5 text-xs text-white">
4
<span class="sr-only"> new notifications</span>
</span>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="Cloud icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Cloud settings</h4>
</div>
<span class="inline-flex items-center justify-center rounded-full bg-pink-500 px-1.5 text-xs text-white">
1
<span class="sr-only"> new notifications</span>
</span>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-label="Dashboard icon" role="graphics-symbol">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<h4 class="w-full text-base truncate text-slate-700">Settings</h4>
</div>
</li>
</ul>
<!-- End One Line List With Trailing Badge And Leading Icon -->Lists with trailing switch
Copy as:
Get instant updates about new messages and alerts.
Allow us to find you and suggest relevant content.
Turn on/off sounds for button clicks and alerts.
Switch to a darker color scheme for a better viewing experience.
Help us improve by sharing usage data with us.
Get instant updates about new messages and alerts.
Allow us to find you and suggest relevant content.
Turn on/off sounds for button clicks and alerts.
Switch to a darker color scheme for a better viewing experience.
Help us improve by sharing usage data with us.
<!-- Component: One Line List With Trailing Switch -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-30a">Push Notifications</label>
</div>
<div class="relative flex flex-wrap items-center">
<input checked class="relative w-8 h-4 transition-colors rounded-lg appearance-none cursor-pointer hover:bg-slate-400 after:hover:bg-slate-600 checked:hover:bg-emerald-300 checked:after:hover:bg-emerald-600 focus:outline-none checked:focus:bg-emerald-400 checked:after:focus:bg-emerald-700 focus-visible:outline-none peer bg-slate-300 after:absolute after:top-0 after:left-0 after:h-4 after:w-4 after:rounded-full after:bg-slate-500 after:transition-all checked:bg-emerald-200 checked:after:left-4 checked:after:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:after:bg-slate-300" type="checkbox" value="" id="id-30a" />
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-30b">Location Services</label>
</div>
<div class="relative flex flex-wrap items-center">
<input class="relative w-8 h-4 transition-colors rounded-lg appearance-none cursor-pointer hover:bg-slate-400 after:hover:bg-slate-600 checked:hover:bg-emerald-300 checked:after:hover:bg-emerald-600 focus:outline-none checked:focus:bg-emerald-400 checked:after:focus:bg-emerald-700 focus-visible:outline-none peer bg-slate-300 after:absolute after:top-0 after:left-0 after:h-4 after:w-4 after:rounded-full after:bg-slate-500 after:transition-all checked:bg-emerald-200 checked:after:left-4 checked:after:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:after:bg-slate-300" type="checkbox" value="" id="id-30b" />
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-30c">In-App Sound </label>
</div>
<div class="relative flex flex-wrap items-center">
<input checked class="relative w-8 h-4 transition-colors rounded-lg appearance-none cursor-pointer hover:bg-slate-400 after:hover:bg-slate-600 checked:hover:bg-emerald-300 checked:after:hover:bg-emerald-600 focus:outline-none checked:focus:bg-emerald-400 checked:after:focus:bg-emerald-700 focus-visible:outline-none peer bg-slate-300 after:absolute after:top-0 after:left-0 after:h-4 after:w-4 after:rounded-full after:bg-slate-500 after:transition-all checked:bg-emerald-200 checked:after:left-4 checked:after:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:after:bg-slate-300" type="checkbox" value="" id="id-30c" />
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-30d">Dark Mode</label>
</div>
<div class="relative flex flex-wrap items-center">
<input checked class="relative w-8 h-4 transition-colors rounded-lg appearance-none cursor-pointer hover:bg-slate-400 after:hover:bg-slate-600 checked:hover:bg-emerald-300 checked:after:hover:bg-emerald-600 focus:outline-none checked:focus:bg-emerald-400 checked:after:focus:bg-emerald-700 focus-visible:outline-none peer bg-slate-300 after:absolute after:top-0 after:left-0 after:h-4 after:w-4 after:rounded-full after:bg-slate-500 after:transition-all checked:bg-emerald-200 checked:after:left-4 checked:after:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:after:bg-slate-300" type="checkbox" value="" id="id-30d" />
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-30e">Analytics Tracking</label>
</div>
<div class="relative flex flex-wrap items-center">
<input class="relative w-8 h-4 transition-colors rounded-lg appearance-none cursor-pointer hover:bg-slate-400 after:hover:bg-slate-600 checked:hover:bg-emerald-300 checked:after:hover:bg-emerald-600 focus:outline-none checked:focus:bg-emerald-400 checked:after:focus:bg-emerald-700 focus-visible:outline-none peer bg-slate-300 after:absolute after:top-0 after:left-0 after:h-4 after:w-4 after:rounded-full after:bg-slate-500 after:transition-all checked:bg-emerald-200 checked:after:left-4 checked:after:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:after:bg-slate-300" type="checkbox" value="" id="id-30e" />
</div>
</li>
</ul>
<!-- End One Line List With Trailing Switch -->Lists with trailing switch and leading icon
Copy as:
Get instant updates about new messages and alerts.
Allow us to find you and suggest relevant content.
Turn on/off sounds for button clicks and alerts.
Switch to a darker color scheme for a better viewing experience.
Help us improve by sharing usage data with us.
Get instant updates about new messages and alerts.
Allow us to find you and suggest relevant content.
Turn on/off sounds for button clicks and alerts.
Switch to a darker color scheme for a better viewing experience.
Help us improve by sharing usage data with us.
<!-- Component: One Line List With Trailing Switch And Leading Icon -->
<ul class="divide-y divide-slate-100">
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-20a">Push Notifications</label>
</div>
<div class="relative flex flex-wrap items-center">
<input checked class="relative w-8 h-4 transition-colors rounded-lg appearance-none cursor-pointer hover:bg-slate-400 after:hover:bg-slate-600 checked:hover:bg-emerald-300 checked:after:hover:bg-emerald-600 focus:outline-none checked:focus:bg-emerald-400 checked:after:focus:bg-emerald-700 focus-visible:outline-none peer bg-slate-300 after:absolute after:top-0 after:left-0 after:h-4 after:w-4 after:rounded-full after:bg-slate-500 after:transition-all checked:bg-emerald-200 checked:after:left-4 checked:after:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:after:bg-slate-300" type="checkbox" value="" id="id-20a" />
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-20b">Location Services</label>
</div>
<div class="relative flex flex-wrap items-center">
<input class="relative w-8 h-4 transition-colors rounded-lg appearance-none cursor-pointer hover:bg-slate-400 after:hover:bg-slate-600 checked:hover:bg-emerald-300 checked:after:hover:bg-emerald-600 focus:outline-none checked:focus:bg-emerald-400 checked:after:focus:bg-emerald-700 focus-visible:outline-none peer bg-slate-300 after:absolute after:top-0 after:left-0 after:h-4 after:w-4 after:rounded-full after:bg-slate-500 after:transition-all checked:bg-emerald-200 checked:after:left-4 checked:after:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:after:bg-slate-300" type="checkbox" value="" id="id-20b" />
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-20c">In-App Sound </label>
</div>
<div class="relative flex flex-wrap items-center">
<input checked class="relative w-8 h-4 transition-colors rounded-lg appearance-none cursor-pointer hover:bg-slate-400 after:hover:bg-slate-600 checked:hover:bg-emerald-300 checked:after:hover:bg-emerald-600 focus:outline-none checked:focus:bg-emerald-400 checked:after:focus:bg-emerald-700 focus-visible:outline-none peer bg-slate-300 after:absolute after:top-0 after:left-0 after:h-4 after:w-4 after:rounded-full after:bg-slate-500 after:transition-all checked:bg-emerald-200 checked:after:left-4 checked:after:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:after:bg-slate-300" type="checkbox" value="" id="id-20c" />
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-20d">Dark Mode</label>
</div>
<div class="relative flex flex-wrap items-center">
<input checked class="relative w-8 h-4 transition-colors rounded-lg appearance-none cursor-pointer hover:bg-slate-400 after:hover:bg-slate-600 checked:hover:bg-emerald-300 checked:after:hover:bg-emerald-600 focus:outline-none checked:focus:bg-emerald-400 checked:after:focus:bg-emerald-700 focus-visible:outline-none peer bg-slate-300 after:absolute after:top-0 after:left-0 after:h-4 after:w-4 after:rounded-full after:bg-slate-500 after:transition-all checked:bg-emerald-200 checked:after:left-4 checked:after:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:after:bg-slate-300" type="checkbox" value="" id="id-20d" />
</div>
</li>
<li class="flex items-center gap-4 px-4 py-3">
<div class="flex items-center self-center text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
</svg>
</div>
<div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center flex-1 overflow-hidden">
<label class="w-full text-base truncate cursor-pointer text-slate-700" for="id-20e">Analytics Tracking</label>
</div>
<div class="relative flex flex-wrap items-center">
<input class="relative w-8 h-4 transition-colors rounded-lg appearance-none cursor-pointer hover:bg-slate-400 after:hover:bg-slate-600 checked:hover:bg-emerald-300 checked:after:hover:bg-emerald-600 focus:outline-none checked:focus:bg-emerald-400 checked:after:focus:bg-emerald-700 focus-visible:outline-none peer bg-slate-300 after:absolute after:top-0 after:left-0 after:h-4 after:w-4 after:rounded-full after:bg-slate-500 after:transition-all checked:bg-emerald-200 checked:after:left-4 checked:after:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:after:bg-slate-300" type="checkbox" value="" id="id-20e" />
</div>
</li>
</ul>
<!-- End One Line List With Trailing Switch And Leading Icon -->Usage
Use lists to:
- Organise vertically a groups of text and images (like a list of users, products etc).
- Display a list consists of a single continuous column of rows, with each row representing a list item.
- Use lists for communicating or selecting discreet items, such as choosing from a set of products.
Specs
List items come in three sizes:
- One-line: single-line list items contain a maximum of one line of text.
- Two-line: two-line list items contain a maximum of two lines of text.
- Three-line:three-line list items contain a maximum of three lines of text.
Each list item can contain:
- Container: with 0.75rem (12pixels) top and bottom padding and 1rem (16px) left and right padding.
- Headline: 1rem (16px) font size.
- Supporting text:0.875rem (14px) font size.
- Trailing supporting text:0.75rem (12px) font size.
- Trailing or leading icon:a 1.5rem (24px) icon.
- Selection control: checkbox , radio button, toggle, etc.
- Trailing badge: a trainling badge.
- Leading image: a image element.