Elements (Tables, Lists, Blockquotes)
A collection of element-specific typography styles.
Basic List
<div class="container max-w-xl py-8 font-sans text-gray-900">
<h4 class="font-bold">Unstyled List</h4>
<ul class="mt-2 text-sm text-gray-700">
<li>Briana Cherry</li>
<li>Joseph Bradford</li>
<li>Mike Sims</li>
<li>Jamila Farrington</li>
<li>Aden Hines</li>
</ul>
<h4 class="mt-8 font-bold">Unordered List</h4>
<ul class="mt-2 list-disc list-inside text-sm text-gray-700">
<li>Briana Cherry</li>
<li>Joseph Bradford</li>
<li>Mike Sims</li>
<li>Jamila Farrington</li>
<li>Aden Hines</li>
</ul>
<h4 class="mt-8 font-bold">Ordered List</h4>
<ul class="mt-2 list-decimal list-inside text-sm text-gray-700">
<li>Place laptop onto kitchen table.</li>
<li>Open laptop to its normal usage position.</li>
<li>Walk over to your refrigerator.
<ul class="pl-6 list-disc list-inside">
<li>Open the refrigerator door.</li>
<li>Retrieve a carton of milk</li>
<li>Close the refrigerator door.</li>
</ul>
</li>
<li>Return to table with milk.</li>
</ul>
<h4 class="mt-8 font-bold">Inline List</h4>
<ul class="mt-2 -mx-2 flex flex-wrap items-center text-sm text-gray-700">
<li class="p-2">Briana Cherry</li>
<li class="p-2">Joseph Bradford</li>
<li class="p-2">Mike Sims</li>
<li class="p-2">Jamila Farrington</li>
<li class="p-2">Aden Hines</li>
</ul>
</div>
Basic Table
<div class="container py-8 font-sans text-gray-900">
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="bg-gray-100">
<th class="text-xs text-gray-700 font-bold px-4 py-2">Name</th>
<th class="text-xs text-gray-700 font-bold px-4 py-2">Email</th>
<th class="text-xs text-gray-700 font-bold px-4 py-2">Date Applied</th>
<th class="text-right text-xs text-gray-700 font-bold px-4 py-2">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 text-sm whitespace-nowrap">Briana Cherry</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">briana-cherry@example.com</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">05/18/2020</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">
<div class="space-x-2 flex items-center justify-end text-gray-500">
<a
href="#"
aria-label="Edit user"
title="Edit"
class="hover:text-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="edit" class="w-4 h-4"></i>
</a>
<a
href="#"
aria-label="Delete user"
title="Delete"
class="hover:text-red-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="trash" class="w-4 h-4"></i>
</a>
</div>
</td>
</tr>
<tr>
<td class="px-4 py-2 text-sm whitespace-nowrap">Joseph Bradford</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">joseph-bradford@example.com</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">05/21/2020</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">
<div class="space-x-2 flex items-center justify-end text-gray-500">
<a
href="#"
aria-label="Edit user"
title="Edit"
class="hover:text-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="edit" class="w-4 h-4"></i>
</a>
<a
href="#"
aria-label="Delete user"
title="Delete"
class="hover:text-red-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="trash" class="w-4 h-4"></i>
</a>
</div>
</td>
</tr>
<tr>
<td class="px-4 py-2 text-sm whitespace-nowrap">Mike Sims</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">mike-sims@example.com</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">05/24/2020</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">
<div class="space-x-2 flex items-center justify-end text-gray-500">
<a
href="#"
aria-label="Edit user"
title="Edit"
class="hover:text-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="edit" class="w-4 h-4"></i>
</a>
<a
href="#"
aria-label="Delete user"
title="Delete"
class="hover:text-red-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="trash" class="w-4 h-4"></i>
</a>
</div>
</td>
</tr>
<tr>
<td class="px-4 py-2 text-sm whitespace-nowrap">Jamila Farrington</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">jamila-farrington@example.com</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">05/26/2020</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">
<div class="space-x-2 flex items-center justify-end text-gray-500">
<a
href="#"
aria-label="Edit user"
title="Edit"
class="hover:text-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="edit" class="w-4 h-4"></i>
</a>
<a
href="#"
aria-label="Delete user"
title="Delete"
class="hover:text-red-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="trash" class="w-4 h-4"></i>
</a>
</div>
</td>
</tr>
<tr>
<td class="px-4 py-2 text-sm whitespace-nowrap">Aden Hines</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">aden-hines@example.com</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">05/31/2020</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">
<div class="space-x-2 flex items-center justify-end text-gray-500">
<a
href="#"
aria-label="Edit user"
title="Edit"
class="hover:text-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="edit" class="w-4 h-4"></i>
</a>
<a
href="#"
aria-label="Delete user"
title="Delete"
class="hover:text-red-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="trash" class="w-4 h-4"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Striped Table
<div class="container py-8 font-sans text-gray-900">
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="bg-gray-200">
<th class="text-xs text-gray-700 font-bold px-4 py-2">Name</th>
<th class="text-xs text-gray-700 font-bold px-4 py-2">Email</th>
<th class="text-xs text-gray-700 font-bold px-4 py-2">Date Applied</th>
<th class="text-right text-xs text-gray-700 font-bold px-4 py-2">Actions</th>
</tr>
</thead>
<tbody>
<tr class="even:bg-gray-100">
<td class="px-4 py-2 text-sm whitespace-nowrap">Briana Cherry</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">briana-cherry@example.com</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">05/18/2020</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">
<div class="space-x-2 flex items-center justify-end text-gray-500">
<a
href="#"
aria-label="Edit user"
title="Edit"
class="hover:text-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="edit" class="w-4 h-4"></i>
</a>
<a
href="#"
aria-label="Delete user"
title="Delete"
class="hover:text-red-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="trash" class="w-4 h-4"></i>
</a>
</div>
</td>
</tr>
<tr class="even:bg-gray-100">
<td class="px-4 py-2 text-sm whitespace-nowrap">Joseph Bradford</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">joseph-bradford@example.com</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">05/21/2020</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">
<div class="space-x-2 flex items-center justify-end text-gray-500">
<a
href="#"
aria-label="Edit user"
title="Edit"
class="hover:text-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="edit" class="w-4 h-4"></i>
</a>
<a
href="#"
aria-label="Delete user"
title="Delete"
class="hover:text-red-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="trash" class="w-4 h-4"></i>
</a>
</div>
</td>
</tr>
<tr class="even:bg-gray-100">
<td class="px-4 py-2 text-sm whitespace-nowrap">Mike Sims</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">mike-sims@example.com</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">05/24/2020</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">
<div class="space-x-2 flex items-center justify-end text-gray-500">
<a
href="#"
aria-label="Edit user"
title="Edit"
class="hover:text-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="edit" class="w-4 h-4"></i>
</a>
<a
href="#"
aria-label="Delete user"
title="Delete"
class="hover:text-red-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="trash" class="w-4 h-4"></i>
</a>
</div>
</td>
</tr>
<tr class="even:bg-gray-100">
<td class="px-4 py-2 text-sm whitespace-nowrap">Jamila Farrington</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">jamila-farrington@example.com</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">05/26/2020</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">
<div class="space-x-2 flex items-center justify-end text-gray-500">
<a
href="#"
aria-label="Edit user"
title="Edit"
class="hover:text-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="edit" class="w-4 h-4"></i>
</a>
<a
href="#"
aria-label="Delete user"
title="Delete"
class="hover:text-red-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="trash" class="w-4 h-4"></i>
</a>
</div>
</td>
</tr>
<tr class="even:bg-gray-100">
<td class="px-4 py-2 text-sm whitespace-nowrap">Aden Hines</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">aden-hines@example.com</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">05/31/2020</td>
<td class="px-4 py-2 text-sm whitespace-nowrap">
<div class="space-x-2 flex items-center justify-end text-gray-500">
<a
href="#"
aria-label="Edit user"
title="Edit"
class="hover:text-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="edit" class="w-4 h-4"></i>
</a>
<a
href="#"
aria-label="Delete user"
title="Delete"
class="hover:text-red-600 focus:outline-none focus:ring focus:ring-blue-500"
>
<i data-feather="trash" class="w-4 h-4"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Basic Blockquote
<div class="container max-w-2xl py-8 font-sans text-gray-900">
<blockquote class="flex flex-col items-center space-y-6 p-6 bg-gray-100 rounded sm:space-x-8 sm:space-y-0 sm:flex-row">
<img
src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=500&h=500&q=60"
alt="Briana Cherry portrait"
class="flex-shrink-0 w-20 h-20 rounded-full"
>
<div class="text-center sm:text-left">
<p class="text-gray-700 text-sm">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium quod error quo. Nesciunt quia esse, dignissimos nobis quas placeat sequi enim quasi, optio numquam corporis reprehenderit ex delectus, explicabo pariatur.
</p>
<cite class="mt-3 block text-gray-600 text-xs font-bold not-italic">- Briana Cherry, Program Manager</cite>
</div>
</blockquote>
</div>
Description List
<div class="container py-8 font-sans text-gray-900">
<dl class="divide-y divide-gray-200 text-sm overflow-x-auto">
<div class="flex items-start">
<dt class="w-24 flex-shrink-0 pr-4 py-3 font-bold text-gray-700 sm:w-48 md:w-64">Name</dt>
<dd class="pl-4 py-3 flex-1">Briana Cherry</dd>
</div>
<div class="flex items-start">
<dt class="w-24 flex-shrink-0 pr-4 py-3 font-bold text-gray-700 sm:w-48 md:w-64">Email</dt>
<dd class="pl-4 py-3 flex-1">briana-cherry@example.com</dd>
</div>
<div class="flex items-start">
<dt class="w-24 flex-shrink-0 pr-4 py-3 font-bold text-gray-700 sm:w-48 md:w-64">Bio</dt>
<dd class="pl-4 py-3 flex-1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime beatae cumque earum quas quo et magni natus, dolores, hic repudiandae id voluptatem perspiciatis exercitationem.</dd>
</div>
<div class="flex items-start">
<dt class="w-24 flex-shrink-0 pr-4 py-3 font-bold text-gray-700 sm:w-48 md:w-64">Age</dt>
<dd class="pl-4 py-3 flex-1">20</dd>
</div>
<div class="flex items-start">
<dt class="w-24 flex-shrink-0 pr-4 py-3 font-bold text-gray-700 sm:w-48 md:w-64">Joined on</dt>
<dd class="pl-4 py-3 flex-1">05/18/2020</dd>
</div>
</dl>
</div>
List with custom icons
<div class="container max-w-2xl py-8 font-sans text-gray-900">
<ul class="space-y-1 list-inside text-sm text-gray-700">
<li class="space-x-3 flex items-center">
<i data-feather="settings" class="w-4 h-4 text-gray-500"></i>
<span>Briana Cherry</span>
</li>
<li class="space-x-3 flex items-center">
<i data-feather="settings" class="w-4 h-4 text-gray-500"></i>
<span>Joseph Bradford</span>
</li>
<li class="space-x-3 flex items-center">
<i data-feather="settings" class="w-4 h-4 text-gray-500"></i>
<span>Mike Sims</span>
</li>
<li class="space-x-3 flex items-center">
<i data-feather="settings" class="w-4 h-4 text-gray-500"></i>
<span>Jamila Farrington</span>
</li>
<li class="space-x-3 flex items-center">
<i data-feather="settings" class="w-4 h-4 text-gray-500"></i>
<span>Aden Hines</span>
</li>
</ul>
</div>