Neumorphism Pagination 구성 요소
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>