组件 分页 分页组件

分页组件

以野兽派风格设计的响应式分页组件,适用于商业/公司网站,具有三色配色方案和深色模式支持。

预览

HTML 代码

<div class="flex justify-center items-center space-x-4 py-8">
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Prev</a>
    <span class="text-white dark:text-gray-300">Page 1 of 10</span>
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Next</a>
</div>

<div class="flex justify-center items-center space-x-2">
    <a href="#" class="px-3 py-1 text-gray-800 bg-blue-300 dark:bg-blue-700 rounded-lg font-bold hover:bg-blue-400 dark:hover:bg-blue-800">1</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">2</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">3</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">4</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">5</a>
</div>

<div class="flex justify-center items-center space-x-4 mt-4">
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Last</a>
</div>

相关组件

电子商务分页

一个响应式的Material Design风格分页组件,支持黑暗主题,适用于电子商务产品列表。使用HTML和Tailwind CSS实现互补的颜色方案和适度的复杂性,具有交互式按钮状态。

打开

现代化分页组件

一个具有黑暗模式支持的拟物化分页组件。

打开

分页组件

分页组件,采用复古/怀旧设计风格,三元色彩方案,简单复杂,适用于博客/内容目的,使用Tailwind CSS。响应式设计,支持深色主题。

打开