검색 구성 요소

모든 구성 요소

사용 가능한 모든 Tailwind CSS 구성 요소 찾아보기

Carousel Slider 구성 요소

Tailwind CSS를 사용하여 다크 모드에서 전자 상거래를 위해 설계된 간단한 캐러셀 슬라이더 구성 요소입니다.

                <div class="relative w-full max-w-lg mx-auto">
    <div class="overflow-hidden rounded-lg shadow-lg">
        <div class="carousel-inner dark:bg-gray-800 bg-gray-100">
            <div class="carousel-item active">
                <img src="https://picsum.photos/800/400?1" alt="Product 1" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 1</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 1</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?2" alt="Product 2" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 2</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 2</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?3" alt="Product 3" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 3</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 3</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
        </div>

        <!-- Carousel controls (optional) -->
        <button class="absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
            &#10094;
        </button>
        <button class="absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
            &#10095;
        </button>
    </div>
</div>

<style>
.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
}
</style>

Neumorphism Navigation 컴포넌트

Neumorphism Navigation Component는 포트폴리오 웹 사이트에 최적화되어 있습니다. 여러 대화형 요소가 있는 복잡한 레이아웃, 반응형 디자인, Tailwind CSS를 사용한 다크 모드 지원이 특징입니다. 색 구성표는 유사합니다.

열다 미리 보기

                <nav class="p-6 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="container mx-auto flex items-center justify-between">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Your Name</span>
    </div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 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>
    </div>
  </div>
  <div class="mobile-menu hidden md:hidden mt-4 space-y-2">
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
  </div>
</nav>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }
    .shadow-neumorphic-text-light {
    text-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffffff;
  }
     .dark .shadow-neumorphic-text-dark {
    text-shadow: 2px 2px 5px #333333, -2px -2px 5px #555555;
  }
</style>

제품 비교 구성 요소 - Retro Corporate Style

단색 블루 색 구성표를 사용하여 레트로/빈티지 기업 미학을 가미한 반응형 제품 비교 구성 요소입니다. 다양한 인터랙티브 요소와 다크 모드 지원이 특징입니다. 이 디자인에는 80/90년대에서 영감을 받은 기하학적 패턴, 올드스쿨 타이포그래피, 픽셀과 같은 액센트가 있는 레트로 스타일의 카드가 포함됩니다. 전문성을 유지하면서 향수를 불러일으키는 디자인으로 눈에 띄고자 하는 비즈니스 웹사이트에 적합합니다.

열다 미리 보기

                <!-- Product Comparison Component with Retro/Vintage 80s/90s Corporate Style -->
<div class="bg-blue-50 dark:bg-blue-900 py-12 px-4 font-mono">
  <!-- Retro Header with pixelated border -->
  <div class="max-w-7xl mx-auto mb-12">
    <div class="border-4 border-blue-600 dark:border-blue-400 p-4 bg-white dark:bg-blue-800 shadow-lg relative overflow-hidden">
      <div class="absolute top-0 right-0 w-24 h-24 bg-blue-300 dark:bg-blue-500 transform rotate-45 translate-x-12 -translate-y-12"></div>
      <h2 class="text-4xl font-bold tracking-wider text-blue-800 dark:text-blue-200 uppercase text-center mb-2 relative z-10">PRODUCT COMPARISON</h2>
      <p class="text-blue-600 dark:text-blue-300 text-center tracking-wide relative z-10">Select the perfect solution for your business needs</p>
      <!-- Pixelated line decoration -->
      <div class="flex justify-center mt-4">
        <div class="flex space-x-1">
          <div class="w-3 h-3 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-3 h-3 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-3 h-3 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-3 h-3 bg-blue-600 dark:bg-blue-200"></div>
          <div class="w-12 h-3 bg-blue-700 dark:bg-blue-100"></div>
          <div class="w-3 h-3 bg-blue-600 dark:bg-blue-200"></div>
          <div class="w-3 h-3 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-3 h-3 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-3 h-3 bg-blue-300 dark:bg-blue-500"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Filter Controls with Retro Style -->
  <div class="max-w-7xl mx-auto mb-10">
    <div class="bg-blue-100 dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500 p-4 rounded grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
      <div class="space-y-2">
        <label class="block text-blue-800 dark:text-blue-200 font-bold uppercase text-sm tracking-wider mb-1">Filter By Category</label>
        <select class="w-full bg-white dark:bg-blue-700 border-2 border-blue-500 dark:border-blue-400 text-blue-700 dark:text-blue-100 font-mono p-2 focus:ring-2 focus:ring-blue-600 focus:border-transparent">
          <option>All Categories</option>
          <option>Basic Solutions</option>
          <option>Advanced Solutions</option>
          <option>Enterprise Solutions</option>
        </select>
      </div>
      
      <div class="space-y-2">
        <label class="block text-blue-800 dark:text-blue-200 font-bold uppercase text-sm tracking-wider mb-1">Sort By</label>
        <select class="w-full bg-white dark:bg-blue-700 border-2 border-blue-500 dark:border-blue-400 text-blue-700 dark:text-blue-100 font-mono p-2 focus:ring-2 focus:ring-blue-600 focus:border-transparent">
          <option>Price: Low to High</option>
          <option>Price: High to Low</option>
          <option>Popularity</option>
          <option>Features</option>
        </select>
      </div>
      
      <div class="space-y-2">
        <label class="block text-blue-800 dark:text-blue-200 font-bold uppercase text-sm tracking-wider mb-1">View Style</label>
        <div class="flex space-x-4">
          <button class="flex-1 py-2 bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white font-bold border-2 border-blue-800 dark:border-blue-300 shadow-md">
            <span class="block text-xs">Grid</span>
          </button>
          <button class="flex-1 py-2 bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-600 text-blue-800 dark:text-blue-100 font-bold border-2 border-blue-400 dark:border-blue-500 shadow-md">
            <span class="block text-xs">List</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Product Comparison Grid -->
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Product 1 -->
    <div class="bg-white dark:bg-blue-800 border-4 border-blue-400 dark:border-blue-500 shadow-lg transform hover:scale-105 transition-all duration-300">
      <!-- Retro Header with zigzag pattern -->
      <div class="bg-blue-300 dark:bg-blue-600 p-4 relative">
        <div class="absolute bottom-0 left-0 right-0 h-2 flex">
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
        </div>
        <h3 class="text-blue-900 dark:text-white text-2xl font-bold text-center uppercase tracking-wider mb-1">BASIC PLAN</h3>
        <div class="text-blue-700 dark:text-blue-200 text-center font-bold">Starter Solution</div>
      </div>
      
      <div class="p-6">
        <div class="text-center mb-6">
          <span class="text-4xl font-bold text-blue-800 dark:text-blue-200">$199</span>
          <span class="text-blue-600 dark:text-blue-300">/month</span>
        </div>
        
        <img src="https://picsum.photos/seed/basic/400/200" alt="Basic Plan" class="w-full h-40 object-cover mb-6 border-2 border-blue-400 dark:border-blue-500">
        
        <ul class="space-y-3 mb-8">
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">5 User Licenses</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">10GB Storage</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Basic Analytics</span>
          </li>
          <li class="flex items-start opacity-50">
            <div class="w-5 h-5 bg-blue-300 dark:bg-blue-600 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Advanced Features</span>
          </li>
          <li class="flex items-start opacity-50">
            <div class="w-5 h-5 bg-blue-300 dark:bg-blue-600 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Premium Support</span>
          </li>
        </ul>
        
        <!-- Satisfaction Rating -->
        <div class="mb-6">
          <div class="text-sm text-blue-700 dark:text-blue-300 font-bold uppercase tracking-wider mb-1">Customer Satisfaction</div>
          <div class="flex">
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-200 dark:bg-blue-700"></div>
          </div>
        </div>
        
        <div class="space-y-4">
          <button class="w-full p-3 bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white font-bold border-2 border-blue-800 dark:border-blue-300 uppercase tracking-wider shadow-md">
            SELECT PLAN
          </button>
          <button class="w-full p-2 bg-transparent border-2 border-blue-400 dark:border-blue-500 text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-700 font-bold uppercase tracking-wider text-sm">
            VIEW DETAILS
          </button>
        </div>
      </div>
      
      <!-- Retro Footer Decoration -->
      <div class="h-4 bg-gradient-to-r from-blue-300 via-blue-400 to-blue-300 dark:from-blue-600 dark:via-blue-500 dark:to-blue-600"></div>
    </div>
    
    <!-- Product 2 (Featured) -->
    <div class="bg-white dark:bg-blue-800 border-4 border-blue-600 dark:border-blue-300 shadow-xl transform hover:scale-105 transition-all duration-300 relative -mt-4 md:-mt-8">
      <!-- "MOST POPULAR" badge -->
      <div class="absolute -top-4 left-0 right-0 flex justify-center">
        <div class="bg-blue-600 dark:bg-blue-400 text-white dark:text-blue-900 py-1 px-6 text-sm font-bold uppercase tracking-wider shadow-lg">
          MOST POPULAR
        </div>
      </div>
      
      <!-- Retro Header with zigzag pattern -->
      <div class="bg-blue-500 dark:bg-blue-400 p-4 relative">
        <div class="absolute bottom-0 left-0 right-0 h-2 flex">
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
        </div>
        <h3 class="text-white dark:text-blue-900 text-2xl font-bold text-center uppercase tracking-wider mb-1">PRO PLAN</h3>
        <div class="text-blue-100 dark:text-blue-700 text-center font-bold">Business Solution</div>
      </div>
      
      <div class="p-6">
        <div class="text-center mb-6">
          <span class="text-4xl font-bold text-blue-800 dark:text-blue-200">$499</span>
          <span class="text-blue-600 dark:text-blue-300">/month</span>
        </div>
        
        <img src="https://picsum.photos/seed/pro/400/200" alt="Pro Plan" class="w-full h-40 object-cover mb-6 border-2 border-blue-400 dark:border-blue-500">
        
        <ul class="space-y-3 mb-8">
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">25 User Licenses</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">100GB Storage</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Advanced Analytics</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Advanced Features</span>
          </li>
          <li class="flex items-start opacity-50">
            <div class="w-5 h-5 bg-blue-300 dark:bg-blue-600 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Premium Support</span>
          </li>
        </ul>
        
        <!-- Satisfaction Rating -->
        <div class="mb-6">
          <div class="text-sm text-blue-700 dark:text-blue-300 font-bold uppercase tracking-wider mb-1">Customer Satisfaction</div>
          <div class="flex">
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
          </div>
        </div>
        
        <div class="space-y-4">
          <button class="w-full p-3 bg-blue-700 dark:bg-blue-300 hover:bg-blue-800 dark:hover:bg-blue-200 text-white dark:text-blue-900 font-bold border-2 border-blue-900 dark:border-blue-400 uppercase tracking-wider shadow-md">
            SELECT PLAN
          </button>
          <button class="w-full p-2 bg-transparent border-2 border-blue-500 dark:border-blue-400 text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-700 font-bold uppercase tracking-wider text-sm">
            VIEW DETAILS
          </button>
        </div>
      </div>
      
      <!-- Retro Footer Decoration -->
      <div class="h-4 bg-gradient-to-r from-blue-500 via-blue-600 to-blue-500 dark:from-blue-400 dark:via-blue-300 dark:to-blue-400"></div>
    </div>
    
    <!-- Product 3 -->
    <div class="bg-white dark:bg-blue-800 border-4 border-blue-400 dark:border-blue-500 shadow-lg transform hover:scale-105 transition-all duration-300">
      <!-- Retro Header with zigzag pattern -->
      <div class="bg-blue-300 dark:bg-blue-600 p-4 relative">
        <div class="absolute bottom-0 left-0 right-0 h-2 flex">
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
        </div>
        <h3 class="text-blue-900 dark:text-white text-2xl font-bold text-center uppercase tracking-wider mb-1">ENTERPRISE</h3>
        <div class="text-blue-700 dark:text-blue-200 text-center font-bold">Complete Solution</div>
      </div>
      
      <div class="p-6">
        <div class="text-center mb-6">
          <span class="text-4xl font-bold text-blue-800 dark:text-blue-200">$999</span>
          <span class="text-blue-600 dark:text-blue-300">/month</span>
        </div>
        
        <img src="https://picsum.photos/seed/enterprise/400/200" alt="Enterprise Plan" class="w-full h-40 object-cover mb-6 border-2 border-blue-400 dark:border-blue-500">
        
        <ul class="space-y-3 mb-8">
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Unlimited Users</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">1TB Storage</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Enterprise Analytics</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Advanced Features</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Premium Support 24/7</span>
          </li>
        </ul>
        
        <!-- Satisfaction Rating -->
        <div class="mb-6">
          <div class="text-sm text-blue-700 dark:text-blue-300 font-bold uppercase tracking-wider mb-1">Customer Satisfaction</div>
          <div class="flex">
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
          </div>
        </div>
        
        <div class="space-y-4">
          <button class="w-full p-3 bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white font-bold border-2 border-blue-800 dark:border-blue-300 uppercase tracking-wider shadow-md">
            SELECT PLAN
          </button>
          <button class="w-full p-2 bg-transparent border-2 border-blue-400 dark:border-blue-500 text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-700 font-bold uppercase tracking-wider text-sm">
            VIEW DETAILS
          </button>
        </div>
      </div>
      
      <!-- Retro Footer Decoration -->
      <div class="h-4 bg-gradient-to-r from-blue-300 via-blue-400 to-blue-300 dark:from-blue-600 dark:via-blue-500 dark:to-blue-600"></div>
    </div>
  </div>

  <!-- Comparison Table -->
  <div class="max-w-7xl mx-auto mt-16 bg-white dark:bg-blue-800 border-4 border-blue-500 dark:border-blue-400 shadow-lg overflow-x-auto">
    <div class="text-center py-6 bg-blue-200 dark:bg-blue-700 uppercase tracking-wider font-bold text-blue-800 dark:text-blue-100 text-2xl">
      Detailed Comparison
    </div>
    <table class="w-full border-collapse">
      <thead class="bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100">
        <tr>
          <th class="p-4 border-b-2 border-r-2 border-blue-300 dark:border-blue-600 text-left">Features</th>
          <th class="p-4 border-b-2 border-r-2 border-blue-300 dark:border-blue-600 text-center">Basic Plan</th>
          <th class="p-4 border-b-2 border-r-2 border-blue-300 dark:border-blue-600 text-center bg-blue-200 dark:bg-blue-600">Pro Plan</th>
          <th class="p-4 border-b-2 border-blue-300 dark:border-blue-600 text-center">Enterprise</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b-2 border-blue-200 dark:border-blue-700">
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">User Licenses</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">5 Users</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">25 Users</td>
          <td class="p-4 text-center">Unlimited</td>
        </tr>
        <tr class="border-b-2 border-blue-200 dark:border-blue-700">
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Storage Capacity</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">10GB</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">100GB</td>
          <td class="p-4 text-center">1TB</td>
        </tr>
        <tr class="border-b-2 border-blue-200 dark:border-blue-700">
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Analytics</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">Basic</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">Advanced</td>
          <td class="p-4 text-center">Enterprise</td>
        </tr>
        <tr class="border-b-2 border-blue-200 dark:border-blue-700">
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Support</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">Email Only</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">Email & Phone</td>
          <td class="p-4 text-center">24/7 Priority</td>
        </tr>
        <tr>
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Custom Reports</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">
            <div class="inline-block w-6 h-6 bg-blue-200 dark:bg-blue-700 relative">
              <div class="absolute inset-0 transform rotate-45 bg-blue-500 dark:bg-blue-400" style="clip-path: polygon(0 0, 100% 100%, 0 100%);"></div>
            </div>
          </td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">
            <div class="inline-block w-6 h-6 bg-blue-600 dark:bg-blue-300"></div>
          </td>
          <td class="p-4 text-center">
            <div class="inline-block w-6 h-6 bg-blue-600 dark:bg-blue-300"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Customer Testimonial with Retro Style -->
  <div class="max-w-5xl mx-auto mt-16 bg-gradient-to-r from-blue-100 via-blue-200 to-blue-100 dark:from-blue-700 dark:via-blue-600 dark:to-blue-700 p-1">
    <div class="bg-white dark:bg-blue-800 p-8">
      <div class="flex flex-col md:flex-row items-center">
        <div class="mb-6 md:mb-0 md:mr-8 flex-shrink-0">
          <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="Customer" class="w-24 h-24 rounded-full border-4 border-blue-400 dark:border-blue-500">
        </div>
        <div>
          <p class="text-blue-800 dark:text-blue-200 italic mb-4">"This product comparison tool helped our company make the right decision for our business needs. The intuitive interface and detailed feature breakdown made it easy to understand the value proposition of each plan."</p>
          <div class="font-bold text-blue-600 dark:text-blue-300">Sarah Johnson</div>
          <div class="text-blue-500 dark:text-blue-400 text-sm">CTO, TechCorp Industries</div>
        </div>
      </div>
    </div>
  </div>

  <!-- FAQ Section -->
  <div class="max-w-5xl mx-auto mt-16 mb-16">
    <h3 class="text-2xl font-bold text-blue-800 dark:text-blue-200 mb-6 text-center uppercase tracking-wider">Frequently Asked Questions</h3>
    
    <div class="space-y-4">
      <div class="bg-white dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500">
        <div class="p-4 cursor-pointer flex justify-between items-center bg-blue-100 dark:bg-blue-700">
          <h4 class="font-bold text-blue-800 dark:text-blue-200">Can I upgrade or downgrade my plan later?</h4>
          <span class="text-blue-600 dark:text-blue-300 text-2xl">+</span>
        </div>
        <div class="p-4 border-t-2 border-blue-200 dark:border-blue-600">
          <p class="text-blue-700 dark:text-blue-300">Yes, you can easily upgrade or downgrade your plan at any time. Changes will be reflected on your next billing cycle.</p>
        </div>
      </div>
      
      <div class="bg-white dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500">
        <div class="p-4 cursor-pointer flex justify-between items-center bg-blue-100 dark:bg-blue-700">
          <h4 class="font-bold text-blue-800 dark:text-blue-200">Is there a free trial available?</h4>
          <span class="text-blue-600 dark:text-blue-300 text-2xl">+</span>
        </div>
        <div class="p-4 border-t-2 border-blue-200 dark:border-blue-600">
          <p class="text-blue-700 dark:text-blue-300">We offer a 14-day free trial on all our plans. No credit card required to start your trial period.</p>
        </div>
      </div>
      
      <div class="bg-white dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500">
        <div class="p-4 cursor-pointer flex justify-between items-center bg-blue-100 dark:bg-blue-700">
          <h4 class="font-bold text-blue-800 dark:text-blue-200">Do you offer custom enterprise solutions?</h4>
          <span class="text-blue-600 dark:text-blue-300 text-2xl">+</span>
        </div>
        <div class="p-4 border-t-2 border-blue-200 dark:border-blue-600">
          <p class="text-blue-700 dark:text-blue-300">Yes, we can tailor our Enterprise plan to meet your specific business requirements. Contact our sales team for a custom quote.</p>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Retro Footer -->
  <div class="max-w-7xl mx-auto mt-8 bg-blue-800 dark:bg-blue-950 text-white p-4 text-center">
    <div class="flex space-x-1 justify-center mb-4">
      <div class="w-3 h-3 bg-blue-500 dark:bg-blue-400"></div>
      <div class="w-3 h-3 bg-blue-400 dark:bg-blue-500"></div>
      <div class="w-3 h-3 bg-blue-300 dark:bg-blue-600"></div>
      <div class="w-20 h-3 bg-blue-200 dark:bg-blue-700"></div>
      <div class="w-3 h-3 bg-blue-300 dark:bg-blue-600"></div>
      <div class="w-3 h-3 bg-blue-400 dark:bg-blue-500"></div>
      <div class="w-3 h-3 bg-blue-500 dark:bg-blue-400"></div>
    </div>
    <p class="uppercase tracking-widest text-sm font-bold">© 2023 Your Professional Business</p>
  </div>
</div>

필터컴포넌트뉴모피즘

비즈니스/기업 웹 사이트용으로 설계된 회색조 색 구성표를 사용하여 Neumorphism 소프트 UI로 스타일이 지정된 간단한 반응형 필터 구성 요소입니다. 이 구성 요소는 다크 모드를 지원하며 JavaScript 없이 Tailwind CSS로 빌드됩니다.

열다 미리 보기

                <!-- Filters Component - Neumorphism Style, Grayscale, Responsive, Dark Mode -->
<section
  aria-label="Filter section"
  class="bg-gray-100 dark:bg-gray-800 p-6 rounded-xl flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)]"
>
  <!-- Search Input -->
  <div class="flex-1">
    <label for="filter-search" class="sr-only">Search</label>
    <input
      type="text"
      id="filter-search"
      placeholder="Search..."
      class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    />
  </div>
  <!-- Category Select -->
  <div class="flex-1">
    <label for="filter-category" class="sr-only">Category</label>
    <select
      id="filter-category"
      class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    >
      <option>All Categories</option>
      <option>Marketing</option>
      <option>Finance</option>
      <option>HR</option>
    </select>
  </div>
  <!-- Status Select -->
  <div class="flex-1">
    <label for="filter-status" class="sr-only">Status</label>
    <select
      id="filter-status"
      class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    >
      <option>All Status</option>
      <option>Active</option>
      <option>Inactive</option>
    </select>
  </div>
  <!-- Apply Button -->
  <div>
    <button
      type="button"
      class="px-6 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    >
      Apply Filters
    </button>
  </div>
</section>

3D 쇼핑 카트 구성 요소

시각적으로 눈에 띄는 쇼핑 카트 구성 요소로, 깊이와 참여를 유도하는 3D 디자인 요소가 있습니다. 시각적 흥미를 위해 트라이어드 색 구성표(기본 파란색, 생생한 빨간색 및 호박색 노란색)를 사용합니다. 이 복잡한 인터페이스에는 이미지, 수량 제어, 가격 요약 및 3D 움직임을 시뮬레이션하는 호버 효과가 있는 제품 목록이 포함됩니다. 어두운 테마 지원으로 완벽하게 반응합니다. 이 구성 요소는 독자가 콘텐츠를 소비하면서 권장 제품을 구매할 수 있는 콘텐츠/블로그 환경을 위해 설계되었습니다.

열다 미리 보기

                <!-- 3D Shopping Cart Component with Triadic Color Scheme -->
<div class="w-full max-w-4xl mx-auto bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-2xl transform transition-all duration-300 hover:scale-[1.02] perspective-1000">
  <!-- Cart Header with 3D Effect -->
  <div class="relative bg-blue-600 dark:bg-blue-800 text-white p-6 transform hover:skew-x-1 transition-transform duration-200">
    <div class="flex justify-between items-center">
      <h2 class="text-2xl font-bold transform translate-z-4 relative z-10">Shopping Cart</h2>
      <span class="bg-amber-500 dark:bg-amber-600 px-4 py-2 rounded-full font-bold shadow-lg transform hover:-translate-y-1 hover:shadow-xl transition-all duration-300">4 Items</span>
    </div>
    <!-- Decorative 3D Elements -->
    <div class="absolute -bottom-3 left-0 w-full h-3 bg-blue-700 dark:bg-blue-900 skew-x-2 transform-gpu"></div>
  </div>

  <!-- Cart Items Container -->
  <div class="divide-y divide-gray-200 dark:divide-gray-700">
    <!-- Product 1 -->
    <div class="p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 transform hover:-translate-y-1">
      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <!-- Product Image with 3D Effect -->
        <div class="relative w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0">
          <img src="https://picsum.photos/seed/prod1/200/200" alt="Product" class="w-full h-full object-cover rounded-lg shadow-md transform transition-all duration-300 hover:rotate-2 hover:scale-110 z-10" />
          <div class="absolute inset-0 bg-amber-500 dark:bg-amber-600 opacity-30 rounded-lg transform translate-x-1 translate-y-1 -z-10"></div>
        </div>
        
        <!-- Product Details -->
        <div class="flex-grow space-y-2">
          <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start">
            <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">Premium Headphones</h3>
            <div class="text-lg font-bold text-red-600 dark:text-red-400">$129.99</div>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-300">Noise-cancelling wireless headphones with premium sound quality</p>
          
          <!-- Interactive Elements -->
          <div class="flex flex-wrap gap-4 mt-3 items-center">
            <!-- Quantity Selector with 3D effect -->
            <div class="flex items-center space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-inner p-1">
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">-</button>
              <span class="w-8 text-center font-medium text-gray-800 dark:text-gray-200">1</span>
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">+</button>
            </div>
            
            <!-- Save and Remove Buttons -->
            <button class="text-amber-600 dark:text-amber-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Save for Later</button>
            <button class="text-red-600 dark:text-red-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Remove</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Product 2 -->
    <div class="p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 transform hover:-translate-y-1">
      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <!-- Product Image with 3D Effect -->
        <div class="relative w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0">
          <img src="https://picsum.photos/seed/prod2/200/200" alt="Product" class="w-full h-full object-cover rounded-lg shadow-md transform transition-all duration-300 hover:rotate-2 hover:scale-110 z-10" />
          <div class="absolute inset-0 bg-red-500 dark:bg-red-600 opacity-30 rounded-lg transform translate-x-1 translate-y-1 -z-10"></div>
        </div>
        
        <!-- Product Details -->
        <div class="flex-grow space-y-2">
          <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start">
            <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">Smart Watch Pro</h3>
            <div class="text-lg font-bold text-red-600 dark:text-red-400">$249.99</div>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-300">Fitness tracker with heart rate monitor and GPS</p>
          
          <!-- Interactive Elements -->
          <div class="flex flex-wrap gap-4 mt-3 items-center">
            <!-- Quantity Selector with 3D effect -->
            <div class="flex items-center space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-inner p-1">
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">-</button>
              <span class="w-8 text-center font-medium text-gray-800 dark:text-gray-200">2</span>
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">+</button>
            </div>
            
            <!-- Save and Remove Buttons -->
            <button class="text-amber-600 dark:text-amber-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Save for Later</button>
            <button class="text-red-600 dark:text-red-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Remove</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Product 3 -->
    <div class="p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 transform hover:-translate-y-1">
      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <!-- Product Image with 3D Effect -->
        <div class="relative w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0">
          <img src="https://picsum.photos/seed/prod3/200/200" alt="Product" class="w-full h-full object-cover rounded-lg shadow-md transform transition-all duration-300 hover:rotate-2 hover:scale-110 z-10" />
          <div class="absolute inset-0 bg-blue-500 dark:bg-blue-600 opacity-30 rounded-lg transform translate-x-1 translate-y-1 -z-10"></div>
        </div>
        
        <!-- Product Details -->
        <div class="flex-grow space-y-2">
          <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start">
            <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">Digital Camera</h3>
            <div class="text-lg font-bold text-red-600 dark:text-red-400">$349.99</div>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-300">20MP digital camera with 4K video recording and image stabilization</p>
          
          <!-- Interactive Elements -->
          <div class="flex flex-wrap gap-4 mt-3 items-center">
            <!-- Quantity Selector with 3D effect -->
            <div class="flex items-center space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-inner p-1">
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">-</button>
              <span class="w-8 text-center font-medium text-gray-800 dark:text-gray-200">1</span>
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">+</button>
            </div>
            
            <!-- Save and Remove Buttons -->
            <button class="text-amber-600 dark:text-amber-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Save for Later</button>
            <button class="text-red-600 dark:text-red-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Remove</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Cart Summary with 3D Effect -->
  <div class="relative bg-gray-50 dark:bg-gray-800 p-6 transform hover:skew-x-1 transition-transform duration-300">
    <!-- Decorative 3D Element -->
    <div class="absolute -top-3 left-0 w-full h-3 bg-gray-200 dark:bg-gray-700 skew-x-2 transform-gpu"></div>
    
    <div class="space-y-4">
      <!-- Pricing Summary -->
      <div class="space-y-2">
        <div class="flex justify-between text-gray-600 dark:text-gray-300">
          <span>Subtotal</span>
          <span>$729.97</span>
        </div>
        <div class="flex justify-between text-gray-600 dark:text-gray-300">
          <span>Shipping</span>
          <span>$9.99</span>
        </div>
        <div class="flex justify-between text-gray-600 dark:text-gray-300">
          <span>Tax</span>
          <span>$58.40</span>
        </div>
        <div class="h-px bg-gray-200 dark:bg-gray-700 my-2"></div>
        <div class="flex justify-between font-bold text-lg text-gray-900 dark:text-white">
          <span>Total</span>
          <span>$798.36</span>
        </div>
      </div>
      
      <!-- Promo Code Input -->
      <div class="flex flex-wrap gap-2">
        <input type="text" placeholder="Promo code" class="flex-grow px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent shadow-sm transform transition-all duration-200 focus:scale-[1.02]" />
        <button class="px-4 py-2 bg-amber-500 dark:bg-amber-600 text-white font-medium rounded-lg shadow-md transform transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95">Apply</button>
      </div>
      
      <!-- Checkout Button with 3D Effect -->
      <button class="relative w-full py-3 bg-red-600 dark:bg-red-700 text-white text-lg font-bold rounded-lg shadow-lg transform transition-all duration-300 hover:translate-y-[-2px] hover:shadow-xl active:translate-y-0 active:shadow-md overflow-hidden">
        <div class="absolute inset-0 flex items-center justify-center">
          <span class="transform transition-transform group-hover:translate-z-4">Checkout</span>
        </div>
        <div class="absolute bottom-0 left-0 w-full h-1 bg-red-800 dark:bg-red-900"></div>
      </button>
      
      <!-- Continue Shopping Link -->
      <div class="text-center">
        <a href="#" class="inline-flex items-center text-blue-600 dark:text-blue-400 font-medium hover:underline transform transition-all duration-200 hover:translate-y-[-2px]">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
          </svg>
          Continue Reading
        </a>
      </div>
    </div>
  </div>
  
  <!-- Recently Viewed Section -->
  <div class="p-6 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
    <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4">Recently Viewed</h3>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
      <!-- Item 1 -->
      <div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
        <img src="https://picsum.photos/seed/recent1/200/200" alt="Recent item" class="w-full h-24 object-cover" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
          <div class="absolute bottom-2 left-2 text-white text-sm font-medium">Wireless Earbuds</div>
        </div>
      </div>
      
      <!-- Item 2 -->
      <div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
        <img src="https://picsum.photos/seed/recent2/200/200" alt="Recent item" class="w-full h-24 object-cover" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
          <div class="absolute bottom-2 left-2 text-white text-sm font-medium">Portable Speaker</div>
        </div>
      </div>
      
      <!-- Item 3 -->
      <div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
        <img src="https://picsum.photos/seed/recent3/200/200" alt="Recent item" class="w-full h-24 object-cover" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
          <div class="absolute bottom-2 left-2 text-white text-sm font-medium">Smart Light Bulb</div>
        </div>
      </div>
      
      <!-- Item 4 -->
      <div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
        <img src="https://picsum.photos/seed/recent4/200/200" alt="Recent item" class="w-full h-24 object-cover" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
          <div class="absolute bottom-2 left-2 text-white text-sm font-medium">Tablet Stand</div>
        </div>
      </div>
    </div>
  </div>
</div>

위시리스트 컴포넌트

대시보드용으로 설계된 반응형 위시리스트 구성 요소로, 단색 색 구성표와 3D 디자인 스타일을 특징으로 합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>
    <ul class="w-full">
        <li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
            <div class="flex items-center">
                <img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of item 1.</p>
                </div>
            </div>
            <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
        </li>
        <li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
            <div class="flex items-center">
                <img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of item 2.</p>
                </div>
            </div>
            <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
        </li>
        <li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
            <div class="flex items-center">
                <img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of item 3.</p>
                </div>
            </div>
            <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
        </li>
    </ul>
</div>

Shopping Cart 구성 요소

전자 상거래 플랫폼을 위해 설계된 반응형 쇼핑 카트 구성 요소로, 3D 디자인 스타일과 파스텔 색상 구성표를 특징으로 합니다. 제품 목록, 수량 및 결제 버튼과 같은 여러 대화형 요소가 장착되어 있어 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="min-h-screen bg-white dark:bg-gray-800 transition-all p-6 rounded-lg shadow-lg transform hover:scale-105 ease-in-out duration-300">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 text-center">Shopping Cart</h2>
    <div class="mt-4">
        <div class="space-y-4">
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/80/80" alt="Product Image" class="rounded-lg shadow-lg" />
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-200">Product Title</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">$19.99</p>
                </div>
                <div class="flex items-center">
                    <button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 ease-in-out duration-200">+</button>
                    <span class="mx-2 text-gray-800 dark:text-gray-100">1</span>
                    <button class="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 ease-in-out duration-200">-</button>
                </div>
            </div>
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/80/80?random=1" alt="Product Image" class="rounded-lg shadow-lg" />
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-200">Another Product</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">$29.99</p>
                </div>
                <div class="flex items-center">
                    <button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 ease-in-out duration-200">+</button>
                    <span class="mx-2 text-gray-800 dark:text-gray-100">1</span>
                    <button class="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 ease-in-out duration-200">-</button>
                </div>
            </div>
        </div>
        <div class="mt-6 flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg">
            <span class="text-xl font-semibold text-gray-800 dark:text-gray-100">Total</span>
            <span class="text-xl font-semibold text-gray-800 dark:text-gray-100">$49.98</span>
        </div>
        <div class="mt-4">
            <button class="w-full bg-green-500 text-white text-lg font-semibold rounded-lg py-2 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 transition duration-200">
                Checkout
            </button>
        </div>
    </div>
</div>

제품 비교 구성 요소

브루탈리즘 디자인 스타일의 제품 비교 구성 요소로, 생생한 색상과 적당한 복잡성을 특징으로 하여 제품을 선보이거나 포트폴리오에서 작업할 수 있습니다.

열다 미리 보기

                <div class="bg-gray-900 dark:bg-gray-800 text-white p-5 rounded-lg shadow-lg">
  <h1 class="text-3xl font-bold text-violet-500">Product Comparison</h1>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mt-5">
    <div class="bg-red-600 p-4 rounded-lg shadow-md">
      <img src="https://picsum.photos/200/150?random=1" alt="Product 1" class="w-full h-auto rounded-lg mb-2">
      <h2 class="text-2xl font-semibold">Product One</h2>
      <p class="mt-2">Description of Product One. This product is amazing!</p>
      <div class="mt-3 flex justify-between">
        <span class="font-bold text-lg">$99</span>
        <button class="bg-white text-red-600 px-4 py-2 rounded-lg">Compare</button>
      </div>
    </div>
    <div class="bg-green-600 p-4 rounded-lg shadow-md">
      <img src="https://picsum.photos/200/150?random=2" alt="Product 2" class="w-full h-auto rounded-lg mb-2">
      <h2 class="text-2xl font-semibold">Product Two</h2>
      <p class="mt-2">Description of Product Two. A fantastic choice!</p>
      <div class="mt-3 flex justify-between">
        <span class="font-bold text-lg">$149</span>
        <button class="bg-white text-green-600 px-4 py-2 rounded-lg">Compare</button>
      </div>
    </div>
    <div class="bg-blue-600 p-4 rounded-lg shadow-md">
      <img src="https://picsum.photos/200/150?random=3" alt="Product 3" class="w-full h-auto rounded-lg mb-2">
      <h2 class="text-2xl font-semibold">Product Three</h2>
      <p class="mt-2">Description of Product Three. Best-selling product!</p>
      <div class="mt-3 flex justify-between">
        <span class="font-bold text-lg">$199</span>
        <button class="bg-white text-blue-600 px-4 py-2 rounded-lg">Compare</button>
      </div>
    </div>
  </div>
  <div class="mt-8">
    <h1 class="text-2xl font-bold text-violet-500">User Reviews</h1>
    <div class="flex flex-col space-y-4 mt-3">
      <div class="flex bg-gray-700 dark:bg-gray-600 p-3 rounded-lg">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <p class="font-semibold">John Doe</p>
          <p class="text-gray-300 dark:text-gray-200">"Loved this product, it changed my life!"</p>
        </div>
      </div>
      <div class="flex bg-gray-700 dark:bg-gray-600 p-3 rounded-lg">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <p class="font-semibold">Jane Smith</p>
          <p class="text-gray-300 dark:text-gray-200">"I wasn't sure at first, but now I can't live without it!"</p>
        </div>
      </div>
    </div>
  </div>
</div>

360° 뷰어 구성 요소

Material Design에서 영감을 받은 360° 뷰어 구성 요소는 작업이나 제품을 전시하기 위한 생생한 색상과 반응형 디자인 및 다크 모드 지원을 제공합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="relative w-full max-w-lg rounded-lg shadow-lg overflow-hidden">
        <!-- 360 Viewer Wrapper -->
        <div class="aspect-w-16 aspect-h-9">
            <img class="rounded-lg object-cover" src="https://picsum.photos/800/600" alt="360° Product View" />
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white dark:bg-gray-800 rounded-full p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
                <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" />
            </div>
        </div>
    </div>

    <div class="mt-4 text-center">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Product Name</h2>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the product showcasing its features and benefits.</p>
    </div>

    <div class="flex justify-center mt-4 space-x-4">
        <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">View Details</button>
        <button class="bg-green-500 dark:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">Buy Now</button>
    </div>
</div>

User Mentions 구성 요소

간단한 User Mentions 구성 요소는 비즈니스 및 기업 웹 사이트에 적합한 회색 음영 구성표의 브루탈리즘 스타일로 설계되었습니다. 여기에는 아바타와 함께 사용자 언급이 포함되며 어두운 테마 지원으로 반응합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-bold text-black dark:text-white">User Mentions</h2>
  <ul class="mt-4 space-y-4">
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@john_doe</p>
    </li>
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@jane_smith</p>
    </li>
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@mark_twain</p>
    </li>
  </ul>
  <button class="mt-4 px-4 py-2 bg-gray-800 dark:bg-white text-white dark:text-gray-800 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none">See More Mentions</button>
</div>

1 ... 168 169 170 171 172 ... 335

검색 구성 요소

카테고리

모든 구성 요소