갤러리 구성 요소

Tailwind CSS를 사용하는 간단한 갤러리 구성 요소로, 트라이어딕 색 구성표로 Brutalism 디자인 스타일을 구현하고 작업 또는 제품을 선보이기 위한 어두운 테마 지원을 구현합니다.

미리 보기

HTML 코드

<div class="bg-gray-800 dark:bg-gray-900 p-6">
    <h1 class="text-4xl font-bold text-green-400 mb-4">Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/400/300?random=1" alt="Gallery Image 1" class="w-full h-32 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-pink-400">Project Title 1</h2>
                <p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
                <div class="mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
                    <span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
                </div>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/400/300?random=2" alt="Gallery Image 2" class="w-full h-32 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-pink-400">Project Title 2</h2>
                <p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
                <div class="mt-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
                    <span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
                </div>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/400/300?random=3" alt="Gallery Image 3" class="w-full h-32 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-pink-400">Project Title 3</h2>
                <p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
                <div class="mt-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
                    <span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
                </div>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/400/300?random=4" alt="Gallery Image 4" class="w-full h-32 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-pink-400">Project Title 4</h2>
                <p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
                <div class="mt-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
                    <span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
                </div>
            </div>
        </div>
    </div>
</div>

갤러리 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Neumorphism Gallery 구성 요소

갤러리 구성 요소

전자상거래 제품 갤러리