모든 구성 요소

세션 시간 초과 경고

Session Timeout Alert Component는 Microinteractions 스타일, 반응형 효과 및 어두운 테마를 지원합니다.

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="relative w-full max-w-md p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
        <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Session Timeout</h3>
            <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
                <svg class="w-5 h-5" 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="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        <div class="mt-4">
            <p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically soon.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-sm font-semibold text-gray-900 dark:text-white">Time remaining:</span>
                <span class="text-sm font-mono text-red-600 dark:text-red-400 animation-pulse">0:59</span>
            </div>
        </div>
        <div class="mt-6 flex justify-end space-x-3">
            <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">Cancel</button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none">Extend Session</button>
        </div>
    </div>
</div>

Neumorphic Buttons 컴포넌트

반응형 효과와 Tailwind CSS를 사용하는 어두운 테마 지원이 있는 뉴모픽 디자인 스타일을 특징으로 하는 버튼 구성 요소입니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <h2 class="mb-4 text-2xl font-bold dark:text-white">Neumorphic Buttons</h2>
  <div class="flex space-x-4">
    <button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
      <span class="text-gray-900 dark:text-gray-200">Button 1</span>
      <div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>
    <button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
      <span class="text-gray-900 dark:text-gray-200">Button 2</span>
      <div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>
    <button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
      <span class="text-gray-900 dark:text-gray-200">Button 3</span>
      <div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>
  </div>
</div>

Retro Toast Notifications 구성 요소

반응형 디자인과 다크 모드를 지원하는 레트로 테마의 토스트 알림 구성 요소입니다.

미리보기 열기

                <div class="fixed bottom-5 right-5 space-y-3">
  <!-- Success Toast -->
  <div class="bg-green-600 text-white p-4 rounded-lg shadow-lg font-mono text-sm animate-bounce">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>Success! Your operation was successful.</span>
      </div>
      <button class="ml-4 focus:outline-none">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-red-600 text-white p-4 rounded-lg shadow-lg font-mono text-sm animate-shake">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>Error! Something went wrong.</span>
      </div>
      <button class="ml-4 focus:outline-none">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Info Toast with Avatar -->
  <div class="bg-blue-600 text-white p-4 rounded-lg shadow-lg font-mono text-sm animate-fade-in">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <span>Info: A new message has arrived.</span>
      </div>
      <button class="ml-4 focus:outline-none">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Dark Mode Styles -->
  <style>
    @media (prefers-color-scheme: dark) {
      .dark .bg-green-600 {
        background-color: #059669;
      }
      .dark .bg-red-600 {
        background-color: #dc2626;
      }
      .dark .bg-blue-600 {
        background-color: #2563eb;
      }
      .dark .text-white {
        color: #d1d5db;
      }
    }

    /* Retro Animations */
    @keyframes bounce {
      0%, 100% {
        transform: translateY(-10%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
      50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
      20%, 40%, 60%, 80% { transform: translateX(10px); }
    }

    @keyframes fade-in {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    .animate-bounce {
      animation: bounce 1s infinite;
    }

    .animate-shake {
      animation: shake 0.5s infinite;
    }

    .animate-fade-in {
      animation: fade-in 0.5s ease-out;
    }

    
  </style>
</div>

Chat Window 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 채팅 창 구성 요소입니다. 사용자 정보가 있는 헤더, 들어오고 나가는 메시지가 있는 메시지 영역, 새 메시지를 입력할 수 있는 바닥글이 있습니다. 이미지는 picsum.photos 및 randomuser.me 의 자리 표시자입니다.

미리보기 열기

                <div class="flex flex-col h-screen bg-gray-900 text-gray-200">
  <!-- Header -->
  <header class="flex items-center justify-between p-4 bg-gray-800">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      <h1 class="text-lg font-semibold">Chat User</h1>
    </div>
    <!-- Add any header icons here -->
  </header>

  <!-- Message Area -->
  <div class="flex-1 overflow-y-auto p-4">
    <!-- Incoming Message -->
    <div class="flex items-start mb-4">
      <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Other User Avatar">
      <div class="flex flex-col">
        <div class="bg-gray-700 text-gray-200 p-3 rounded-lg mb-1">
          Hello! How are you?
        </div>
        <span class="text-xs text-gray-500">10:00 AM</span>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex items-end justify-end mb-4">
      <div class="flex flex-col items-end">
        <div class="bg-blue-600 text-white p-3 rounded-lg mb-1">
          I'm good, thanks! How about you?
        </div>
        <span class="text-xs text-gray-500">10:05 AM</span>
      </div>
      <img class="w-8 h-8 rounded-full ml-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    </div>

    <!-- Add more messages here -->

  </div>

  <!-- Footer -->
  <footer class="flex items-center p-4 bg-gray-800">
    <input type="text" class="flex-1 rounded-full px-4 py-2 mr-4 bg-gray-700 text-gray-200 focus:outline-none" placeholder="Type your message...">
    <button class="bg-blue-600 text-white rounded-full p-2">
      <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="M5 12h14m-7-7v14"/>
      </svg>
    </button>
  </footer>
</div>

장바구니에 추가 버튼

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 3D 디자인 Add to Cart 버튼 구성 요소입니다.

미리보기 열기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative group">
        <button class="relative px-6 py-2 font-bold text-white transition-transform duration-300 bg-blue-600 rounded-lg shadow-lg transform hover:scale-105 active:scale-95 dark:bg-blue-700">
            <span class="absolute top-0 left-0 w-full h-full rounded-lg bg-blue-500 opacity-60 transition-opacity duration-300 group-hover:opacity-100"></span>
            <span class="relative z-10">Add to Cart</span>
        </button>
        <div class="absolute right-0 -top-1 -mr-4 z-0 w-10 h-10 bg-blue-200 rounded-full shadow-lg transform scale-75 transition-all duration-300 group-hover:scale-100"></div>
    </div>
</div>

브루탈리스트필터컴포넌트

브루탈리즘 스타일의 필터 구성 요소로, 높은 대비, 대담한 타이포그래피, 특이한 간격이 있습니다. 여기에는 확인란, 라디오 버튼 및 가격대 슬라이더가 포함됩니다. 반응형 효과는 미디어 쿼리와 유체 단위를 통해 달성됩니다. 다크 모드는 CSS를 통해 지원됩니다.

미리보기 열기

                <div class='bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white p-6 max-w-sm mx-auto font-mono'>

스큐어모픽 소셜 공유 버튼

Tailwind CSS를 사용하여 스큐어모픽 디자인으로 스타일링된 소셜 공유 버튼 세트입니다. 그라데이션, 그림자 및 호버/활성 효과를 제공하여 물리적 버튼을 시뮬레이션합니다. 구성 요소는 반응형이며 CSS를 통한 다크 모드 지원을 포함합니다. Facebook, Twitter, LinkedIn 및 일반 링크 복사 버튼에 대한 버튼이 포함되어 있습니다.

미리보기 열기

                <div class="flex flex-wrap gap-4 p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl">
  <!-- Facebook Button -->
  <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-blue-500 to-blue-700 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-blue-700 dark:to-blue-900 dark:shadow-blue-900/50 dark:hover:shadow-blue-900/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"></path></svg>
    Share on Facebook
  </a>

  <!-- Twitter Button -->
  <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-cyan-400 to-cyan-600 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-cyan-600 dark:to-cyan-800 dark:shadow-cyan-800/50 dark:hover:shadow-cyan-800/70">
     <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26L21.69 17.25h-2.918l-5.451-5.66L8.29 17.25H1.997l7.226-8.26L2.1 2.25h3.308l5.249 5.4l5.45-5.4zM18.088 19.5H22V17.25h-1.774c-.381 0-.736-.188-.958-.548l-3.296-5.15h-2.35l4.739 7.4H18.088zM6.667 5.5c-.381 0-.736.188-.958.548L2.413 11.2h2.35l4.74-7.4zm13.5-3.25z"></path></svg>
    Share on Twitter
  </a>

   <!-- LinkedIn Button -->
   <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-blue-700 to-blue-900 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-blue-900 dark:to-blue-950 dark:shadow-blue-950/50 dark:hover:shadow-blue-950/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 0H2v24h20V0zM8 19H5V8h3v11zM6.5 6.31C5.55 6.31 4.8 5.56 4.8 4.6S5.55 2.9 6.5 2.9s1.7 0.76 1.7 1.7S7.45 6.31 6.5 6.31zm15.5 12.69h-3v-5.6c0-1.3-.5-2.6-2-2.6-1.2 0-2 0.8-2 2v5.6h-3V8h3v1.5c0.5-0.8 1.6-1.5 3-1.5 2.5 0 4 1.6 4 5.8v6.2z"></path></svg>
    Share on LinkedIn
  </a>

  <!-- Generic Share Button (Copy Link) -->
   <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-teal-500 to-teal-700 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-teal-700 dark:to-teal-900 dark:shadow-teal-900/50 dark:hover:shadow-teal-900/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 16.685v-5.008l4-3.997-4-3.997v-5.008h-8v5.005l4 3.994-4 3.994v5.005h8z m-6-1.769v-5.005l-4-3.994 4-3.994v-5.005h-8v5.008l4 3.997-4 3.997v5.008h8z"></path></svg>
    Copy Link
  </a>
</div>

Progress Indicators 구성 요소

반응형 효과와 어두운 테마를 지원하는 Tailwind CSS를 사용하는 레트로/빈티지 스타일의 진행 표시기 구성 요소입니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">
        Retro Progress Indicators
    </h1>
    <div class="w-full max-w-lg">
        <!-- Progress Bar -->
        <div class="mb-6">
            <div class="relative pt-1">
                <div class="flex mb-2 items-center justify-between">
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Loading...</div>
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">80%</div>
                </div>
                <div class="flex h-2 mb-4 bg-gray-200 rounded dark:bg-gray-700">
                    <div class="bg-yellow-500 h-full rounded" style="width: 80%"></div>
                </div>
            </div>
        </div>
        <!-- Circular Progress Indicator -->
        <div class="flex items-center justify-center mb-6">
            <div class="relative w-24 h-24">
                <img src="https://picsum.photos/seed/circularprogress/300/300" class="rounded-full shadow-lg" alt="Circular Progress" /> 
                <div class="absolute inset-0 flex items-center justify-center text-xl font-bold text-yellow-500">
                    80%
                </div>
            </div>
        </div>
        <!-- Step Indicators -->
        <div class="flex justify-between w-full text-center">
            <div>
                <div class="w-4 h-4 bg-yellow-500 rounded-full mx-auto mb-2"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 1</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 2</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 3</div>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-full w-16 h-16" alt="User Avatar" />
        <div class="text-center mt-2 text-sm text-gray-600 dark:text-gray-300">John Doe</div>
    </div>
</div>

Heat Maps 구성 요소

글래스모피즘 효과로 디자인된 반응형 히트 맵 구성 요소로, 젖빛 유리와 같은 반투명 요소와 Tailwind CSS를 활용하는 어두운 테마 스타일을 지원합니다.

미리보기 열기

                <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 backdrop-blur-lg rounded-xl shadow-lg p-6 md:w-1/2 w-full">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Component</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/200" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/201" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/202" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/203" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                <p class="text-gray-800 dark:text-gray-200 font-medium">User 1</p>
            </div>
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                <p class="text-gray-800 dark:text-gray-200 font-medium">User 2</p>
            </div>
        </div>
    </div>
</div>

Footer Navigation 구성 요소

80년대와 90년대의 미학에서 영감을 받은 레트로/빈티지 스타일로 디자인된 바닥글 탐색 구성 요소입니다. 어두운 테마를 지원하며 완벽하게 반응합니다.

미리보기 열기

                <footer class="bg-gray-800 text-white py-8 mt-10">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="text-center md:text-left">
            <h2 class="text-2xl font-bold mb-2">Stay Connected!</h2>
            <p>Follow us on our social media channels:</p>
            <div class="flex justify-center md:justify-start mt-4 space-x-4">
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full">
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full">
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=3" alt="Instagram" class="rounded-full">
                </a>
            </div>
        </div>
        <nav class="mt-6 md:mt-0">
            <ul class="flex flex-col md:flex-row space-x-4">
                <li><a href="#" class="hover:text-gray-400 transition">Home</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">About</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">Services</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="text-center mt-6">
        <p class="text-gray-500 text-sm">&copy; 2023 Your Company. All rights reserved.</p>
    </div>
</footer>

카테고리