모든 구성 요소

Sticky Navigation 구성 요소

머티리얼 디자인 가이드라인을 따르는 반응형 고정 탐색 메뉴로, 다크 모드를 제공합니다.

                <header class="bg-white dark:bg-gray-800 shadow fixed top-0 left-0 right-0 z-50 transition-all duration-300">
    <div class="container mx-auto p-4 flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50/50" alt="Logo" class="h-10 w-10 rounded-full">
            <h1 class="ml-2 text-xl font-semibold text-gray-800 dark:text-white">MyWebsite</h1>
        </div>
        <nav>
            <ul class="flex space-x-4">
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Home</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">About</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Services</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>

<main class="pt-16 bg-gray-100 dark:bg-gray-900">
    <section class="container mx-auto py-10">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Welcome to MyWebsite</h2>
        <p class="text-gray-700 dark:text-gray-300">This is a simple sticky navigation component built with Tailwind CSS. Scroll down to see the sticky effect in action.</p>
        <div class="mt-10 space-y-4">
            <div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
            <div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
            <div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
        </div>
    </section>
</main>

제품 비교 구성 요소

80년대/90년대의 레트로/빈티지 미학으로 스타일링된 반응형 제품 비교 구성 요소로, Tailwind CSS로 어두운 테마를 지원합니다.

미리보기 열기

                <div class="container mx-auto p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 transition duration-500 ease-in-out transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img class="w-16 h-16 rounded-full" src="https://picsum.photos/seed/pic1/100/100" alt="Product 1 Image" />
                <div class="ml-4">
                    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product 1</h3>
                    <p class="text-gray-500 dark:text-gray-400">Description of Product 1. It's a great product for your needs.</p>
                </div>
            </div>
            <div class="flex justify-between items-center mt-4">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">$29.99</p>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 transition duration-500 ease-in-out transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img class="w-16 h-16 rounded-full" src="https://picsum.photos/seed/pic2/100/100" alt="Product 2 Image" />
                <div class="ml-4">
                    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product 2</h3>
                    <p class="text-gray-500 dark:text-gray-400">Description of Product 2. This product serves your unique demands.</p>
                </div>
            </div>
            <div class="flex justify-between items-center mt-4">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">$39.99</p>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #cbd5e0;
        }
    }
</style>

CAPTCHA 구성 요소

머티리얼 디자인에서 영감을 받은 반응형 CAPTCHA 구성요소로, Tailwind CSS를 사용하여 다크 모드를 지원합니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-5">
    <div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-6 max-w-lg w-full">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Verify You're Human</h2>
        <div class="flex flex-col items-center mb-4">
            <img src="https://picsum.photos/200/100" alt="Random" class="rounded-lg shadow-md mb-3">
            <span class="text-gray-700 dark:text-gray-300">Please select the images with traffic lights.</span>
        </div>
        <div class="grid grid-cols-2 gap-2">
            <img src="https://picsum.photos/200/100?random=1" alt="Option 1" class="cursor-pointer border-2 border-transparent hover:border-blue-500 rounded-lg transition duration-200 ease-in-out">
            <img src="https://picsum.photos/200/100?random=2" alt="Option 2" class="cursor-pointer border-2 border-transparent hover:border-blue-500 rounded-lg transition duration-200 ease-in-out">
            <img src="https://picsum.photos/200/100?random=3" alt="Option 3" class="cursor-pointer border-2 border-transparent hover:border-blue-500 rounded-lg transition duration-200 ease-in-out">
            <img src="https://picsum.photos/200/100?random=4" alt="Option 4" class="cursor-pointer border-2 border-transparent hover:border-blue-500 rounded-lg transition duration-200 ease-in-out">
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200 ease-in-out">Verify</button>
    </div>
</div>

인포그래픽 구성 요소

스큐어모피즘으로 디자인된 인포그래픽 컴포넌트로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-xl mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Infographics Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md"> 
            <img src="https://picsum.photos/200/100" alt="Placeholder Image" class="w-full h-auto rounded-md mb-2">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Section Title</h3>
            <p class="text-gray-600 dark:text-gray-300">This is a description of this section. It mimics a real-world interface.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md"> 
            <img src="https://picsum.photos/200/101" alt="Placeholder Image" class="w-full h-auto rounded-md mb-2">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Another Section</h3>
            <p class="text-gray-600 dark:text-gray-300">Details about this section are displayed here, using a real-world inspired design.</p>
        </div>
    </div>
    <div class="flex items-center justify-between mt-6">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="ml-2 text-gray-800 dark:text-gray-200 font-medium">User Name</span>
        </div>
        <span class="text-gray-600 dark:text-gray-300">3 hours ago</span>
    </div>
</div>

로그인/가입 구성 요소

Tailwind CSS를 사용하는 미니멀리스트 로그인 및 가입 구성 요소로, 반응형 효과와 어두운 테마를 지원합니다.

미리보기 열기

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-72">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Login</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" placeholder="[email protected]" required>
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password" placeholder="••••••••" required>
      </div>
      <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700" type="submit">Login</button>
      <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-600">Sign up</a></p>
    </form>
  </div>
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-72 mt-8">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Sign Up</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email-signup">Email</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email-signup" placeholder="[email protected]" required>
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password-signup">Password</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password-signup" placeholder="••••••••" required>
      </div>
      <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700" type="submit">Sign Up</button>
      <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-600">Login</a></p>
    </form>
  </div>
  <div class="hidden">
    <img src="https://picsum.photos/600/400?random=1" alt="Placeholder" class="w-full h-auto">
    <img src="https://picsum.photos/600/400?random=2" alt="Placeholder" class="w-full h-auto">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16">
  </div>
</div>

Table of Contents 구성 요소

Tailwind CSS로 스타일이 지정된 미니멀하고 반응이 빠른 목차 구성 요소로, 다크 모드를 지원하고 깔끔한 디자인 요소를 특징으로 합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="list-inside list-disc text-gray-600 dark:text-gray-300">
        <li class="py-1"><a href="#section1" class="hover:text-blue-600 dark:hover:text-blue-400">Section 1</a></li>
        <li class="py-1"><a href="#section2" class="hover:text-blue-600 dark:hover:text-blue-400">Section 2</a></li>
        <li class="py-1"><a href="#section3" class="hover:text-blue-600 dark:hover:text-blue-400">Section 3</a></li>
        <li class="py-1"><a href="#section4" class="hover:text-blue-600 dark:hover:text-blue-400">Section 4</a></li>
        <li class="py-1"><a href="#section5" class="hover:text-blue-600 dark:hover:text-blue-400">Section 5</a></li>
    </ul>
</div>

<div class="hidden md:flex items-center justify-center mt-8">
    <img src="https://picsum.photos/150" alt="Placeholder Image" class="rounded-full border-2 border-gray-300 dark:border-gray-700">
    <span class="ml-3 text-gray-600 dark:text-gray-300">Created by: <span class="font-semibold">John Doe</span></span>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #e2e8f0;
        }
    }
</style>

미디어 컴포넌트 컴포넌트

Tailwind CSS를 사용하여 스큐어모피즘 스타일로 디자인된 미디어 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다.

미리보기 열기

                <div class="max-w-sm mx-auto">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Placeholder Image">
        <div class="p-6">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Media Title</h2>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the media component. It mimics a real-world object with its skeuomorphic design.</p>
            <div class="flex items-center mt-4">
                <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <div class="ml-3">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted by John Doe</p>
                    <p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    /* Dark theme support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1A202C;
        }
    }
</style>

태그 클라우드 구성 요소

Tailwind CSS를 사용하여 스큐어모픽 스타일, 반응형 효과 및 어두운 테마 지원으로 설계된 태그 클라우드 구성 요소입니다.

미리보기 열기

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl">
    <h2 class="text-xl font-semibold mb-4">Tag Cloud</h2>
    <div class="flex flex-wrap gap-2">
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Web Development</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Design</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">SEO</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Marketing</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Programming</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Networking</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Cloud Computing</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Data Science</a>
    </div>
</div>

Follow Button 구성 요소

머티리얼 디자인 원칙에 따라 설계된 반응형 Follow Button Component로, Tailwind CSS를 사용하여 다크 모드와 맞춤형 스타일을 지원합니다.

미리보기 열기

                <div class="flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-5 transition-shadow duration-300 hover:shadow-lg">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg mr-3">
      <div class="flex-1">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Me</h2>
        <p class="text-gray-600 dark:text-gray-400">Join my journey and stay updated!</p>
      </div>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
        Follow
      </button>
    </div>
  </div>
</div>

Community Forum 구성 요소

뉴모피즘(Neumorphism) 스타일의 커뮤니티 포럼 컴포넌트(Forum Component)에는 아바타, 스레드, 어두운 테마가 포함되어 있습니다.

미리보기 열기

                <div class="bg-gray-100 dark:bg-gray-800 py-8 px-4 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Community Forum</h1>
    <div class="flex flex-col space-y-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <h2 class="font-semibold text-gray-900 dark:text-white">John Doe</h2>
                <span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">2 hours ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300">What do you think about the latest updates in our community?</p>
            <div class="flex justify-between items-center mt-4">
                <button class="text-blue-500 hover:underline">Reply</button>
                <span class="text-gray-500 dark:text-gray-400 text-sm">10 replies</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <h2 class="font-semibold text-gray-900 dark:text-white">Jane Smith</h2>
                <span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">1 hour ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300">I love the new features! They really enhance the user experience.</p>
            <div class="flex justify-between items-center mt-4">
                <button class="text-blue-500 hover:underline">Reply</button>
                <span class="text-gray-500 dark:text-gray-400 text-sm">5 replies</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <h2 class="font-semibold text-gray-900 dark:text-white">Michael Lee</h2>
                <span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">30 minutes ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300">Can someone explain the upcoming changes in moderation?</p>
            <div class="flex justify-between items-center mt-4">
                <button class="text-blue-500 hover:underline">Reply</button>
                <span class="text-gray-500 dark:text-gray-400 text-sm">2 replies</span>
            </div>
        </div>
    </div>
</div>

카테고리