CCHub Logo CCHub Tailwind Collection
구성 요소 페이지 매김 Glassmorphism_Pagination_CRM

Glassmorphism_Pagination_CRM

파스텔 색상의 단순하고 반응이 빠른 유리 모피즘 스타일의 페이지 매김 구성 요소로, 다크 모드 지원을 포함하여 CRM/비즈니스 도구에 적합합니다.

미리 보기

HTML 코드 

<nav class="flex items-center justify-center p-4 bg-gradient-to-br from-purple-50 to-blue-50 dark:from-gray-800 dark:to-gray-900 min-h-[150px] sm:min-h-[200px] md:min-h-[250px] lg:min-h-[300px]">
  <ul class="flex items-center space-x-2 sm:space-x-4 bg-white/30 backdrop-blur-md rounded-xl p-3 sm:p-4 shadow-lg border border-white/20 dark:bg-gray-700/30 dark:border-gray-600/20">
    <li>
      <a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out group">
        <svg class="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transform group-hover:-translate-x-0.5 transition-transform" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
        </svg>
        Prev
      </a>
    </li>
    <li>
      <a href="#" class="relative hidden sm:inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        1
      </a>
    </li>
    <li>
      <a href="#" aria-current="page" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-purple-800 bg-purple-200/60 rounded-lg ring-1 ring-inset ring-purple-300 dark:text-purple-200 dark:bg-purple-700/60 dark:ring-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-all duration-200 ease-in-out">
        2
      </a>
    </li>
    <li>
      <a href="#" class="relative hidden sm:inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        3
      </a>
    </li>
    <li>
      <span class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 dark:text-gray-200">
        ...
      </span>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        10
      </a>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out group">
        Next
        <svg class="h-4 w-4 sm:h-5 sm:w-5 ml-1 sm:ml-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transform group-hover:translate-x-0.5 transition-transform" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
      </a>
    </li>
  </ul>
</nav>

관련 구성 요소

페이지 매김 구성 요소

어두운 모드용으로 설계된 간단한 반응형 페이지 매김 구성 요소로, 유사한 색 구성표를 사용하여 포트폴리오에 적합합니다.

열다

Retro_Grayscale_Crypto_Pagination

암호화폐/블록체인 애플리케이션을 위한 복잡한 레트로/빈티지 스타일의 페이지 매김 구성 요소로, 그레이스케일 색 구성표를 사용합니다. 완벽하게 반응하며 다크 모드를 지원합니다.

열다

Industrial_Vibrant_Pagination_Component

생생한 색상의 복잡한 산업 스타일 페이지 매김 구성 요소로, 비영리/자선 웹 사이트를 위해 설계되었습니다. 원료의 미학, 노출된 요소를 특징으로 하며 완전한 반응성과 다크 모드 지원을 제공합니다.

열다