모든 구성 요소

Like/Reaction Buttons 컴포넌트

반투명 요소와 흐림 효과가 있는 glassmorphism을 특징으로 하는 복잡한 웹 구성 요소입니다. 여기에는 비즈니스 웹사이트용으로 설계된 여러 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.

                <div class="flex flex-col items-center justify-center p-8 bg-gray-900 dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30">
  <div class="flex items-center space-x-4 mb-6">
    <img src="https://picsum.photos/50/50" alt="User Avatar" class="w-12 h-12 rounded-full border border-white">
    <span class="text-white text-lg font-semibold">Your Name</span>
  </div>

  <span class="text-white text-sm mb-4">How do you feel about this?</span>

  <div class="flex space-x-4">
    <button class="p-4 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-blue-700 dark:to-purple-800 dark:hover:from-blue-800 dark:hover:to-purple-900">
      Like
    </button>
    <button class="p-4 rounded-lg bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-yellow-500 dark:to-orange-600 dark:hover:from-yellow-600 dark:hover:to-orange-700">
      Love
    </button>
    <button class="p-4 rounded-lg bg-gradient-to-r from-red-400 to-pink-500 hover:from-red-500 hover:to-pink-600 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-red-500 dark:to-pink-600 dark:hover:from-red-600 dark:hover:to-pink-700">
      Angry
    </button>
  </div>

  <div class="mt-6 flex items-center space-x-2">
    <span class="text-white">Total Reactions:</span>
    <span class="text-white font-bold">123</span>
  </div>
</div>

Content Display 구성 요소

단순하고 반응이 빠른 콘텐츠 디스플레이 구성 요소는 보색이 있는 브루탈리즘 스타일로 디자인되었습니다. 비즈니스/기업 웹사이트에 적합하며 다크 모드를 지원합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 text-black dark:text-white border border-black dark:border-white p-6 max-w-lg mx-auto">
    <h1 class="text-3xl font-bold mb-4">Company Title</h1>
    <img src="https://picsum.photos/500/300" alt="Content Image" class="w-full rounded-lg mb-4">
    <p class="text-lg mb-6">This is a brief description of the company. Emphasizing clear, bold statements to convey professionalism and competence in a raw form.</p>
    <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
        <div class="">
            <h2 class="text-xl font-semibold">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">CEO</p>
        </div>
    </div>
</div>

Progress Bar 구성 요소

파스텔 색상 구성표가 있는 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소로, 비즈니스/기업 웹 사이트에 적합합니다.

미리보기 열기

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1 text-sm text-white">
            <span>0%</span>
            <span>100%</span>
        </div>
        <div class="h-2 bg-gray-600 rounded">
            <div class="bg-pastel-green-500 h-full rounded" style="width: 70%;"></div>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4">
        <div 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-white">John Doe</span>
        </div>
        <span class="text-gray-400 dark:text-gray-500">In Progress</span>
    </div>
</div>

Layout Components 컴포넌트

레트로/빈티지 디자인 미학으로 스타일링된 반응형 포트폴리오 레이아웃 구성 요소로, 유사한 색 구성표를 활용하고 작업 또는 제품을 선보이기 위한 대화형 기능을 통해 중간 정도의 복잡성을 충족하도록 설계되었습니다.

미리보기 열기

                <div class="min-h-screen bg-gray-800 text-white p-6">
    <header class="mb-6">
        <h1 class="text-4xl font-bold text-center">My Retro Portfolio</h1>
    </header>
    <main class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item 1" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 1</h2>
            <p class="text-gray-300">Description of the project showcasing the retro design style.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item 2" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 2</h2>
            <p class="text-gray-300">Description of the project highlighting nostalgic elements from the past eras.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item 3" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 3</h2>
            <p class="text-gray-300">Description of the project with a vintage flair and interactive features.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=4" alt="Portfolio Item 4" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 4</h2>
            <p class="text-gray-300">Snapshot of the work that resonates with the audience's nostalgia.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=5" alt="Portfolio Item 5" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 5</h2>
            <p class="text-gray-300">Work details that emphasize the vintage aesthetics of the project.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=6" alt="Portfolio Item 6" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 6</h2>
            <p class="text-gray-300">Project insights with a nostalgic touch to engage viewers.</p>
        </div>
    </main>
    <footer class="mt-6 text-center">
        <h3 class="text-lg font-medium">About Me</h3>
        <div class="flex justify-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-gray-500">
        </div>
        <p class="mt-2">Check out my work and get in touch!</p>
    </footer>
</div>

Content Display 구성 요소

어두운 테마의 전자 상거래를 위해 스큐어모픽 스타일로 설계된 Content Display Component입니다. 유쾌한 미학을 위해 유사한 색 구성표를 사용하여 최소한의 요소로 제품을 선보입니다.

미리보기 열기

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
  <div class="flex flex-col justify-center items-center">
    <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/500/300" alt="Product Image">
    <div class="bg-white dark:bg-gray-800 p-4 rounded-b-lg w-full">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Product Name</h2>
      <p class="text-gray-600 dark:text-gray-300">$29.99</p>
      <p class="text-gray-700 dark:text-gray-300">A short description of the product goes here, detailing its features and benefits.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-gray-800 dark:text-gray-200 ml-2">Seller Name</span>
      </div>
      <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-800 dark:hover:bg-blue-600">Add to Cart</button>
    </div>
  </div>
</div>

데이터 시각화 구성 요소

레트로/빈티지 미학과 보색 구성표가 있는 복잡한 대시보드 데이터 시각화 구성 요소입니다.

미리보기 열기

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg dark:bg-gray-900">
    <h1 class="text-3xl font-bold mb-4">Data Visualization Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-red-500 p-4 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">User Statistics</h2>
            <p class="text-lg">Total Users: 1,200</p>
            <p class="text-lg">Active: 850</p>
            <img src="https://picsum.photos/300/200?random=1" alt="User Stats" class="mt-4 rounded-lg" />
        </div>
        <div class="bg-blue-500 p-4 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">Sales Overview</h2>
            <p class="text-lg">Total Sales: $20,000</p>
            <p class="text-lg">Monthly Growth: 15%</p>
            <img src="https://picsum.photos/300/200?random=2" alt="Sales Overview" class="mt-4 rounded-lg" />
        </div>
        <div class="bg-green-500 p-4 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">Performance Goals</h2>
            <p class="text-lg">Gained 300 New Users</p>
            <p class="text-lg">Target Achieved: 95%</p>
            <img src="https://picsum.photos/300/200?random=3" alt="Performance Goals" class="mt-4 rounded-lg" />
        </div>
    </div>
    <div class="mt-6 bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
        <h2 class="text-xl font-semibold">Recent Activities</h2>
        <ul class="list-disc list-inside">
            <li><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> John Doe added a new item</li>
            <li><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> Mike Smith reached 1,000 sales</li>
            <li><img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> Alex Johnson updated their profile</li>
        </ul>
    </div>
</div>

Brutalism 드롭다운 메뉴

비즈니스 웹사이트에 적합한 회색조의 브루탈리즘 스타일 드롭다운 메뉴 구성 요소입니다. 반응형 디자인과 Tailwind CSS를 사용한 다크 모드 지원을 제공하는 복잡한 다중 요소 인터페이스가 특징입니다.

미리보기 열기

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-black dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-0">
        <div class="flex items-center">
          <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
          <span>Account Settings</span>
        </div>
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-1">
         <div class="flex items-center">
          <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
          <span>Support</span>
        </div>
      </a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-2">
           <div class="flex items-center">
            <svg class="h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
            </svg>
            <span>Sign out</span>
          </div>
        </button>
      </form>
    </div>
  </div>
</div>

Product Gallery 구성 요소

브루탈리즘 디자인, 회색조 색 구성표 및 적당한 복잡성을 가진 제품 갤러리 구성 요소입니다. 대시보드 목적으로 설계되었으며 어두운 테마 지원으로 반응합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold mb-6 border-b-4 border-gray-900 dark:border-white pb-2">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="border-4 border-gray-900 dark:border-white p-4 relative">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
        <h3 class="text-xl font-bold mb-2">Product Name 1</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the product goes here. It's a fantastic product that will change your life.</p>
        <span class="text-2xl font-bold absolute top-4 right-4">$199.99</span>
        <button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
      </div>
      <div class="border-4 border-gray-900 dark:border-white p-4 relative">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
        <h3 class="text-xl font-bold mb-2">Product Name 2</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Another amazing product with features you won't believe. Get yours today!</p>
         <span class="text-2xl font-bold absolute top-4 right-4">$249.00</span>
        <button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
      </div>
      <div class="border-4 border-gray-900 dark:border-white p-4 relative">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
        <h3 class="text-xl font-bold mb-2">Product Name 3</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">You won't want to miss out on this one. Limited stock available!</p>
         <span class="text-2xl font-bold absolute top-4 right-4">$99.50</span>
        <button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

Neumorphism Vibrant Heat Maps 구성 요소

Neumorphism 디자인이 적용된 반응형 Heat Maps 구성 요소로, 생생한 색 구성표와 적당한 복잡성을 사용합니다. 다크 모드 지원 및 호버 효과가 포함됩니다. 일반 HTML 및 Tailwind CSS 클래스로 구축되었으며 사용자 정의 Neumorphism 그림자 및 색상 수준을 위한 작은 CSS 블록이 추가되었습니다.

미리보기 열기

                <!-- Heat Maps Component - Neumorphism, Vibrant, Responsive, Dark Mode, No JS -->

<div class="p-4 transition-colors duration-300 neumorphism-container">

  <!-- Component Title -->
  <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Annual Contribution Summary</h3>

  <div class="flex overflow-x-auto pb-4">
    <!-- Month Labels (simplified) -->
    <div class="flex flex-col mr-2 text-sm text-gray-600 dark:text-gray-400">
        <span class="h-5 mb-1"></span> <!-- Spacing for alignment -->
        <span class="h-5 mb-1">Jan</span>
        <span class="h-5 mb-1">Feb</span>
        <span class="h-5 mb-1">Mar</span>
        <span class="h-5 mb-1">Apr</span>
        <span class="h-5 mb-1">May</span>
        <span class="h-5 mb-1">Jun</span>
        <span class="h-5 mb-1">Jul</span>
        <span class="h-5 mb-1">Aug</span>
        <span class="h-5 mb-1">Sep</span>
        <span class="h-5 mb-1">Oct</span>
        <span class="h-5 mb-1">Nov</span>
        <span class="h-5 mb-1">Dec</span>
      </div>


    <!-- Heatmap Grid - Simplified representation of columns (weeks/days) -->
    <div class="grid grid-flow-col grid-rows-12 gap-1">
      <!-- Column representing a week/period -->
      <div class="flex flex-col gap-1">
        <!-- Cells representing days -->
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
      </div>

       <!-- Repeat columns for more data points -->
      <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover-inner cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
         <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
      </div>
        <!-- Add more columns for a fuller year representation -->
         <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
      </div>

       <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover-inner cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
         <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
      </div>
         <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
      </div>

       <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover-inner cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
         <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
      </div>
    </div>
  </div>

  <!-- Legend -->
   <div class="flex justify-end items-center text-sm mt-4 text-gray-600 dark:text-gray-400">
      Less
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-0 ml-2"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-1 ml-1"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-2 ml-1"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-3 ml-1"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-4 ml-1 mr-2"></div>
      More
   </div>

</div>

<!-- Add custom CSS for Neumorphism and color levels -->
<!-- These styles are necessary to achieve the specific Neumorphism effect
     and vibrant color levels not available via standard Tailwind utilities alone. -->
<style>
/* Base background for Neumorphism */
/* Apply this to the body or the container containing the component for the full effect */
/* body {
  background-color: #e0e0e0;
} */

/* Neumorphism container style */
.neumorphism-container {
  background: #e0e0e0; /* Base light mode color */
  border-radius: 12px;
  padding-top: 1rem; /* pt-4 */
  padding-bottom: 1rem; /* pb-4 */
  padding-left: 1rem; /* pl-4 */
   padding-right: 1rem; /* pr-4 */
  /* Convex effect */
  box-shadow: 7px 7px 15px #bebebe,
             -7px -7px 15px #ffffff;
}

/* Dark mode Neumorphism container style */
.dark .neumorphism-container {
  background: #333333; /* Base dark mode color */
   box-shadow: 7px 7px 15px #222222,
              -7px -7px 15px #444444;
}


/* Neumorphism cell base style */
.neumorphism-cell {
  background: #e0e0e0; /* Match container background initially */
   box-shadow: 2px 2px 5px #bebebe,
              -2px -2px 5px #ffffff;
   transition: all 0.1s ease-in-out; /* Smooth transition for hover */
}

/* Dark mode Neumorphism cell base style */
.dark .neumorphism-cell {
   background: #333333; /* Match dark container background */
   box-shadow: 2px 2px 5px #222222,
              -2px -2px 5px #444444;
}


/* Vibrant Color Levels (Light Mode) */
.level-0 { background-color: #e0e0e0; } /* Base/none */
.level-1 { background-color: #a7f3d0; } /* Green 200 */
.level-2 { background-color: #34d399; } /* Green 500 */
.level-3 { background-color: #059669; } /* Green 700 */
.level-4 { background-color: #047857; } /* Green 800 - More vibrant */

/* Vibrant Color Levels (Dark Mode) */
.dark .level-0 { background-color: #333333; } /* Base/none */
.dark .level-1 { background-color: #064e3b; } /* Green 900 dark inverse */
.dark .level-2 { background-color: #065f46; } /* Green 800 dark inverse */
.dark .level-3 { background-color: #047857; } /* Green 700 dark inverse */
.dark .level-4 { background-color: #059669; } /* Green 600 dark inverse */


/* Hover effect: Simulate pressing in */
.neumorphism-cell.hover\:level-0-hover:hover {
  box-shadow: inset 2px 2px 5px #bebebe,
             inset -2px -2px 5px #ffffff;
}
.dark .neumorphism-cell.hover\:level-0-hover:hover {
   box-shadow: inset 2px 2px 5px #222222,
              inset -2px -2px 5px #444444;
}


.neumorphism-cell.hover\:level-1-hover:hover {
   box-shadow: inset 2px 2px 5px #86efac, /* Darker vibrant shadow */
              inset -2px -2px 5px #d1fae5; /* Lighter vibrant highlight */
}
.dark .neumorphism-cell.hover\:level-1-hover:hover {
    box-shadow: inset 2px 2px 5px #059669,
              inset -2px -2px 5px #0f766e;
}


.neumorphism-cell.hover\:level-2-hover:hover {
   box-shadow: inset 2px 2px 5px #10b981,
              inset -2px -2px 5px #6ee7b7;
}
.dark .neumorphism-cell.hover\:level-2-hover:hover {
   box-shadow: inset 2px 2px 5px #047857,
              inset -2px -2px 5px #1d403b;
}

.neumorphism-cell.hover\:level-3-hover:hover {
   box-shadow: inset 2px 2px 5px #047857,
              inset -2px -2px 5px #06d6a0;
}
.dark .neumorphism-cell.hover\:level-3-hover:hover {
   box-shadow: inset 2px 2px 5px #059669,
              inset -2px -2px 5px #022c22;
}

.neumorphism-cell.hover\:level-4-hover:hover {
   box-shadow: inset 2px 2px 5px #065f46,
              inset -2px -2px 5px #08e5a4;
}
.dark .neumorphism-cell.hover\:level-4-hover:hover {
   box-shadow: inset 2px 2px 5px #047857,
              inset -2px -2px 5px #011f17;
}

/* Note: Ensure parent container or body has a background color matching the neumorphism base */
/* For the preview, you might need to add a base background to the html or body */
/*
html, body {
  background-color: #e0e0e0; /* Light mode base *
  transition: background-color 0.3s ease;
}
.dark html, .dark body {
   background-color: #333333; /* Dark mode base *
}
*/

</style>

복합 CAPTCHA 구성 요소

다크 모드와 생생한 색상을 가진 소셜 미디어 애플리케이션을 위한 복잡한 CAPTCHA 구성 요소입니다.

미리보기 열기

                <div class="flex items-center justify-center h-screen bg-gray-900 dark:bg-black p-6">
  <div class="bg-gray-800 dark:bg-gray-900 rounded-lg shadow-xl p-8 w-full max-w-md">
    <h2 class="text-2xl font-bold text-purple-400 mb-6 text-center">CAPTCHA Verification</h2>
    
    <div class="mb-6">
      <label class="block text-yellow-400 text-sm font-semibold mb-2" for="captcha-text">
        Please type the characters you see in the image:
      </label>
      <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/150/60?random=1" alt="CAPTCHA Image" class="rounded">
        <input
          class="shadow appearance-none border border-gray-700 bg-gray-900 dark:bg-gray-800 rounded w-full py-3 px-4 text-teal-400 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-500"
          id="captcha-text"
          type="text"
          placeholder="Enter characters here"
        >
      </div>
    </div>
    
    <div class="mb-6">
      <label class="block text-yellow-400 text-sm font-semibold mb-2" for="captcha-audio">
        Alternatively, listen to the audio and type the numbers:
      </label>
      <div class="flex items-center space-x-4">
        <audio controls class="w-full">
          <source src="your-audio-file.mp3" type="audio/mpeg">
          Your browser does not support the audio element.
        </audio>
      </div>
    </div>

    <div class="mb-6">
        <label class="block text-yellow-400 text-sm font-semibold mb-2" for="captcha-drag-drop">
          Drag and drop the slider to match the image:
        </label>
        <div class="relative w-full h-10 bg-gray-700 rounded-full">
            <div class="absolute top-0 left-0 h-10 w-10 bg-pink-500 rounded-full shadow flex items-center justify-center text-white font-bold cursor-pointer" style="left: 0%;">
                drag
            </div>
            <div class="absolute top-0 right-0 h-10 w-10 bg-purple-500 rounded-full shadow flex items-center justify-center text-white font-bold">
                drop
            </div>
        </div>
    </div>
    
    <div class="flex items-center justify-between">
      <button
        class="bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out transform hover:-translate-y-1"
        type="button"
      >
        Verify
      </button>
      <button
        class="inline-block align-baseline font-bold text-sm text-purple-400 hover:text-purple-600"
        type="button"
      >
        Cannot see or hear?
      </button>
    </div>
  </div>
</div>

카테고리