Columns 구성 요소
Glassmorphism으로 설계된 반응형 Columns Component로, 비즈니스/기업 웹 사이트에 Triadic 색 구성표를 사용합니다. 젖빛 유리와 같은 반투명 요소, 흐림 효과가 특징이며 다크 모드에 적합합니다.
HTML 코드
<div class="flex flex-col lg:flex-row justify-between p-6 bg-white dark:bg-gray-800 bg-opacity-70 backdrop-blur-md rounded-lg shadow-lg space-y-6 lg:space-y-0 lg:space-x-6">
<div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 1</h2>
<p class="text-gray-600 dark:text-gray-400">This is a description for the first column. It can contain any information relevant to your business.</p>
<img src="https://picsum.photos/200/150?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
</div>
<div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 2</h2>
<p class="text-gray-600 dark:text-gray-400">Description for the second column goes here. You can elaborate on services or features.</p>
<img src="https://picsum.photos/200/150?random=2" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
</div>
<div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 3</h2>
<p class="text-gray-600 dark:text-gray-400">Details for the third column. Include any additional content as needed.</p>
<img src="https://picsum.photos/200/150?random=3" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
</div>
</div>