一个具有 Neumorphism 设计、柔和色彩方案和适中复杂度的分页组件。它专为作品集设计,仅使用 HTML 和 Tailwind CSS 包括响应式设计和黑暗主题支持。
<nav aria-label="Pagination" class="flex items-center justify-center mt-8"> <ul class="flex rounded-md shadow-neumorphic-light dark:shadow-neumorphic-dark"> <li> <a href="#" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-pastel-light rounded-l-lg hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white"> <span class="sr-only">Previous</span> <svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> </a> </li> <li> <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-pastel-light hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white">1</a> </li> <li> <a href="#" aria-current="page" class="z-10 px-3 py-2 leading-tight text-blue-600 bg-pastel-medium hover:bg-pastel-dark hover:text-blue-700 dark:bg-pastel-darker dark:text-white"> 2 </a> </li> <li> <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-pastel-light hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white">3</a> </li> <li> <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-pastel-light rounded-r-lg hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white"> <span class="sr-only">Next</span> <svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10L7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg> </a> </li> </ul> </nav> <style> /* Add your custom Neumorphism shadow styles here */ .shadow-neumorphic-light { box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f2f2; } .shadow-neumorphic-dark { box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #333333; } /* Define your pastel color palette */ .bg-pastel-light { background-color: #e0e0e0; } .bg-pastel-medium { background-color: #d5d5d5; } .bg-pastel-dark { background-color: #cccccc; } .bg-pastel-darker { background-color: #b0b0b0; } </style>
响应式分页组件,支持 3D、Triadic Color、Simple、Business/Corporate Style 和 Dark Mode
一个为博客内容消费设计的拟物化分页组件,采用自然色调并支持深色主题。
分页组件,采用复古/怀旧设计风格,三元色彩方案,简单复杂,适用于博客/内容目的,使用Tailwind CSS。响应式设计,支持深色主题。