Компонент пагинации неоморфизма
Компонент пагинации с дизайном Neumorphism, пастельной цветовой гаммой и умеренной сложностью. Он предназначен для портфолио и включает в себя адаптивный дизайн и поддержку темных тем, используя только HTML и Tailwind CSS.
HTML-код
<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>
Связанные компоненты
Компонент пагинации
Адаптивный компонент пагинации, выполненный в бруталистском стиле, подходящий для деловых/корпоративных сайтов, с триадической цветовой гаммой и поддержкой темного режима.
Пагинация электронной коммерции
Адаптивный компонент пагинации с поддержкой темной темы, вдохновленный Material Design, подходит для объявлений о товарах в электронной коммерции. Реализует комплементарную цветовую схему и умеренную сложность с интерактивными состояниями кнопок с использованием только HTML и Tailwind CSS.