Компонент пагинации стекломорфизма
Адаптивный компонент пагинации, разработанный с использованием стекломорфизма и триадической цветовой схемы, подходит для чтения блогов и контента. Он имеет множество интерактивных элементов и поддерживает темный режим.
HTML-код
<div class="flex justify-center mt-6">
<nav class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4">
<ul class="flex items-center space-x-2">
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-blue-500 dark:hover:bg-blue-700 text-blue-600 dark:text-blue-300">Previous</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">1</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">2</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">3</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-red-500 dark:hover:bg-red-700 text-red-600 dark:text-red-300">Next</a>
</li>
</ul>
</nav>
</div>
<div class="flex justify-center mt-8 space-x-6">
<div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
<img class="rounded-t-lg" src="https://picsum.photos/300/150?random=1" alt="Content Image" />
<h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 1</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
<img class="rounded-t-lg" src="https://picsum.photos/300/150?random=2" alt="Content Image" />
<h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 2</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 text-center">Pellentesque habitant morbi tristique senectus.</p>
</div>
<div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
<img class="rounded-t-lg" src="https://picsum.photos/300/150?random=3" alt="Content Image" />
<h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 3</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 text-center">Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>Связанные компоненты
Пагинация электронной коммерции
Адаптивный компонент пагинации с поддержкой темной темы, вдохновленный Material Design, подходит для объявлений о товарах в электронной коммерции. Реализует комплементарную цветовую схему и умеренную сложность с интерактивными состояниями кнопок с использованием только HTML и Tailwind CSS.
Корпоративная пагинация в стиле ар-деко
Сложный компонент пагинации, вдохновленный эстетикой ар-деко, с геометрическими узорами и фирменной синей цветовой гаммой. Он адаптивный, включает поддержку темного режима и подходит для профессиональных бизнес-сайтов.
Industrial_Vibrant_Pagination_Component
Сложный компонент нумерации страниц в индустриальном стиле с яркими цветами, разработанный для некоммерческих/благотворительных веб-сайтов. Отличается эстетикой исходных материалов, открытыми элементами, а также обеспечивает полную отзывчивость и поддержку темных режимов.