모든 구성 요소

Product Gallery 구성 요소

레트로/빈티지 미학을 가미한 반응형 제품 갤러리로, 다크 모드를 지원합니다. 여기에는 플레이스홀더 서비스에서 생성된 이미지와 아바타가 포함됩니다.

                <div class="max-w-7xl mx-auto p-8">
    <h2 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Retro Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">$19.99</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">$39.99</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 4</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
    </div>
</div>

이미지 라이트박스 구성 요소

Tailwind CSS를 사용하여 Neumorphism 디자인 스타일 및 어두운 테마를 지원하는 반응형 이미지 라이트박스 구성 요소입니다.

미리보기 열기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative group">
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-48 h-32 rounded-lg shadow-neu transition-transform duration-300 group-hover:scale-105" />
        <div class="hidden absolute top-0 left-0 right-0 bottom-0 bg-white bg-opacity-75 dark:bg-gray-800 rounded-lg shadow-neu group-hover:block">
            <div class="flex items-center justify-center h-full">
                <img src="https://picsum.photos/600/400" alt="Lightbox image" class="max-w-full h-auto rounded-lg" />
            </div>
        </div>
    </div>
</div>

<style>
    .shadow-neu {
        box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), 
                    -8px -8px 20px rgba(255, 255, 255, 0.9);
    }
</style>

컨테이너 구성 요소

사용자 동작에 반응하는 매력적인 애니메이션을 특징으로 하고, 다크 모드를 지원하며, Tailwind CSS를 사용하는 마이크로 인터랙션이 있는 반응형 컨테이너 컴포넌트입니다.

미리보기 열기

                <div class="max-w-4xl mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:shadow-xl hover:scale-105">
    <div class="flex items-center p-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600">
      <div class="ml-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
      </div>
    </div>
    <img src="https://picsum.photos/800/400" alt="Placeholder Image" class="w-full h-48 object-cover transition-transform duration-500 hover:scale-105">
    <div class="p-4">
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Engaging Title</h3>
      <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700 transition duration-200 ease-in-out">Learn More</button>
    </div>
  </div>
</div>

미디어 컴포넌트 컴포넌트

레트로/빈티지 디자인 스타일에서 영감을 받은 반응형 미디어 구성 요소로, 80년대/90년대의 향수를 불러일으키는 미학을 특징으로 합니다. Tailwind CSS로 어두운 테마를 지원하며 자리 표시자 이미지와 아바타를 포함합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm mx-auto">
    <img class="rounded-lg w-full h-48 object-cover mb-4" src="https://picsum.photos/seed/media/400/200" alt="Media Thumbnail">
    <h2 class="text-2xl font-bold mb-2 text-gray-800 dark:text-gray-200">Retro Media Title</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the media component, capturing the essence of the nostalgia from the 80s and 90s.</p>
    <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div>
            <p class="text-gray-800 dark:text-gray-200 font-semibold">User Name</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Posted on March 1, 2023</p>
        </div>
    </div>
</div>

로더 구성 요소

머티리얼 디자인 스타일로 디자인된 로더 컴포넌트로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center space-y-8 p-8 bg-gray-100 dark:bg-gray-800 min-h-screen">
    <!-- Circular Loader -->
    <div class="flex items-center justify-center">
        <div class="animate-spin rounded-full h-32 w-32 border-t-4 border-blue-500 border-solid dark:border-blue-300"></div>
    </div>

    <!-- Linear Loader -->
    <div class="w-full max-w-lg">
        <div class="h-2 bg-blue-500 rounded animate-pulse dark:bg-blue-300"></div>
    </div>

    <!-- Skeleton Loader -->
    <div class="flex space-x-4">
        <div class="h-12 w-12 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
        <div class="flex-1 space-y-4">
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-4/5"></div>
        </div>
    </div>

    <!-- Image Loader -->
    <div class="w-64 h-48 bg-gray-200 dark:bg-gray-700 rounded shadow-md animate-pulse">
        <img src="https://picsum.photos/200/300" alt="Random Image" class="w-full h-full object-cover rounded" />
    </div>

    <!-- Avatar Loader -->
    <div class="flex items-center space-x-4">
        <div class="h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
        <div class="flex-1 space-y-2">
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-3/4"></div>
        </div>
    </div>
</div>

Heat Maps 구성 요소

레트로/빈티지 미학으로 디자인된 반응형 히트 맵 구성 요소이며 어두운 테마 지원을 통합합니다. 제목, 부제목, 열이 강조 표시된 영역이 있는 지도에 대한 섹션이 있으며, 향수를 불러일으키는 느낌을 주기 위해 추가 무작위 이미지와 아바타가 있습니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-2xl mx-auto">
    <h2 class="text-3xl font-bold text-center text-purple-800 dark:text-purple-300 mb-2">Heat Maps Data Visualization</h2>
    <h4 class="text-lg text-center text-gray-600 dark:text-gray-400 mb-6">Exploring trends with a nostalgic vibe!</h4>
    <div class="relative w-full h-64 mb-4 bg-gradient-to-r from-pink-300 via-purple-400 to-blue-500 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="Heat Map" class="absolute inset-0 object-cover w-full h-full opacity-80">
        <div class="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center">
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
                <h3 class="text-lg font-semibold text-purple-800 dark:text-purple-300">Active Areas</h3>
                <ul class="mt-2 space-y-2">
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 1: 35%</span>
                    </li>
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 2: 50%</span>
                    </li>
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 3: 20%</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <p class="text-center text-gray-600 dark:text-gray-400">Explore the data trends with a touch from the 80s and 90s!</p>
</div>

Shopping Cart 구성 요소

반응형 디자인과 다크 모드를 지원하는 레트로 빈티지 스타일의 장바구니 구성 요소로, Tailwind CSS를 활용하고 자리 표시자 이미지와 아바타를 제공합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold text-center text-black dark:text-white">Shopping Cart</h2>
    <ul class="mt-4">
        <li class="flex items-center justify-between py-2 border-b border-gray-300">
            <img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md">
            <div class="ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <input type="number" value="1" class="border rounded-md w-16 text-center" />
            <button class="ml-2 text-red-500 font-bold">Remove</button>
        </li>
        <li class="flex items-center justify-between py-2 border-b border-gray-300">
            <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md">
            <div class="ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
            </div>
            <input type="number" value="1" class="border rounded-md w-16 text-center" />
            <button class="ml-2 text-red-500 font-bold">Remove</button>
        </li>
        <li class="flex items-center justify-between py-2 border-b border-gray-300">
            <img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="rounded-md">
            <div class="ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
                <p class="text-gray-600 dark:text-gray-400">$19.99</p>
            </div>
            <input type="number" value="1" class="border rounded-md w-16 text-center" />
            <button class="ml-2 text-red-500 font-bold">Remove</button>
        </li>
    </ul>
    <div class="mt-4 flex justify-between">
        <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Total:</p>
        <p class="text-lg font-bold text-gray-800 dark:text-gray-200">$99.97</p>
    </div>
    <button class="mt-6 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md transition duration-300 ease-in-out">Checkout</button>
</div>

Carousel Slider 구성 요소

Tailwind CSS를 사용하여 잔인한 스타일로 디자인된 반응형 캐러셀 슬라이더 구성 요소로, 고대비, 특이한 레이아웃 및 어두운 테마 지원을 특징으로 합니다.

미리보기 열기

                <div class="relative w-full h-64 overflow-hidden bg-gray-800" data-theme="dark">
    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="absolute w-full h-full bg-gray-800 transition duration-300 ease-in-out transform scale-110 opacity-75"></div>
        <div class="carousel-slide transition-all duration-500 ease-in-out transform space-x-4">
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Image 1">
                <p class="text-white mt-2">Slide 1</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Image 2">
                <p class="text-white mt-2">Slide 2</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Image 3">
                <p class="text-white mt-2">Slide 3</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=4" alt="Carousel Image 4">
                <p class="text-white mt-2">Slide 4</p>
            </div>
        </div>
    </div>
    <button class="absolute left-4 top-1/2 transform -translate-y-1/2 p-2 bg-gray-700 rounded-full text-white hover:bg-gray-600 focus:outline-none">
        ❮
    </button>
    <button class="absolute right-4 top-1/2 transform -translate-y-1/2 p-2 bg-gray-700 rounded-full text-white hover:bg-gray-600 focus:outline-none">
        ❯
    </button>
</div>
<style>
    [data-theme="dark"] {
        background-color: #1a202c;
    }
</style>

그리드 레이아웃 구성 요소

미니멀한 그리드 레이아웃 구성 요소로, 반응형 효과와 어두운 테마를 지원하는 단순하고 깔끔한 디자인을 특징으로 합니다. picsum.photos 및 randomuser.me 의 자리 표시자 이미지 및 아바타를 활용합니다.

미리보기 열기

                <div class="container mx-auto p-4">
    <h2 class="text-center text-2xl font-bold mb-4">Minimalist Grid Layout</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/150" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 1</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/151" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 2</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/152" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 3</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/153" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 4</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/154" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 5</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/155" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 6</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
    </div>
</div>

<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        .bg-white { background-color: #1a202c; }
        .text-gray-700 { color: #edf2f7; }
    }
</style>

Like/Reaction Buttons 컴포넌트

Tailwind CSS와 함께 Brutalism 스타일로 디자인된 Like/Reaction Buttons 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다.

미리보기 열기

                <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 space-y-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">React to this!</h2>
    <div class="grid grid-cols-2 gap-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-500 rounded-md">
            👍 Like
        </button>
        <button class="bg-red-500 text-white font-bold py-2 px-4 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-50 dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-500 rounded-md">
            ❤️ Love
        </button>
        <button class="bg-yellow-500 text-white font-bold py-2 px-4 rounded-md hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-700 dark:hover:bg-yellow-800 dark:focus:ring-yellow-500 rounded-md">
            😂 Haha
        </button>
        <button class="bg-green-500 text-white font-bold py-2 px-4 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-50 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-500 rounded-md">
            😮 Wow
        </button>
    </div>
    <div class="flex space-x-4">
        <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
        <img src="https://picsum.photos/40/40?random=1" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
        <img src="https://picsum.photos/40/40?random=2" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

카테고리