전자상거래 페이지 매김
반응형 머티리얼 디자인(Material Design)은 전자 상거래 제품 목록에 적합한 어두운 테마를 지원하는 페이지 매김 구성 요소에서 영감을 받았습니다. HTML 및 Tailwind CSS만 사용하여 대화형 단추 상태로 보색 구성표와 적당한 복잡성을 구현합니다.
HTML 코드
<nav aria-label="Pagination" class="flex justify-center items-center space-x-2 my-4 dark:bg-gray-800 p-2 rounded-md">
<button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
Previous
</button>
<a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-blue-200 rounded-md hover:bg-blue-300 dark:bg-blue-700 dark:text-blue-200 dark:hover:bg-blue-600">
1
</a>
<a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
2
</a>
<a href="#" aria-current="page" class="px-3 py-2 text-sm font-medium text-white bg-blue-500 rounded-md dark:bg-blue-500">
3
</a>
<a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
4
</a>
<a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
5
</a>
<button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
Next
</button>
</nav>관련 구성 요소
Gradient_Color_Transition_Pagination_Photography_Complex
사진 포트폴리오를 위해 설계된 복잡하고 반응이 빠른 페이지 매김 구성 요소로, 색상 그라디언트를 많이 사용하고 보색을 사용한 부드러운 전환이 특징입니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.
Artistic_Sepia_Pagination_Component
세피아/갈색 톤의 복잡하고 예술적인 페이지 매김 구성 요소로, 수채화 텍스처에서 영감을 받아 CRM/비즈니스 도구에 적합합니다. 다크 모드 지원으로 완벽하게 반응합니다.