구성 요소 갤러리 갤러리 구성 요소

갤러리 구성 요소

미니멀한 플랫 디자인의 반응형 갤러리 구성 요소로, Tailwind CSS를 사용하여 이미지와 어두운 테마를 지원합니다.

미리 보기

HTML 코드

<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=1" alt="Random Image 1" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=2" alt="Random Image 2" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=3" alt="Random Image 3" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=4" alt="Random Image 4" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=5" alt="Random Image 5" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=6" alt="Random Image 6" class="w-full h-auto object-cover">
        </div>
    </div>
</div>

관련 구성 요소

갤러리 구성 요소

머티리얼 디자인 스타일의 Tailwind CSS를 사용하는 반응형 갤러리 구성 요소로, 어두운 테마를 지원하는 대시보드에 적합합니다.

열다

Neumorphism Gallery 구성 요소

다크 모드를 지원하는 반응형 Neumorphic 갤러리 구성 요소입니다. 이미지는 picsum.photos의 자리 표시자와 randomuser.me 의 아바타입니다.

열다

3D 갤러리 구성 요소

전자 상거래를 위해 설계된 복잡한 반응형 3D 갤러리 구성 요소로, 어두운 테마와 보색이 특징입니다.

열다