Glassmorphism 페이지 매김 구성 요소
glassmorphism과 트라이어딕 색 구성표로 설계된 반응형 페이지 매김 구성 요소로, 블로그 및 콘텐츠 읽기에 적합합니다. 여러 대화형 요소를 특징으로 하며 다크 모드를 지원합니다.
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>