Glassmorphism으로 스타일링된 반응형 콘텐츠 디스플레이 구성 요소로, 어두운 모드를 지원하는 흐릿한 배경과 반투명 요소를 특징으로 합니다.
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700"> <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Content Display Title</h2> <p class="text-gray-600 dark:text-gray-300 mb-4">This component features a glassmorphism style with blurred background and translucent elements.</p> <div class="flex items-center space-x-4 mb-4"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full"> <div> <h3 class="text-lg font-medium text-gray-800 dark:text-white">User Name</h3> <span class="text-sm text-gray-500 dark:text-gray-400">User Title</span> </div> </div> <img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4"> <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition duration-200">Read More</button> </div> </div>
레트로 디자인의 향수를 불러일으키는 디스플레이 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다.
비즈니스/기업 웹 사이트에 대한 다크 모드를 지원하는 반응형 콘텐츠 디스플레이 구성 요소입니다.
파스텔 색상 구성표로 어두운 모드 스타일로 작업이나 제품을 보여주기 위한 반응형 구성 요소입니다.