検索コンポーネント

すべてのコンポーネント

利用可能なすべてのTailwind CSSコンポーネントを参照する

パスワードリセットコンポーネント

マテリアルデザインにインスパイアされた、Tailwind CSSで構築されたソーシャルメディアプラットフォーム用のパスワードリセットコンポーネント。彩度の高い色、すっきりとしたレイアウト、ダークモードをサポートするレスポンシブデザインを備えた鮮やかな配色が特徴です。このコンポーネントには、メール、送信ボタン、便利なテキストの入力フィールドが含まれています。このデザインでは、カードの高さ、グリッドレイアウト、奥行き効果などのマテリアルデザインの原則を使用しています。

開けるプレビュー

                <!-- Password Reset Card Container -->
<div class="max-w-md mx-auto my-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300">
  <!-- Header with Icon -->
  <div class="text-center mb-6">
    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900 mb-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600 dark:text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
      </svg>
    </div>
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Reset Password</h1>
    <p class="text-gray-600 dark:text-gray-300 mt-2">Enter your email to receive a password reset link</p>
  </div>
  
  <!-- Form -->
  <form class="space-y-4">
    <!-- Email Input -->
    <div>
      <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
          </svg>
        </div>
        <input id="email" type="email" class="pl-10 w-full py-2 px-4 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent dark:text-white transition-colors duration-200" placeholder="[email protected]" required>
      </div>
    </div>
    
    <!-- Submit Button -->
    <button type="submit" class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200 text-white font-medium rounded-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
      Send Reset Link
    </button>
    
    <!-- Additional Info -->
    <div class="text-center mt-4">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        Remember your password? 
        <a href="#" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 font-medium transition-colors duration-200">
          Sign in
        </a>
      </p>
    </div>
  </form>
  
  <!-- Security Note -->
  <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
    <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <p>We'll send a secure link valid for 30 minutes</p>
    </div>
  </div>
</div>

カルーセルスライダーコンポーネント

Tailwind CSSを使用したダークモードでのeコマース用に設計されたシンプルなカルーセルスライダーコンポーネント。

開けるプレビュー

                <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 Componentは、PortfolioのWebサイト用に最適化されています。複数のインタラクティブ要素を備えた複雑なレイアウト、レスポンシブデザイン、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>

製品比較コンポーネント - レトロなコーポレートスタイル

単色の青の配色を使用したレトロ/ビンテージの企業の美学を備えたレスポンシブ製品比較コンポーネント。複数のインタラクティブ要素とダークモードのサポートを備えています。デザインには、80年代/90年代にインスパイアされた幾何学模様、昔ながらのタイポグラフィ、ピクセルのようなアクセントを備えたレトロなスタイルのカードが含まれています。プロフェッショナリズムを維持しながら、ノスタルジックなデザインで目立ちたいビジネスWebサイトに最適です。

開けるプレビュー

                <!-- 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でスタイル設定されたシンプルなレスポンシブフィルターコンポーネントで、グレースケールの配色を使用して、ビジネス/企業のWebサイト向けに設計されています。このコンポーネントはダークモードをサポートし、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>

ショッピングカートコンポーネント

eコマースプラットフォーム向けに設計されたレスポンシブショッピングカートコンポーネントで、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°ビューアコンポーネント

マテリアルデザインにインスパイアされた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>

1 ... 148 149 150 151 152 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント