<div class="flex justify-center p-6">
<nav
class="inline-flex h-9 justify-center divide-x divide-gray-300 rounded-md border border-gray-300 text-sm font-medium text-gray-600"
role="navigation"
aria-label="Pagination"
>
<a class="flex cursor-not-allowed items-center rounded-l-md bg-gray-200 px-3" href="#" rel="prev"> Previous </a>
<a class="flex items-center rounded-r-md px-3 hover:bg-gray-100" href="#" rel="next"> Next </a>
</nav>
</div>
<div class="flex justify-center p-6">
<nav
class="inline-flex h-9 justify-center divide-x divide-gray-300 rounded-md border border-gray-300 text-sm font-medium text-gray-600"
role="navigation"
aria-label="Pagination"
>
<a class="flex items-center rounded-l-md px-3 hover:bg-gray-100" href="#" rel="prev"> Previous </a>
<ul class="flex divide-x divide-gray-300">
<li>
<a class="flex h-full w-9 items-center justify-center hover:bg-gray-100" href="#" aria-label="Page 1"> 1 </a>
</li>
<li>
<a class="flex h-full w-9 items-center justify-center hover:bg-gray-100" href="#" aria-label="Page 2">2 </a>
</li>
<li>
<a
class="relative z-10 flex h-full w-9 items-center justify-center bg-indigo-500 text-white ring-1 ring-indigo-500"
href="#"
aria-label="Page 3"
aria-current="page"
>
3
</a>
</li>
<li>
<a class="flex h-full w-9 items-center justify-center hover:bg-gray-100" href="#" aria-label="Page 4"> 4 </a>
</li>
<li>
<a class="flex h-full w-9 items-center justify-center hover:bg-gray-100" href="#" aria-label="Page 5"> 5 </a>
</li>
</ul>
<a class="flex items-center rounded-r-md px-3 hover:bg-gray-100" href="#" rel="next"> Next </a>
</nav>
</div>
<div class="py-6">
<nav class="flex items-center justify-center space-x-2 text-sm font-medium text-gray-600 md:space-x-6" role="navigation" aria-label="Pagination">
<a class="flex h-9 items-center justify-center rounded-md px-2 hover:bg-gray-100 md:space-x-3 md:px-3" href="#" rel="prev">
<!-- Hericons name: mini/arrow-long-left -->
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path
fill-rule="evenodd"
d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z"
clip-rule="evenodd"
/>
</svg>
<span class="sr-only md:not-sr-only">Previous</span>
</a>
<ul class="flex items-center space-x-2">
<li>
<a class="flex size-9 items-center justify-center rounded-md hover:bg-gray-100" href="#" aria-label="Page 1"> 1 </a>
</li>
<li>
<a class="flex size-9 items-center justify-center rounded-md bg-indigo-500 text-white" href="#" aria-label="Page 2" aria-current="page">
2
</a>
</li>
<li>
<a class="flex size-9 items-center justify-center rounded-md hover:bg-gray-100" href="#" aria-label="Page 3"> 3 </a>
</li>
</ul>
<a class="flex h-9 items-center justify-center rounded-md px-2 hover:bg-gray-100 md:space-x-3 md:px-3" href="#" rel="next">
<span class="sr-only md:not-sr-only">Next</span>
<!-- hero icons: mini/arrow-long-right -->
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path
fill-rule="evenodd"
d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z"
clip-rule="evenodd"
/>
</svg>
</a>
</nav>
</div>
<div class="py-6">
<nav class="flex items-center justify-center space-x-2 text-sm font-medium text-gray-600" role="navigation" aria-label="Pagination">
<a class="flex size-9 items-center justify-center rounded-md hover:bg-gray-100" href="#" rel="prev">
<span class="sr-only">Previous</span>
<!-- Hericons name: mini/chevron-left -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
<path
fill-rule="evenodd"
d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
clip-rule="evenodd"
/>
</svg>
</a>
<ul class="flex items-center space-x-2">
<li>
<a class="flex size-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-100" href="#" aria-label="Page 1"
>1</a
>
</li>
<li>
<div class="flex size-9 items-center justify-center rounded-md">⋯</div>
</li>
<li>
<a class="flex size-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-100" href="#" aria-label="Page 3"
>3</a
>
</li>
<li>
<a class="flex size-9 items-center justify-center rounded-md bg-indigo-500 text-white" href="#" aria-label="Page 4" aria-current="page"
>4</a
>
</li>
<li>
<a class="flex size-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-100" href="#" aria-label="Page 5"
>5</a
>
</li>
<li>
<div class="flex size-9 items-center justify-center rounded-md">⋯</div>
</li>
<li>
<a
class="flex size-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-100"
href="#"
aria-label="Page 17"
>17</a
>
</li>
</ul>
<a class="flex size-9 items-center justify-center rounded-md hover:bg-gray-100" href="#" rel="next">
<span class="sr-only">Next</span>
<!-- Hericons name: mini/chevron-right -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"
/>
</svg>
</a>
</nav>
</div>
<div class="p-6">
<nav
class="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white text-sm font-medium text-gray-600 sm:flex sm:divide-x sm:divide-y-0"
role="navigation"
aria-label="results"
>
<a class="block flex-1 rounded-l-md p-2 hover:bg-gray-100" href="#" rel="prev">
<div class="flex items-center justify-center space-x-2">
<!-- Hericons name: mini/chevron-left -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0">
<path
fill-rule="evenodd"
d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
clip-rule="evenodd"
/>
</svg>
<span>A brief introduction to the Command Pattern</span>
</div>
</a>
<a class="block flex-1 rounded-r-md p-2 hover:bg-gray-100" href="#" rel="next">
<div class="flex items-center justify-center space-x-2 text-right">
<span>From the Diner to the Command Pattern</span>
<!-- hero icons: mini/chevron-right -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"
/>
</svg>
</div>
</a>
</nav>
</div>
<div class="p-6">
<nav class="rounded-md border border-gray-200 bg-white p-2" role="navigation" aria-label="results">
<div class="-my-2 items-center justify-between divide-y divide-gray-200 md:my-0 md:flex md:divide-y-0">
<div class="py-2 md:py-0">
<a class="block rounded-md border border-transparent p-2 hover:bg-gray-100" href="#" rel="prev">
<div class="flex items-center space-x-3 text-gray-900">
<!-- Hericons name: mini/arrow-long-left -->
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path
fill-rule="evenodd"
d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z"
clip-rule="evenodd"
/>
</svg>
<span class="text-base font-medium">Chapter 3</span><span class="sr-only">:</span>
</div>
<span class="ml-8 block text-sm text-gray-700"> Build a Minimum Viable Product </span>
</a>
</div>
<div class="py-2 md:py-0">
<a class="block rounded-md border border-transparent p-2 text-right hover:bg-gray-100" href="#" rel="next">
<div class="flex items-center justify-end space-x-3 text-gray-900">
<span class="text-base font-medium">Chapter 5</span><span class="sr-only">:</span>
<!-- hero icons: mini/arrow-long-right -->
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path
fill-rule="evenodd"
d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z"
clip-rule="evenodd"
/>
</svg>
</div>
<span class="mr-8 block text-sm text-gray-700"> Premature Optimization Is the Root of All Evil </span>
</a>
</div>
</div>
</nav>
</div>
<div class="py-6">
<nav class="flex items-center justify-center space-x-4" role="navigation" aria-label="Pagination">
<a class="flex size-8 items-center justify-center rounded-md text-gray-600 hover:bg-gray-100" href="#" rel="prev">
<span class="sr-only">Previous</span>
<!-- Hericons name: mini/chevron-left -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
<path
fill-rule="evenodd"
d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
clip-rule="evenodd"
/>
</svg>
</a>
<div class="flex items-center">
<input
type="text"
class="size-8 rounded-lg border border-gray-300 px-1 text-center text-sm text-gray-900 shadow-sm focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
value="1"
/>
<div class="mx-2 text-sm text-gray-600">/</div>
<div class="text-sm text-gray-600">9</div>
</div>
<a class="flex size-8 items-center justify-center rounded-md text-gray-600 hover:bg-gray-100" href="#" rel="next">
<span class="sr-only">Next</span>
<!-- Hericons name: mini/chevron-right -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"
/>
</svg>
</a>
</nav>
</div>
<div class="p-6">
<nav class="flex items-center justify-between text-sm font-medium text-gray-600" role="navigation" aria-label="Pagination">
<div class="flex flex-1">
<a
class="mr-auto inline-flex h-9 items-center justify-center rounded-md border border-gray-300 bg-white px-4 hover:bg-gray-100 sm:space-x-2"
href="#"
rel="prev"
>
<!-- Hericons name: mini/arrow-long-left -->
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path
fill-rule="evenodd"
d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z"
clip-rule="evenodd"
/>
</svg>
<span class="sr-only sm:not-sr-only">Prev</span>
</a>
</div>
<ul class="flex items-center space-x-2">
<li>
<a class="flex size-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-100" href="#" aria-label="Page 1"
>1</a
>
</li>
<li>
<a class="flex size-9 items-center justify-center rounded-md bg-indigo-500 text-white" href="#" aria-label="Page 2" aria-current="page"
>2</a
>
</li>
<li>
<a class="flex size-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-100" href="#" aria-label="Page 3"
>3</a
>
</li>
</ul>
<div class="flex flex-1 justify-end">
<a
class="flex h-9 items-center justify-center rounded-md border border-gray-300 bg-white px-4 hover:bg-gray-100 sm:space-x-2"
href="#"
rel="next"
>
<span class="sr-only sm:not-sr-only">Next</span>
<!-- hero icons: mini/arrow-long-right -->
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path
fill-rule="evenodd"
d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
</nav>
</div>
<div class="p-6">
<nav
class="items-center justify-between space-y-4 text-sm font-medium text-gray-600 sm:flex sm:space-x-2 sm:space-y-0"
role="navigation"
aria-label="Pagination"
>
<ul class="flex items-center space-x-2">
<li>
<a class="flex size-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-100" href="#" aria-label="Page 1"
>1</a
>
</li>
<li>
<div class="flex size-9 items-center justify-center rounded-md">⋯</div>
</li>
<li>
<a class="flex size-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-100" href="#" aria-label="Page 3"
>3</a
>
</li>
<li>
<a class="flex size-9 items-center justify-center rounded-md bg-indigo-500 text-white" href="#" aria-label="Page 4" aria-current="page"
>4</a
>
</li>
<li>
<a class="flex size-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-100" href="#" aria-label="Page 5"
>5</a
>
</li>
<li>
<div class="flex size-9 items-center justify-center rounded-md">⋯</div>
</li>
<li>
<a
class="flex size-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-100"
href="#"
aria-label="Page 17"
>17</a
>
</li>
</ul>
<div class="flex items-center space-x-2">
<a
class="flex h-9 items-center justify-center space-x-2 rounded-md border border-gray-300 bg-white px-4 hover:bg-gray-100"
href="#"
rel="prev"
>
<!-- Hericons name: mini/arrow-long-left -->
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path
fill-rule="evenodd"
d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z"
clip-rule="evenodd"
/>
</svg>
<span>Prev</span>
</a>
<a
class="flex h-9 items-center justify-center space-x-2 rounded-md border border-gray-300 bg-white px-4 hover:bg-gray-100"
href="#"
rel="next"
>
<span>Next</span>
<!-- hero icons: mini/arrow-long-right -->
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path
fill-rule="evenodd"
d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
</nav>
</div>