Basic example
Use the pagination utility classes to indicate a series of content for your website.
<nav aria-label="Page navigation example">
<ul class="list-style-none flex">
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#"
>2</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#"
>Next</a
>
</li>
</ul>
</nav>
Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
Icons
The following example of a pagination component shows how the previous and next pages can be displayed using SVG icons instead.
<nav aria-label="Page navigation example">
<ul class="list-style-none flex">
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#"
aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#"
>2</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#"
aria-label="Next"
><span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Disabled and active states
Use the following styles to indicate a disabled adn active states of pagination.
<nav aria-label="Page navigation example">
<ul class="list-style-none flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-primary-100 px-3 py-1.5 text-sm font-medium text-primary-700 transition-all duration-300"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
Alignment
Change the alignment of pagination components with flexbox utilities. For
example, with
.justify-end:
<nav aria-label="Page navigation example">
<ul class="list-style-none flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-primary-100 px-3 py-1.5 text-sm font-medium text-primary-700 transition-all duration-300"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
Sizing
Pagination allows you to manipulate its proportions by changing text size and spacing.
<!-- First navigation component with larger text and padding -->
<nav aria-label="Page navigation example">
<!-- Unordered list container with flex display and no list style -->
<ul class="list-style-none flex">
<!-- Previous button (disabled) -->
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-5 py-3 text-lg text-neutral-500 transition-all duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<!-- Page number 1 -->
<li>
<a
class="relative block rounded bg-transparent px-5 py-3 text-lg text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>1</a
>
</li>
<!-- Page number 2 (current) -->
<li aria-current="page">
<a
class="relative block rounded bg-primary-100 px-5 py-3 text-lg font-medium text-primary-700 transition-all duration-300"
href="#!"
>2
<!-- Visually hidden text indicating current page -->
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<!-- Page number 3 -->
<li>
<a
class="relative block rounded bg-transparent px-5 py-3 text-lg text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>3</a
>
</li>
<!-- Next button -->
<li>
<a
class="relative block rounded bg-transparent px-5 py-3 text-lg text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- Second navigation component with smaller text and padding -->
<nav aria-label="Page navigation example">
<!-- Unordered list for the navigation items -->
<ul class="list-style-none flex">
<!-- Previous page item with disabled pointer events -->
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-2 py-1 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<!-- Page number 1 item -->
<li>
<a
class="relative block rounded bg-transparent px-2 py-1 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>1</a
>
</li>
<!-- Current page (2) item with highlighted background and "current" label -->
<li aria-current="page">
<a
class="relative block rounded bg-primary-100 px-2 py-1 text-sm font-medium text-primary-700 transition-all duration-300"
href="#!"
>2
<!-- Hidden "current" label for screen readers -->
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<!-- Page number 3 item -->
<li>
<a
class="relative block rounded bg-transparent px-2 py-1 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>3</a
>
</li>
<!-- Next page item -->
<li>
<a
class="relative block rounded bg-transparent px-2 py-1 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
Shape
Use .rounded-full class to change the shape to a circle.
<nav aria-label="Page navigation example">
<ul class="list-style-none flex">
<li>
<a
class="pointer-events-none relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded-full bg-primary-100 px-3 py-1.5 text-sm font-medium text-primary-700 transition-all duration-300"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
Color options
You can use each color from our color palette within a pagination.
<!-- First navigation element with primary theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none mb-6 flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-primary-100 px-3 py-1.5 text-sm font-medium text-primary-700 transition-all duration-300"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- /First navigation element with primary theme -->
<!-- Second navigation element with secondary theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none mb-6 flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-secondary-100 px-3 py-1.5 text-sm font-medium text-secondary-800 transition-all duration-300"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- /Second navigation element with secondary theme -->
<!-- Third navigation element with success theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none mb-6 flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-success-100 px-3 py-1.5 text-sm font-medium text-success-700 transition-all duration-300"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- /Third navigation element with success theme -->
<!-- Fourth navigation element with danger theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none mb-6 flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-danger-100 px-3 py-1.5 text-sm font-medium text-danger-700 transition-all duration-300"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- /Fourth navigation element with danger theme -->
<!-- Fifth navigation element with warning theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none mb-6 flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-warning-100 px-3 py-1.5 text-sm font-medium text-warning-700 transition-all duration-300"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- /Fifth navigation element with warning theme -->
<!-- Sixth navigation element with info theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none mb-6 flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-info-100 px-3 py-1.5 text-sm font-medium text-info-700 transition-all duration-300"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- /Sixth navigation element with info theme -->
<!-- Seventh navigation element with neutral-50 theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none mb-6 flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-neutral-50 px-3 py-1.5 text-sm font-medium text-neutral-600 transition-all duration-300"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!--/Seventh navigation element with neutral-50 theme -->
<!-- Eighth navigation element with neutral-800 theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-500 transition-all duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-neutral-800 px-3 py-1.5 text-sm font-medium text-neutral-50 transition-all duration-300 dark:bg-neutral-900"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- Eighth navigation element with neutral-800 theme -->
Related resources
Tutorials:
Extended Docs:
colors
icons
breadcrumbs
footer
scrollspy
badges
button group
buttons
link
scroll back to top button
ripple
borders
center grid items
center text
colors
dark theme
display block
display flex
flexbox
icons
position
text color
text decoration