List
List Default
=
<div class="mx-auto max-w-lg">
<ul class="ml-4 list-disc">
<li>Share team inboxes</li>
<li>Deliver instant answers</li>
<li>Manage your team with reports</li>
<li>Connect with customers</li>
<li>Connect the tools you already use</li>
</ul>
</div>
List With icon
=
<div class="mx-auto max-w-lg">
<ul class="space-y-3">
<li class="flex gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-primary-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
Share team inboxes
</li>
<li class="flex gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-primary-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
Deliver instant answers
</li>
<li class="flex gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-primary-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
Manage your team with reports
</li>
<li class="flex gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-primary-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
Connect with customers
</li>
<li class="flex gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-primary-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
Connect the tools you already use
</li>
</ul>
</div>
List With description
=
<div class="mx-auto max-w-lg">
<ul class="space-y-4">
<li class="flex gap-4">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-primary-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
</svg>
</div>
<div class="flex-1">
<h4 class="text-xl font-medium leading-loose">Share team inboxes</h4>
<p class="text-gray-500">Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.</p>
</div>
</li>
<li class="flex gap-4">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-primary-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
</svg>
</div>
<div class="flex-1">
<h4 class="text-xl font-medium leading-loose">Deliver instant answers</h4>
<p class="text-gray-500">An all-in-one customer service platform that helps you balance everything your customers need to be happy.</p>
</div>
</li>
<li class="flex gap-4">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-primary-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z" />
</svg>
</div>
<div class="flex-1">
<h4 class="text-xl font-medium leading-loose">Manage your team with reports</h4>
<p class="text-gray-500">Measure what matters with Untitled’s easy-to-use reports. You can filter, export, and drilldown on the data in a couple clicks.</p>
</div>
</li>
</ul>
</div>
List With border
=
<div class="mx-auto max-w-lg">
<ul class="divide-y divide-gray-200 rounded-xl border border-gray-200 shadow-sm">
<li class="p-4">
<h4 class="text-lg font-medium leading-loose">Share team inboxes</h4>
<p class="text-gray-500">Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.</p>
</li>
<li class="p-4">
<h4 class="text-lg font-medium leading-loose">Deliver instant answers</h4>
<p class="text-gray-500">An all-in-one customer service platform that helps you balance everything your customers need to be happy.</p>
</li>
<li class="p-4">
<h4 class="text-lg font-medium leading-loose">Manage your team with reports</h4>
<p class="text-gray-500">Measure what matters with Untitled’s easy-to-use reports. You can filter, export, and drilldown on the data in a couple clicks.</p>
</li>
</ul>
</div>
总共 4 条记录