모든 구성 요소

Breadcrumb Navigation 구성 요소

Breadcrumb Navigation Component는 Skeuomorphism 디자인, 반응형 효과 및 어두운 테마를 지원합니다.

                <nav aria-label="Breadcrumb" class="flex">
  <ol role="list" class="flex items-center space-x-4">
    <li>
      <div>
        <a href="#" class="text-gray-400 hover:text-gray-500">
          <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-1-1l7-7z" clip-rule="evenodd" />
          </svg>
          <span class="sr-only">Home</span>
        </a>
      </div>
    </li>
    
    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300" fill="currentColor" viewBox="0 0 24 44" preserveAspectRatio="none" aria-hidden="true">
          <path d="M.293 0H.026L9.32 18.316c-.387-.85-.695-1.774-.95-2.738L0 0z" />
        </svg>
        <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Projects</a>
      </div>
    </li>
    
    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300" fill="currentColor" viewBox="0 0 24 44" preserveAspectRatio="none" aria-hidden="true">
          <path d="M.293 0H.026L9.32 18.316c-.387-.85-.695-1.774-.95-2.738L0 0z" />
        </svg>
        <a href="#" aria-current="page" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Project Nero</a>
      </div>
    </li>
  </ol>
</nav>

데이터 시각화 구성 요소

그리드 기반 레이아웃 및 깊이 효과와 같은 Material Design 원칙으로 설계된 반응형 데이터 시각화 구성 요소이며 어두운 테마를 지원합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition-all ease-in-out duration-300">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Data Visualization</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 1</h3>
            <img src="https://picsum.photos/200/150" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 1 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 2</h3>
            <img src="https://picsum.photos/200/151" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 2 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 3</h3>
            <img src="https://picsum.photos/200/152" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 3 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 4</h3>
            <img src="https://picsum.photos/200/153" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 4 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 5</h3>
            <img src="https://picsum.photos/200/154" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 5 goes here.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
            <h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 6</h3>
            <img src="https://picsum.photos/200/155" alt="Placeholder Image" class="rounded-lg mt-2" />
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 6 goes here.</p>
        </div>
    </div>
    <div class="mt-4 text-center">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-all duration-200">Load More</button>
    </div>
</div>

Hamburger Menu 컴포넌트

브루탈리즘 디자인의 반응형 햄버거 메뉴 구성 요소로, 높은 대비, 대담한 스타일 및 다크 모드 지원을 특징으로 합니다.

미리보기 열기

                <div class="relative bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <button class="flex items-center justify-center w-10 h-10 text-black dark:text-white hover:bg-gray-300 dark:hover:bg-gray-700 rounded-md transition-all">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
        </svg>
    </button>
    <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 transition-opacity duration-300 ease-in-out transform scale-0 origin-top-right">
        <div class="flex flex-col p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-10 h-10 mb-2">
            <h3 class="text-lg font-bold text-black dark:text-white">Menu Title</h3>
            <ul class="space-y-2">
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 1</a>
                </li>
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 2</a>
                </li>
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

인포그래픽 구성 요소

브루탈리즘 스타일, 고대비, 특이한 레이아웃, 테일윈드 CSS를 사용한 다크 모드 지원으로 반응하는 인포그래픽 구성 요소

미리보기 열기

                <section class="bg-white dark:bg-stone-900 text-stone-900 dark:text-white p-8 sm:p-12 md:p-16 lg:p-20 font-mono">
  <div class="container mx-auto">
    <h2 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-12 uppercase border-b-8 border-stone-900 dark:border-white pb-4">Infographic Insights</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 1</h3>
        <p class="text-lg mb-4">Quis at aute sint partem non, sed literis minim ea.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">123</div>
      </div>
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 2</h3>
        <p class="text-lg mb-4">Esse cillum fore consequat, nam magna tempor a fore quam.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">45%</div>
      </div>
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 3</h3>
        <p class="text-lg mb-4">Do eu lorem ne nescius, ex ut laboris constructio.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">$999</div>
      </div>
    </div>
    <div class="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white flex items-center transform transition-transform duration-300 hover:rotate-2">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="w-16 h-16 rounded-none mr-6 border-4 border-stone-900 dark:border-white">
            <div>
                <h3 class="text-2xl font-bold mb-2 uppercase">Key Stat with Image</h3>
                <p class="text-lg">Non pariatur quae ne amet, admodum non expetendis.</p>
                 <div class="text-5xl font-bold text-left text-red-700 dark:text-yellow-400 mt-4">7890</div>
            </div>
        </div>
         <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:-rotate-2">
            <h3 class="text-2xl font-bold mb-4 uppercase">Image Highlight</h3>
            <img src="https://picsum.photos/id/237/400/250" alt="Placeholder Image" class="w-full h-64 object-cover border-4 border-stone-900 dark:border-white mb-4">
            <p class="text-lg">Id sint singulis aut ullamco. lorem nescius aut cupidatat.</p>
        </div>
    </div>
     <div class="mt-12 bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white overflow-x-auto">
        <h3 class="text-2xl font-bold mb-4 uppercase">Scrolling Data</h3>
        <div class="flex space-x-8">
            <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">1024</div>
                <p class="text-lg">Specific insight one</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">2048</div>
                <p class="text-lg">Specific insight two</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">4096</div>
                <p class="text-lg">Specific insight three</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">8192</div>
                <p class="text-lg">Specific insight four</p>
            </div>
        </div>
    </div>
  </div>
</section>

Session Timeout Alert 구성 요소

Session Timeout Alert Component는 생생하고 대담한 미학, 높은 대비 및 반응형 효과를 갖춘 브루탈리즘 스타일로 설계되었습니다. 이 구성 요소는 Tailwind CSS 스타일을 사용하여 어두운 테마를 지원하고 picsum.photos 및 randomuser.me 의 자리 표시자 이미지를 사용합니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg text-center p-6 max-w-md w-full">
        <img src="https://picsum.photos/200/100?random=1" alt="Session Timeout" class="w-full h-24 rounded-md object-cover mb-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Your session is about to expire due to inactivity. Please save your work and log in again to continue.</p>
        <div class="flex justify-between mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-400 dark:border-gray-600">
            <p class="text-base font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
        </div>
        <div class="flex space-x-4">
            <button class="px-4 py-2 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 transition duration-200">Stay Logged In</button>
            <button class="px-4 py-2 bg-red-600 text-white font-bold rounded hover:bg-red-700 transition duration-200">Log Out</button>
        </div>
    </div>
</div>

바닥글 구성 요소

뉴모피즘(Neumorphism) 스타일로 디자인된 바닥글 컴포넌트로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

미리보기 열기

                <footer class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <div class="container mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">About Us</h5>
                <p class="text-gray-600 dark:text-gray-400">We are dedicated to providing the best service to our customers.</p>
            </div>
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us</h5>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Facebook</a>
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Twitter</a>
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Instagram</a>
                </div>
            </div>
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Contact Us</h5>
                <p class="text-gray-600 dark:text-gray-400">Email: [email protected]</p>
            </div>
            <div class="hidden md:block">
                <img src="https://picsum.photos/50" alt="Placeholder" class="rounded-full w-10 h-10" />
            </div>
        </div>
        <div class="text-center mt-6">
            <p class="text-gray-600 dark:text-gray-400">© 2023 Company. All Rights Reserved.</p>
        </div>
    </div>
</footer>

데이터 테이블 구성 요소

glassmorphism 디자인의 반응형 데이터 테이블 구성 요소로, 반투명 젖빛 유리와 같은 요소, 흐림 효과 및 다크 모드 지원을 특징으로 합니다.

미리보기 열기

                <div class="container mx-auto my-10 p-5 bg-white bg-opacity-30 backdrop-blur-lg shadow-lg rounded-lg dark:bg-gray-800 dark:bg-opacity-30">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Data Tables</h2>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
            <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avatar</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profile Image</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-600">
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">1</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">John Doe</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/200/300" alt="Profile Image"></td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">Jane Smith</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/201/300" alt="Profile Image"></td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">3</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">Michael Johnson</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/202/300" alt="Profile Image"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<style>
    /* Additional styles for glassmorphism */
    body {
        background: rgb(239, 246, 255);
        background: linear-gradient(90deg, rgba(239, 246, 255, 1) 0%, rgba(255, 255, 255, 0.75) 100%);
    }
    .bg-white {
        background: rgba(255, 255, 255, 0.9) !important;
    }
    /* Dark mode adjustments */
    .dark .bg-white {
        background: rgba(31, 41, 55, 0.7) !important;
    }
</style>

그리드 레이아웃 구성 요소

머티리얼 디자인 원칙을 따르는 반응형 그리드 레이아웃 구성 요소로, Tailwind CSS를 사용하여 그림자 효과와 다크 모드를 지원합니다.

미리보기 열기

                <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Material Design Grid Layout</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?2" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?3" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?4" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 4</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?5" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 5</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?6" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 6</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
    </div>
</div>

<!-- Tailwind CSS styles for dark mode support -->
<style>
    @media (prefers-color-scheme: dark) {
        .dark .bg-white { background-color: #1f2937; /* Gray-800 */ }
        .dark .text-gray-700 { color: #e5e7eb; /* Gray-200 */ }
        .dark .text-gray-600 { color: #d1d5db; /* Gray-400 */ }
    }
</style>

Glassmorphism 사이드바 탐색

Glassmorphism 디자인, 다크 모드 지원 및 Tailwind CSS를 사용하는 반응형 Sidebar Navigation Component입니다. 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소가 특징입니다.

미리보기 열기

                ```html
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">

    <!-- Backdrop -->
    <div id="sidebarBackdrop" class="fixed inset-0 z-10 bg-black opacity-0 md:hidden" onclick="closeSidebar()"></div>

    <!-- Sidebar -->
    <div id="sidebar" class="w-64 space-y-6 py-7 px-2 fixed inset-y-0 left-0 transform -translate-x-full md:translate-x-0 transition duration-200 ease-in-out z-20
                bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-10 backdrop-filter backdrop-blur-lg dark:text-white text-gray-900">

        <!-- Logo -->
        <a class="text-white flex items-center space-x-2 px-4" href="#">
            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.024 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.024 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.024 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.024 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.024 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.516.315 1.208.1 1.724-.51z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
            <span class="text-2xl font-extrabold">TailwindCSS</span>
        </a>

        <!-- Nav -->
        <nav>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Home</a>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">About</a>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Services</a>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Contact</a>
        </nav>
    </div>

    <!-- Content -->
    <div class="flex-1 p-10 text-2xl font-bold">
        <button onclick="openSidebar()" class="md:hidden text-gray-500 dark:text-gray-400 focus:outline-none">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </button>
        Content goes here...
    </div>

</div>

<style>
    /* For Glassmorphism effect in dark mode */
    .dark .backdrop-blur-lg {
        backdrop-filter: blur(16px);
    }

    /* For Glassmorphism effect in light mode */
    .backdrop-blur-lg {
        backdrop-filter: blur(16px);
    }
</style>

<script>
    function openSidebar() {
        document.getElementById('sidebar').classList.remove('-translate-x-full');
        document.getElementById('sidebarBackdrop').classList.remove('opacity-0');
        document.getElementById('sidebarBackdrop').classList.add('opacity-50');
    }

    function closeSidebar() {
        document.getElementById('sidebar').classList.add('-translate-x-full');
        document.getElementById('sidebarBackdrop').classList.remove('opacity-50');
        document.getElementById('sidebarBackdrop').classList.add('opacity-0');
    }
</script>
```

사용자 프로필 구성 요소

Neumorphism 디자인 및 다크 모드를 지원하는 반응형 사용자 프로필 구성 요소입니다.

미리보기 열기

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-4">
  <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6 space-y-6">
    <div class="flex flex-col items-center">
      <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark" src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar">
      <h2 class="mt-4 text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-300">Software Engineer</p>
    </div>
    
    <div class="border-t border-b border-gray-300 dark:border-gray-600 py-4 space-y-4">
      <div class="flex justify-between text-gray-700 dark:text-gray-200">
        <span>Location:</span>
        <span>San Francisco, CA</span>
      </div>
      <div class="flex justify-between text-gray-700 dark:text-gray-200">
        <span>Joined:</span>
        <span>January 2023</span>
      </div>
      <div class="flex justify-between text-gray-700 dark:text-gray-200">
        <span>Projects:</span>
        <span>15</span>
      </div>
    </div>
    
    <div class="flex justify-around">
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
      </button>
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
      </button>
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4m-4 4L14 6m-6 6l2-2m0 0l2-2m-3 3L9 9" />
        </svg>
      </button>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #7c7c7c;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #7c7c7c;
  }
</style>

카테고리