Composants Pagination Brutalist_Retro_Pagination

Brutalist_Retro_Pagination

Un composant de pagination simple, de style brutaliste avec une palette de couleurs rétro, adapté aux sites d’information et de journalisme. Dispose d’un contraste élevé, d’une typographie audacieuse et d’une prise en charge du mode sombre.

Aperçu

HTML Code

<nav class="flex items-center justify-between border-t-4 border-b-4 border-gray-900 bg-[#E0E0BA] dark:bg-gray-800 px-4 py-4 md:px-6 shadow-xl font-mono">
  <div class="flex-1 flex max-md:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-3 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <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>
      Previous
    </a>
  </div>
  <div class="flex justify-center flex-1 sm:justify-start">
    <div>
      <p class="text-sm text-gray-900 dark:text-gray-200 uppercase tracking-widest">
        Page <span class="font-bold">3</span> of <span class="font-bold">12</span>
      </p>
    </div>
  </div>
  <div class="flex-1 flex justify-end max-md:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-3 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      Next
      <svg class="h-5 w-5 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <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>
  </div>

  <!-- Mobile Navigation -->
  <div class="flex flex-1 justify-between md:hidden">
    <a href="#" class="relative inline-flex items-center px-3 py-2 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <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 class="sr-only">Previous</span>
    </a>
    <a href="#" class="ml-3 relative inline-flex items-center px-3 py-2 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      <span class="sr-only">Next</span>
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <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>
  </div>
</nav>

Composants associés

Composant de pagination

Un composant de pagination réactif simple conçu pour le mode sombre avec un schéma de couleurs analogue, adapté à un portfolio.

Ouvrir

Artistic_Sepia_Pagination_Component

Un composant de pagination complexe et artistique avec des tons sépia/bruns, inspiré des textures aquarelles, adapté aux outils CRM/Business. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir

Composant de pagination neumorphe

Un composant de pagination neumorphique avec prise en charge du mode sombre.

Ouvrir