Columns 구성 요소 Neumorphism
Columns Component Neumorphism 컬럼 컴포넌트 뉴모피즘 - 미묘한 그림자를 사용하여 배경에서 돌출된 것처럼 보이는 요소를 만드는 소프트 UI 스타일입니다. 이 구성 요소는 반응형이며 어두운 테마를 지원합니다. JavaScript 코드가 필요하지 않습니다. 다크 모드의 경우 CSS 지원으로 충분합니다.
HTML 코드
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 p-4 dark:bg-gray-800">
<div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 1</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 2</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 3</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<style>
/* Basic Neumorphism shadows - adjust values for desired effect */
.shadow-xl {
box-shadow: 8px 8px 15px #b0b0b0, -8px -8px 15px #ffffff;
}
.dark .shadow-xl-dark {
box-shadow: 8px 8px 15px #444444, -8px -8px 15px #333333;
}
</style>