検索コンポーネント

すべてのコンポーネント

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

ラグジュアリー/プレミアムマーケットプレイスダッシュボードコンポーネント

マルチベンダーマーケットプレイス向けの複雑で応答性の高いダッシュボードコンポーネントで、ラグジュアリー/プレミアムなデザインスタイルを備えています。プロフェッショナルなコーポレートブルーの配色、洗練されたタイポグラフィ、ダークモードのサポートが特徴です。概要、最近の売上、上位の製品、および簡単な統計のセクションが含まれています。

開けるプレビュー

                <div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8">

  <!-- Header -->
  <header class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 lg:mb-8">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-2 sm:mb-0">Vendor Dashboard</h1>
    <div class="flex items-center space-x-3">
      <div class="relative">
        <input type="text" placeholder="Search..." class="py-2 pl-4 pr-10 rounded-lg bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm w-40 sm:w-64">
        <svg class="w-5 h-5 text-gray-400 absolute right-3 top-1/2 transform -translate-y-1/2" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>
      <button class="p-2 rounded-full bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
        <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
      </button>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-600">
    </div>
  </header>

  <!-- Main Content Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">

    <!-- Quick Stats Cards (Col Span 4 on Lg, 2 on Md) -->
    <div class="lg:col-span-4 md:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <!-- Stat Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
        <div>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">Total Sales</p>
          <h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">$12,450.75</h3>
        </div>
        <svg class="w-10 h-10 text-blue-500 dark:text-blue-400 opacity-70" 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="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
      </div>
      <!-- Stat Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
        <div>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">Orders Today</p>
          <h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">58</h3>
        </div>
        <svg class="w-10 h-10 text-green-500 dark:text-green-400 opacity-70" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
      </div>
      <!-- Stat Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
        <div>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">New Customers</p>
          <h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">12</h3>
        </div>
        <svg class="w-10 h-10 text-purple-500 dark:text-purple-400 opacity-70" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5 1.857H10M11 12a4 4 0 11-8 0 4 4 0 018 0zm6 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
      </div>
      <!-- Stat Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
        <div>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">Product Views</p>
          <h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">2,104</h3>
        </div>
        <svg class="w-10 h-10 text-orange-500 dark:text-orange-400 opacity-70" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
      </div>
    </div>

    <!-- Recent Sales Chart/Table -->
    <section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">Recent Sales</h2>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead class="bg-gray-50 dark:bg-gray-700">
            <tr>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Order ID</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Amount</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700 text-sm">
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45678</td>
              <td class="px-4 py-4 whitespace-nowrap">Luxury Watch</td>
              <td class="px-4 py-4 whitespace-nowrap text-green-600 dark:text-green-400 font-bold">$899.00</td>
              <td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span></td>
            </tr>
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45677</td>
              <td class="px-4 py-4 whitespace-nowrap">Designer Handbag</td>
              <td class="px-4 py-4 whitespace-nowrap text-green-600 dark:text-green-400 font-bold">$549.50</td>
              <td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span></td>
            </tr>
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45676</td>
              <td class="px-4 py-4 whitespace-nowrap">Premium Coffee Maker</td>
              <td class="px-4 py-4 whitespace-nowrap text-yellow-600 dark:text-yellow-400 font-bold">$220.00</td>
              <td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">Pending</span></td>
            </tr>
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45675</td>
              <td class="px-4 py-4 whitespace-nowrap">Acoustic Guitar</td>
              <td class="px-4 py-4 whitespace-nowrap text-green-600 dark:text-green-400 font-bold">$780.00</td>
              <td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span></td>
            </tr>
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45674</td>
              <td class="px-4 py-4 whitespace-nowrap">Smart Home Hub</td>
              <td class="px-4 py-4 whitespace-nowrap text-red-600 dark:text-red-400 font-bold">$150.00</td>
              <td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100">Cancelled</span></td>
            </tr>
          </tbody>
        </table>
      </div>

      <button class="mt-6 w-full py-3 rounded-lg border border-blue-500 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors duration-200 font-semibold"><a href="#">View All Sales</a></button>
    </section>

    <!-- Top Selling Products -->
    <section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">Top Selling Products</h2>
      <div class="space-y-4">
        <!-- Product Item 1 -->
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=1" alt="Watch" class="w-20 h-20 rounded-lg object-cover shadow-sm">
          <div class="flex-1">
            <h3 class="font-semibold text-gray-900 dark:text-gray-100">Luxury Swiss Watch</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Sold: <span>150</span> units</p>
            <p class="text-blue-700 dark:text-blue-300 font-bold">$899.00</p>
          </div>
          <button class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg></button>
        </div>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Product Item 2 -->
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=2" alt="Handbag" class="w-20 h-20 rounded-lg object-cover shadow-sm">
          <div class="flex-1">
            <h3 class="font-semibold text-gray-900 dark:text-gray-100">Italian Leather Handbag</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Sold: <span>120</span> units</p>
            <p class="text-blue-700 dark:text-blue-300 font-bold">$549.50</p>
          </div>
          <button class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg></button>
        </div>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Product Item 3 -->
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=3" alt="Camera" class="w-20 h-20 rounded-lg object-cover shadow-sm">
          <div class="flex-1">
            <h3 class="font-semibold text-gray-900 dark:text-gray-100">Professional DSLR Camera</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Sold: <span>90</span> units</p>
            <p class="text-blue-700 dark:text-blue-300 font-bold">$1,200.00</p>
          </div>
          <button class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg></button>
        </div>
      </div>
      <button class="mt-6 w-full py-3 rounded-lg border border-blue-500 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors duration-200 font-semibold"><a href="#">Manage Products</a></button>
    </section>

    <!-- Customer Reviews / Feedback -->
    <section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">Customer Feedback</h2>
      <div class="space-y-5">
        <!-- Review 1 -->
        <div class="flex items-start space-x-4">
          <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-600">
          <div class="flex-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Emily R.</p>
            <div class="flex items-center text-yellow-500 text-sm mb-1">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm">"Absolutely love the quality of products! Fast shipping and excellent customer service. Highly recommend this marketplace."</p>
          </div>
        </div>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Review 2 -->
        <div class="flex items-start space-x-4">
          <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-600">
          <div class="flex-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">David S.</p>
            <div class="flex items-center text-yellow-500 text-sm mb-1">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm">"Great platform for unique items. Had a slight issue with delivery but customer support resolved it quickly and professionally."</p>
          </div>
        </div>
      </div>
      <button class="mt-6 w-full py-3 rounded-lg border border-blue-500 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors duration-200 font-semibold"><a href="#">Read All Reviews</a></button>
    </section>

    <!-- To-Do List -->
    <section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">To-Do List</h2>
      <div class="space-y-4">
        <!-- Task 1 -->
        <label class="flex items-center space-x-3 cursor-pointer">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500">
          <span class="text-gray-800 dark:text-gray-200 text-base">Respond to customer inquiries</span>
        </label>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Task 2 -->
        <label class="flex items-center space-x-3 cursor-pointer">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500" checked>
          <span class="text-gray-500 dark:text-gray-400 text-base line-through">Update product listings photos</span>
        </label>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Task 3 -->
        <label class="flex items-center space-x-3 cursor-pointer">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500">
          <span class="text-gray-800 dark:text-gray-200 text-base">Prepare monthly sales report</span>
        </label>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Task 4 -->
        <label class="flex items-center space-x-3 cursor-pointer">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500">
          <span class="text-gray-800 dark:text-gray-200 text-base">Plan next marketing campaign</span>
        </label>
      </div>
      <button class="mt-6 w-full py-3 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors duration-200 font-semibold"><a href="#">Add New Task</a></button>
    </section>

  </div>

</div>

通知コンポーネント

マテリアルデザインの原則、クールなニュートラルカラー、ダークモードのサポートを使用して設計された、複雑で応答性の高い通知コンポーネントで、インタラクティブな要素と奥行き効果を紹介するポートフォリオに適しています。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased">
    <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Notifications</h2>
            <div class="flex space-x-2">
                <button class="px-4 py-2 rounded-full text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
                    Mark all as read
                </button>
                <button class="p-2 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
                    </svg>
                </button>
            </div>
        </div>

        <div class="divide-y divide-gray-200 dark:divide-gray-700">
            <!-- Notification Item 1 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-blue-50 dark:bg-gray-800/50 hover:bg-blue-100 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
                    <span class="absolute top-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-blue-500"></span>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            <span class="font-bold">Alice Johnson</span> commented on your <span class="text-blue-600 dark:text-blue-400 font-medium">post</span>.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">2h ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        "Great insights! I particularly liked your point about the new design trends..."
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-blue-600 dark:text-blue-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Reply</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Dismiss</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 2 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <div class="h-12 w-12 rounded-full bg-green-500 flex items-center justify-center shadow-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            Your portfolio project <span class="text-indigo-600 dark:text-indigo-400 font-medium">'Modern Dashboard'</span> was approved!
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">1 day ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        Congratulations! Your project is now live and visible to the community.
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">View Project</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">Share</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 3 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            <span class="font-bold">Sarah Lee</span> sent you a <span class="text-purple-600 dark:text-purple-400 font-medium">private message</span>.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">3 days ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        "Hi! I saw your work on the Material Design component and wanted to ask about..."
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-purple-600 dark:text-purple-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">View Message</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">Archive</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 4 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <div class="h-12 w-12 rounded-full bg-red-500 flex items-center justify-center shadow-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            <span class="text-red-600 dark:text-red-400 font-medium">Warning:</span> Some assets failed to load for 'Photography Showcase'.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">5 days ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        Please check the console for more details. This might affect the display of your project.
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-red-600 dark:text-red-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Resolve Issue</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Ignore</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 5 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out last:rounded-b-lg">
                <div class="relative flex-shrink-0">
                    <img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://picsum.photos/id/1005/60/60" alt="System Icon">
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            New <span class="text-cyan-600 dark:text-cyan-400 font-medium">feature update</span> available for the editor.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">1 week ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        We've added new collaboration tools and improved performance. Update now to experience!
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-cyan-600 dark:text-cyan-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-50">Learn More</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-50">Dismiss</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Dashboard_Weather_Climate_Swiss

スイス/インターナショナルタイポグラフィにインスパイアされた、複雑で応答性の高い天気と気候のダッシュボードコンポーネントで、アースカラーを使用し、ダークモードをサポートしています。現在の天気、予報、大気質、気候の傾向など、複数のデータポイントを備えています。

開けるプレビュー

                <div class="min-h-screen bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">

  <header class="mb-8 sm:mb-10 lg:mb-12">
    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-stone-900 dark:text-stone-100 tracking-tight mb-2">
      Climate Dashboard
    </h1>
    <p class="text-lg sm:text-xl text-stone-600 dark:text-stone-400">Comprehensive Weather & Climate Insights</p>
  </header>

  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 sm:gap-8">

    <!-- Current Weather Card -->
    <section class="md:col-span-2 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg flex flex-col justify-between overflow-hidden relative">
      <div class="absolute top-0 left-0 w-full h-full bg-cover bg-center opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/weather_current/1200/800');"></div>
      <div class="relative z-10">
        <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Current Conditions</h2>
        <div class="flex items-center justify-between flex-wrap gap-4 mb-6">
          <div class="flex items-center gap-4">
            <img src="https://openweathermap.org/img/wn/04d.png" alt="Cloudy" class="w-16 h-16 sm:w-20 sm:h-20">
            <div>
              <p class="text-5xl sm:text-6xl font-bold text-stone-900 dark:text-stone-100">22°C</p>
              <p class="text-xl text-stone-700 dark:text-stone-300">Partly Cloudy</p>
            </div>
          </div>
          <div class="text-right">
            <p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Humidity:</span> 65%</p>
            <p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Wind:</span> 12 km/h NE</p>
            <p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Pressure:</span> 1012 hPa</p>
          </div>
        </div>
        <p class="text-md text-stone-600 dark:text-stone-400">Updated: Just now</p>
        <p class="mt-2 text-md font-medium text-stone-700 dark:text-stone-300">Location: Zurich, Switzerland</p>
      </div>
    </section>

    <!-- 5-Day Forecast Card -->
    <section class="md:col-span-1 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg overflow-hidden">
      <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">5-Day Forecast</h2>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-5 gap-4">
        <!-- Day 1 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Today</p>
          <img src="https://openweathermap.org/img/wn/04d.png" alt="Clouds" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">24° / 15°</p>
        </div>
        <!-- Day 2 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Tomorrow</p>
          <img src="https://openweathermap.org/img/wn/01d.png" alt="Sun" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">26° / 16°</p>
        </div>
        <!-- Day 3 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Thu</p>
          <img src="https://openweathermap.org/img/wn/10d.png" alt="Rain" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">20° / 13°</p>
        </div>
        <!-- Day 4 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Fri</p>
          <img src="https://openweathermap.org/img/wn/03d.png" alt="Partly Clouds" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">21° / 14°</p>
        </div>
        <!-- Day 5 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Sat</p>
          <img src="https://openweathermap.org/img/wn/02d.png" alt="Few Clouds" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">23° / 15°</p>
        </div>
      </div>
    </section>

    <!-- Climate Trends Card -->
    <section class="md:col-span-1 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg">
      <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Climate Trends</h2>
      <div class="space-y-4">
        <div>
          <p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Average Temperature</p>
          <div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
            <div class="bg-amber-600 h-2.5 rounded-full" style="width: 70%;"></div>
          </div>
          <p class="text-sm text-stone-600 dark:text-stone-400 mt-1">+0.8°C vs. Historical Average</p>
        </div>
        <div>
          <p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Precipitation Anomaly</p>
          <div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
            <div class="bg-blue-600 h-2.5 rounded-full" style="width: 60%;"></div>
          </div>
          <p class="text-sm text-stone-600 dark:text-stone-400 mt-1">-15% vs. Historical Average</p>
        </div>
        <div>
          <p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Extreme Weather Events</p>
          <div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
            <div class="bg-red-600 h-2.5 rounded-full" style="width: 40%;"></div>
          </div>
          <p class="text-sm text-stone-600 dark:text-stone-400 mt-1">+5% Increase Annually</p>
        </div>
      </div>
      <button class="mt-6 w-full py-2 px-4 bg-lime-700 hover:bg-lime-800 dark:bg-lime-600 dark:hover:bg-lime-700 text-white font-medium rounded-lg transition-colors">
        View Full Report
      </button>
    </section>

    <!-- Air Quality Index Card -->
    <section class="md:col-span-1 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg flex flex-col">
      <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Air Quality Index (AQI)</h2>
      <div class="flex items-center justify-between mb-4 flex-grow">
        <div class="text-center flex-1">
          <p class="text-5xl font-bold text-emerald-600 dark:text-emerald-400">45</p>
          <p class="text-lg text-emerald-700 dark:text-emerald-300">Good</p>
        </div>
        <div class="text-left flex-1 pl-4 border-l border-stone-200 dark:border-stone-700">
          <p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">PM2.5:</span> 12 µg/m³</p>
          <p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">Ozone:</span> 35 ppb</p>
          <p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">NO2:</span> 5 ppb</p>
        </div>
      </div>
      <p class="text-sm text-stone-600 dark:text-stone-400 text-center mt-2">Data from local monitoring station</p>
    </section>

    <!-- Global Anomalies Card -->
    <section class="md:col-span-3 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg">
      <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Global Anomalies & Alerts</h2>
      <ul class="space-y-4">
        <li class="flex items-start gap-3">
          <span class="text-red-500 text-2xl">&#9888;</span>
          <div>
            <p class="font-medium text-stone-800 dark:text-stone-200">Heatwave warning for Southern Europe</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Temperatures expected to exceed 40°C for next 7 days.</p>
          </div>
        </li>
        <li class="flex items-start gap-3">
          <span class="text-blue-500 text-2xl">&#x2139;</span>
          <div>
            <p class="font-medium text-stone-800 dark:text-stone-200">Increased Arctic ice melt observed</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Satellite data shows record low sea ice extent for the season.</p>
          </div>
        </li>
        <li class="flex items-start gap-3">
          <span class="text-yellow-500 text-2xl">&#9937;</span>
          <div>
            <p class="font-medium text-stone-800 dark:text-stone-200">Pacific Ocean SST trending towards El Niño</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Potential for altered global weather patterns in coming months.</p>
          </div>
        </li>
      </ul>
    </section>

  </div>

  <footer class="mt-10 pt-6 border-t border-stone-300 dark:border-stone-700 text-center text-stone-600 dark:text-stone-400 text-sm">
    <p>&copy; 2023 Climate Insights. All rights reserved.</p>
  </footer>

</div>

360_viewer_component

ファッション/ビューティーのための複雑で活気に満ちたスキューモーフィックな360度製品ビューアコンポーネントで、ダークモードをサポートし、完全にレスポンシブです。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 flex items-center justify-center p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
  <div class="relative w-full max-w-4xl bg-gradient-to-br from-purple-300 via-pink-300 to-yellow-300 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-800 rounded-3xl shadow-2xl p-8 transform transition-all duration-300 hover:scale-[1.01] overflow-hidden border-2 border-purple-400 dark:border-purple-700">
    <!-- 'Glass' inset effect -->
    <div class="absolute inset-4 -m-2 rounded-2xl bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm shadow-inner-lg dark:bg-black dark:bg-opacity-20"></div>

    <div class="relative z-10 flex flex-col lg:flex-row gap-8">
      <!-- Product Image / 360 Viewer Area -->
      <div class="flex-1 lg:w-3/5 relative bg-white dark:bg-gray-700 rounded-2xl shadow-xl overflow-hidden p-4 group">
        <img src="https://picsum.photos/600/600?random=1" alt="360 Product View" class="w-full h-full object-contain rounded-xl transition-transform duration-500 group-hover:scale-105">
        <!-- 360 degree indicator disc -->
        <div class="absolute bottom-4 right-4 bg-purple-600 dark:bg-purple-900 rounded-full w-16 h-16 flex items-center justify-center shadow-lg transform group-hover:rotate-180 transition-transform duration-700">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M9.546 1.046a.5.5 0 01.908 0l2 3.5a.5.5 0 01-.454.704H7.992a.5.5 0 01-.454-.704l2-3.5zM12.93 16.924a.5.5 0 01.707 0l2 2a.5.5 0 01.011.707l-2 2a.5.5 0 01-.707-.011l-1.92-1.92-1.92 1.92A.5.5 0 018.069 20a.5.5 0 01-.011.707l-2-2a.5.5 0 01-.707-.011l-2-2a.5.5 0 01.707-.707L5 17.062V13.5a.5.5 0 011 0v3.562l1.93-1.93a.5.5 0 01.707 0l2 2z" clip-rule="evenodd"></path>
          </svg>
           <span class="absolute text-xs text-white -bottom-4">360°</span>
        </div>

        <!-- Skeuomorphic controls (dials/buttons) -->
        <div class="absolute bottom-4 left-4 flex space-x-2">
          <button class="w-12 h-12 bg-gradient-to-br from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 active:from-green-600 active:to-blue-700 text-white rounded-full flex items-center justify-center shadow-md border-2 border-green-300 dark:border-green-800 transform active:scale-95 transition-all duration-100">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
          </button>
          <button class="w-12 h-12 bg-gradient-to-br from-orange-400 to-red-500 hover:from-orange-500 hover:to-red-600 active:from-orange-600 active:to-red-700 text-white rounded-full flex items-center justify-center shadow-md border-2 border-orange-300 dark:border-orange-800 transform active:scale-95 transition-all duration-100">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 15.707a1 1 0 010-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

      <!-- Product Details & Options -->
      <div class="flex-1 lg:w-2/5 flex flex-col gap-6">
        <!-- Product Title & Price -->
        <div class="bg-white dark:bg-gray-700 rounded-2xl p-6 shadow-xl border-2 border-pink-400 dark:border-pink-700">
          <h2 class="text-4xl lg:text-5xl font-extrabold text-purple-800 dark:text-purple-300 mb-2 drop-shadow-md">Radiant Glow Elixir</h2>
          <p class="text-2xl font-bold text-pink-600 dark:text-pink-400">$99.00</p>
        </div>

        <!-- Color Options (Skeuomorphic buttons) -->
        <div class="bg-white dark:bg-gray-700 rounded-2xl p-6 shadow-xl border-2 border-yellow-400 dark:border-yellow-700">
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Choose Shade:</h3>
          <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
            <button class="w-14 h-14 bg-red-400 rounded-full shadow-md border-4 border-transparent hover:border-red-600 dark:hover:border-red-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
            <button class="w-14 h-14 bg-teal-400 rounded-full shadow-md border-4 border-transparent hover:border-teal-600 dark:hover:border-teal-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
            <button class="w-14 h-14 bg-blue-400 rounded-full shadow-md border-4 border-transparent hover:border-blue-600 dark:hover:border-blue-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
            <button class="w-14 h-14 bg-yellow-400 rounded-full shadow-md border-4 border-transparent hover:border-yellow-600 dark:hover:border-yellow-900 transform transition-all duration-200 active:scale-90 relative selected">
              <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
              <span class="absolute inset-0 ring-4 ring-yellow-500 dark:ring-yellow-400 rounded-full"></span>
            </button>
            <button class="w-14 h-14 bg-purple-400 rounded-full shadow-md border-4 border-transparent hover:border-purple-600 dark:hover:border-purple-900 transform transition-all duration-200 active:scale-90 relative">
                <span class="block w-full h-full rounded-full border-2 border-white dark:border-gray-800"></span>
            </button>
          </div>
        </div>

        <!-- Add to Cart Button -->
        <button class="w-full bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 active:from-green-700 active:to-blue-800 text-white font-extrabold text-2xl py-4 rounded-full shadow-2xl skew-y-1 hover:skew-y-0 transform transition-all duration-300 border-4 border-green-400 dark:border-green-700 dark:text-blue-200">
          <span class="drop-shadow-md">ADD TO BAG</span>
        </button>
      </div>
    </div>

    <!-- Decorative light/shadow effects for skeuomorphism -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-white bg-opacity-30 rounded-full transform -translate-x-1/2 -translate-y-1/2 blur-2xl opacity-60 pointer-events-none dark:hidden"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-pink-400 bg-opacity-30 rounded-full transform translate-x-1/2 translate-y-1/2 blur-2xl opacity-60 pointer-events-none dark:hidden"></div>
  </div>
</div>

製品比較コンポーネント

秋の色でデザインされたシンプルで遊び心のある製品比較コンポーネントで、ドキュメントやWikiサイトに適しています。丸みを帯びた要素、完全な応答性、ダークモードのサポートを備えています。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 bg-orange-50 dark:bg-stone-900 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-stone-800 rounded-3xl shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8 lg:p-10 text-center bg-orange-100 dark:bg-stone-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-orange-800 dark:text-orange-200 mb-2">Compare Our Fun Features!</h2>
      <p class="text-orange-600 dark:text-orange-300 text-base sm:text-lg">See how our playful products stack up.</p>
    </div>

    <div class="flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x divide-orange-200 dark:divide-stone-700">

      <!-- Product 1 -->
      <div class="flex-1 p-6 sm:p-8 lg:p-10 text-center">
        <h3 class="text-xl sm:text-2xl font-bold text-orange-700 dark:text-orange-300 mb-4">Happy Widget 🥳</h3>
        <img src="https://picsum.photos/300/200?random=1" alt="Happy Widget" class="w-full h-32 sm:h-40 object-cover rounded-xl mb-6 shadow-md">
        
        <ul class="text-sm sm:text-base text-stone-700 dark:text-stone-300 space-y-3 mb-6">
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Simple Setup</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Playful Interface</li>
          <li class="flex items-center justify-center"><span class="text-red-500 mr-2 text-lg">&#10007;</span> Advanced Analytics</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Friendly Support</li>
        </ul>

        <div class="text-4xl font-extrabold text-orange-900 dark:text-orange-100 mb-6">$19<span class="text-base text-stone-500 dark:text-stone-400 font-normal">/mo</span></div>
        <a href="#" class="inline-block px-8 py-3 bg-orange-500 text-white font-semibold rounded-full shadow-lg hover:bg-orange-600 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 transition duration-300 ease-in-out">Choose Happy!</a>
      </div>

      <!-- Product 2 -->
      <div class="flex-1 p-6 sm:p-8 lg:p-10 text-center bg-orange-50 dark:bg-stone-700">
        <h3 class="text-xl sm:text-2xl font-bold text-burgundy-900 dark:text-burgundy-100 mb-4">Super Gizmo ✨</h3>
        <img src="https://picsum.photos/300/200?random=2" alt="Super Gizmo" class="w-full h-32 sm:h-40 object-cover rounded-xl mb-6 shadow-md">

        <ul class="text-sm sm:text-base text-stone-700 dark:text-stone-300 space-y-3 mb-6">
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Quick Setup</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Robust Interface</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Powerful Analytics</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Premium Support</li>
        </ul>

        <div class="text-4xl font-extrabold text-burgundy-900 dark:text-burgundy-100 mb-6">$39<span class="text-base text-stone-500 dark:text-stone-400 font-normal">/mo</span></div>
        <a href="#" class="inline-block px-8 py-3 bg-burgundy-600 text-white font-semibold rounded-full shadow-lg hover:bg-burgundy-700 focus:outline-none focus:ring-4 focus:ring-burgundy-300 dark:focus:ring-burgundy-700 transition duration-300 ease-in-out">Get Gizmo Fun!</a>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 text-center bg-orange-100 dark:bg-stone-700 border-t border-orange-200 dark:border-stone-600">
      <p class="text-orange-700 dark:text-orange-300 text-sm sm:text-base">Need more details? Check out our <a href="#" class="font-semibold underline hover:text-orange-800 dark:hover:text-orange-200">full feature list</a>!</p>
    </div>

  </div>
</div>

ヒートマップコンポーネント

ポートフォリオ用のレスポンシブヒートマップコンポーネントで、暗い背景と鮮やかで彩度の高い色で設計されており、目の疲れを軽減し、エネルギーを生み出します。アクティビティを視覚化するためのカレンダーのようなグリッド、インタラクティブなツールチップ(ただし、機能は「JavaScriptなし」ルールに従って実装されておらず、視覚的なプレースホルダーは存在します)、および色の凡例が含まれています。

開けるプレビュー

                <div class="font-sans antialiased bg-gray-950 text-gray-100 p-4 sm:p-6 md:p-8 dark:bg-gray-950 dark:text-gray-100">
  <div class="max-w-6xl mx-auto bg-gray-900 rounded-xl shadow-2xl overflow-hidden md:flex dark:bg-gray-900">
    <div class="p-6 sm:p-8 md:p-10 flex-grow">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-cyan-400 mb-2 dark:text-cyan-400">Activity Heatmap</h2>
      <p class="text-gray-400 text-lg sm:text-xl mb-8 dark:text-gray-400">Visualizing my commitment and contributions over time.</p>

      <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-6">
        <div class="flex items-center space-x-4 mb-4 md:mb-0">
          <span class="text-gray-400 text-sm sm:text-base">Last 12 Months</span>
          <div class="relative inline-block text-gray-100">
            <select class="block appearance-none w-full bg-gray-800 border border-gray-700 hover:border-gray-600 px-4 py-2 pr-8 rounded-lg shadow leading-tight focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:hover:border-gray-600">
              <option>2023</option>
              <option>2022</option>
              <option>2021</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/></svg>
            </div>
          </div>
        </div>
        <div class="flex space-x-2 text-gray-400 text-sm sm:text-base">
          <span>Less</span>
          <div class="w-4 h-4 rounded-sm bg-gray-700 dark:bg-gray-700"></div>
          <div class="w-4 h-4 rounded-sm bg-purple-900 dark:bg-purple-900"></div>
          <div class="w-4 h-4 rounded-sm bg-purple-700 dark:bg-purple-700"></div>
          <div class="w-4 h-4 rounded-sm bg-fuchsia-600 dark:bg-fuchsia-600"></div>
          <div class="w-4 h-4 rounded-sm bg-pink-500 dark:bg-pink-500"></div>
          <span>More</span>
        </div>
      </div>

      <div class="overflow-x-auto pb-4">
        <div class="grid grid-cols-53 gap-1 min-w-[700px]">
          <!-- Month Labels (approximate placement) -->
          <div class="col-span-2"></div>
          <div class="col-span-4 text-center text-xs text-gray-400">Jan</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Feb</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Mar</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Apr</div>
          <div class="col-span-4 text-center text-xs text-gray-400">May</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Jun</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Jul</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Aug</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Sep</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Oct</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Nov</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Dec</div>
          <div class="col-span-1"></div>

          <!-- Days of Week Labels -->
          <div class="text-right text-xs text-gray-400 pr-2">Mon</div>
          <!-- Grid cells (52 weeks for full year + buffer for alignment, 7 days per week) -->
          <!-- Generating 52 weeks * 7 days = 364 cells + 7 day labels -->
          <div class="col-span-52 grid grid-cols-52 gap-1">
            <!-- Placeholder for 52 columns of days -->
            <!-- Example week 1 (vertical column) -->
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-gray-700 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-gray-700"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">No activity</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-purple-900 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-purple-900"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">1 contribution</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-purple-700 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-purple-700"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">5 contributions</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-fuchsia-600 transition-colors duration-200 dark:bg-fuchsia-600 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">10 contributions</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-pink-500 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-pink-500"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">20+ contributions</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-gray-700 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-gray-700"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">No activity</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-purple-700 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-purple-700"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">4 contributions</span>
            </div>
            
            <!-- Fill the rest with randomly colored cells for demonstration -->
            <!-- Due to the 52 column structure, we need 52 * 7 cells. -->
            <!-- We've already added 7 specific ones for example. Need 357 more. -->
            <!-- In a real scenario, this would be dynamically generated. -->
            <!-- For the purpose of this component, we'll put a representative number of cells -->
            <!-- to simulate the full grid within Tailwind's capabilities. -->
            
            <!-- This loop is conceptual and needs manual expansion for the 52x7 grid -->
            <!-- Using 364 total cells to simulate a year -->
            <!-- I will generate a slice of cells for demonstration -->
            <!-- The actual number of cells is 52*7 = 364 -->
            
            <style>
                /* Tailwind's JIT mode handles arbitrary values like grid-cols-53. */
                /* For dynamic values like this, ensure your Tailwind config's safelist includes patterns if not using JIT or if for older versions. */
                /* Or, simply use explicit classes like grid-cols-[repeat(52,minmax(0,1fr))] */
                .grid-cols-53 {
                    grid-template-columns: repeat(53, minmax(0, 1fr));
                }
            </style>

            <!-- Loop for 51 more 'weeks' (51*7 = 357 cells) -->
            <!-- Randomly select a color class -->
            <!-- Keep this concise for the JSON output -->
            <!-- Example of dynamic generation, shortened for brevity here -->
            <!-- Total cells needed 364 (52 weeks * 7 days) -->
            <!-- Here we will approximate for demonstration, not generate all 364. -->
            <!-- We'll fill up to a significant portion that shows the layout. -->
            
            <!-- Example of ~6 weeks (42 cells) to show the pattern spread out: -->
            ${(() => {
                const colors = ['bg-gray-700', 'bg-purple-900', 'bg-purple-700', 'bg-fuchsia-600', 'bg-pink-500'];
                let cells = '';
                for (let i = 0; i < (52 * 7 - 7); i++) { // Fill the rest of the 364 cells (minus the 7 already placed)
                    const colorClass = colors[Math.floor(Math.random() * colors.length)];
                    const contributionText = colorClass === 'bg-gray-700' ? 'No activity' : `${Math.floor(Math.random() * 20) + 1} contributions`;
                    cells += `
                        <div class="w-4 h-4 rounded-sm ${colorClass} relative cursor-pointer group transition-colors duration-200 transform group-hover:scale-110 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:hover:ring-cyan-500">
                            <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-black/70 text-xs text-white rounded shadow-md whitespace-nowrap z-10">${contributionText}</span>
                        </div>
                    `;
                }
                return cells;
            })()}
          </div>

          <!-- Day labels for vertical axis -->
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Tue</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Wed</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Thu</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Fri</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Sat</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Sun</div>
          <div class="col-span-52"></div>

        </div>
      </div>

      <p class="text-right text-gray-500 text-sm mt-4 dark:text-gray-500">Last updated: Jan 1, 2024</p>
    </div>
  </div>
</div>

コミュニティフォーラムコンポーネント

サイバーパンクをテーマにしたシンプルな不動産プラットフォーム向けのコミュニティフォーラムコンポーネントで、ダークな背景、ネオンのアクセント、ダークモードをサポートするレスポンシブデザインが特徴です。

開けるプレビュー

                <div class="font-sans bg-gray-950 text-gray-100 dark:bg-black p-4 sm:p-6 lg:p-8 rounded-lg shadow-lg border border-purple-800 dark:border-pink-700 max-w-4xl mx-auto neon-shadow">
  <h2 class="text-2xl sm:text-3xl font-bold text-teal-400 dark:text-lime-400 mb-6 text-center tracking-wide uppercase leading-tight">
    <span class="block">CYBERPUNK CONCLAVE</span>
    <span class="block text-lg text-purple-400 dark:text-pink-400">// REAL ESTATE MATRIX //</span>
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    <div class="bg-opacity-20 bg-blue-700 dark:bg-purple-700 p-4 rounded-md border border-b-2 border-blue-500 dark:border-purple-500 hover:border-blue-300 dark:hover:border-purple-300 transition-colors duration-300">
      <h3 class="text-xl font-semibold text-blue-300 dark:text-purple-300 mb-2 ">Discussion Channels</h3>
      <ul class="space-y-2 text-sm">
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-400" 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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          General Property Chatter
        </li>
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-400" 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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          Investment Strategies
        </li>
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-400" 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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          Market Trends & Predictions
        </li>
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-400" 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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          Legal & Compliance
        </li>
      </ul>
    </div>

    <div class="bg-opacity-20 bg-purple-700 dark:bg-blue-700 p-4 rounded-md border border-b-2 border-purple-500 dark:border-blue-500 hover:border-purple-300 dark:hover:border-blue-300 transition-colors duration-300">
      <h3 class="text-xl font-semibold text-purple-300 dark:text-blue-300 mb-2">Featured Threads</h3>
      <ul class="space-y-3 text-sm">
        <li class="flex items-center text-gray-200">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
          <a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
            "Optimized Smart Homes of 2077" <span class="text-xs text-gray-400">by DataGhost</span>
          </a>
        </li>
        <li class="flex items-center text-gray-200">
          <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
          <a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
            "Neo-Tokyo District Price Forecast" <span class="text-xs text-gray-400">by Synthia_X</span>
          </a>
        </li>
        <li class="flex items-center text-gray-200">
          <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
          <a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
            "AI-Powered Property Management" <span class="text-xs text-gray-400">by CyberBroker</span>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <div class="flex flex-col sm:flex-row justify-between items-center bg-opacity-20 bg-gray-700 dark:bg-gray-800 p-4 rounded-md border border-gray-600 dark:border-gray-700">
    <p class="mb-4 sm:mb-0 text-sm text-gray-300 dark:text-gray-400">
      <span class="text-teal-400 dark:text-lime-400">1,245 Members Active</span> // 42 New Posts Today
    </p>
    <button class="flex items-center px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 dark:from-pink-600 dark:to-fuchsia-600 text-white rounded-full font-semibold 
                   shadow-lg hover:shadow-cyan-500/50 dark:hover:shadow-lime-500/50 transition-all duration-300 
                   transform hover:-translate-y-0.5 glow-button">
      <svg class="w-5 h-5 mr-2" 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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
      NEW THREAD
    </button>
  </div>

  <style>
    /* This is for the 'neon-shadow' and 'glow-button' effects */
    .neon-shadow {
      box-shadow: 
        0 0 5px rgba(59, 130, 246, 0.7),
        0 0 10px rgba(168, 85, 247, 0.7),
        0 0 15px rgba(59, 130, 246, 0.5),
        0 0 20px rgba(168, 85, 247, 0.5);
    }

    .dark .neon-shadow {
      box-shadow: 
        0 0 5px rgba(236, 72, 153, 0.7),
        0 0 10px rgba(139, 92, 246, 0.7),
        0 0 15px rgba(236, 72, 153, 0.5),
        0 0 20px rgba(139, 92, 246, 0.5);
    }

    .glow-button {
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .glow-button:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgba(59, 130, 246, 0.6) 0%, rgba(168, 85, 247, 0.6) 100%);
      mix-blend-mode: overlay;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
    }

    .dark .glow-button:before {
      background: linear-gradient(45deg, rgba(236, 72, 153, 0.6) 0%, rgba(139, 92, 246, 0.6) 100%);
    }

    .glow-button:hover:before {
      opacity: 1;
    }

    .glow-button:active {
      transform: scale(0.98);
      box-shadow: none;
    }
  </style>
</div>

Eコマース製品ギャラリー

eコマース向けのミニマリストでレスポンシブな製品ギャラリーコンポーネントで、オーシャン/ブルーの色調、ダークモードのサポート、インタラクティブな画像表示が特徴です。

開けるプレビュー

                <div class="bg-blue-50 dark:bg-gray-900 py-8 sm:py-12">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-extrabold text-blue-900 dark:text-blue-100 mb-8 text-center">
      Featured Products
    </h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1015/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Ocean Wave Speaker</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Immersive sound experience</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$129.99</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1041/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Azure Comfort Cushion</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Soft & elegant seating</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$39.99</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1025/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Deep Sea Watch</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Water-resistant smart device</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$249.99</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1053/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Sky Blue Backpack</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Lightweight & durable</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$79.50</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1063/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Coral Reef Artwork</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Vibrant wall decor</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$189.00</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1070/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Ocean Breeze Diffuser</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Relaxing aromatherapy</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$49.99</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 7 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1084/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Nautical Compass Mug</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">For your morning brew</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$18.75</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 8 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1018/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Aqua Fitness Bottle</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Stay hydrated in style</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$22.00</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Eコマースオータムダークローダー

eコマースアプリケーション向けのレスポンシブローダーコンポーネントで、暗い背景に秋の色が特徴で、目の疲れを軽減するように設計されています。3つの異なるローダーアニメーションが含まれています。

開けるプレビュー

                <div class="flex min-h-screen items-center justify-center bg-gray-950 p-4 dark:bg-gray-50">
  <div class="w-full max-w-4xl rounded-lg bg-gray-900 p-8 shadow-xl dark:bg-zinc-100 md:p-12">
    <h2 class="mb-8 text-center font-serif text-3xl font-bold text-orange-400 dark:text-orange-700 md:text-4xl">
      Processing Your Order...
    </h2>
    <p class="mb-10 text-center text-lg text-brown-300 dark:text-brown-700">
      Please wait a moment while we prepare your items for shipment. Your patience is appreciated.
    </p>

    <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">

      <!-- Loader 1: Spinning Circle -->
      <div class="flex flex-col items-center">
        <div class="relative flex h-24 w-24 items-center justify-center rounded-full border-4 border-brown-600 dark:border-brown-300">
          <div class="h-full w-full animate-spin-slow rounded-full border-4 border-l-transparent border-t-transparent border-orange-500 dark:border-orange-600"></div>
          <div class="absolute text-lg font-semibold text-brown-400 dark:text-brown-700">Loading</div>
        </div>
        <p class="mt-4 text-center text-md text-orange-300 dark:text-orange-800">Confirming Details</p>
      </div>

      <!-- Loader 2: Pulsing Dots -->
      <div class="flex flex-col items-center">
        <div class="flex h-24 w-min items-end justify-center">
          <span class="m-1 h-4 w-4 animate-pulse rounded-full bg-orange-600 dark:bg-orange-800" style="animation-delay: 0s;"></span>
          <span class="m-1 h-4 w-4 animate-pulse rounded-full bg-brown-500 dark:bg-brown-700" style="animation-delay: 0.2s;"></span>
          <span class="m-1 h-4 w-4 animate-pulse rounded-full bg-burgundy-600 dark:bg-burgundy-800" style="animation-delay: 0.4s;"></span>
        </div>
        <p class="mt-4 text-center text-md text-orange-300 dark:text-orange-800">Verifying Stock</p>
      </div>

      <!-- Loader 3: Horizontal Bar Progress -->
      <div class="flex flex-col items-center">
        <div class="relative h-6 w-full max-w-sm overflow-hidden rounded-full bg-brown-700 dark:bg-brown-300">
          <div class="h-full animate-progress-bar rounded-full bg-orange-500 dark:bg-orange-600"></div>
          <div class="absolute inset-0 flex items-center justify-center text-xs font-bold text-white dark:text-gray-900">75%</div>
        </div>
        <p class="mt-4 text-center text-md text-orange-300 dark:text-orange-800">Preparing Shipment</p>
      </div>

    </div>

    <div class="mt-12 text-center">
      <a href="#" class="inline-flex items-center rounded-md bg-orange-600 px-6 py-3 font-semibold text-white transition duration-300 ease-in-out hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-900 dark:bg-orange-700 dark:hover:bg-orange-800 dark:focus:ring-offset-zinc-100">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 15v1m7 4h2.586a1 1 0 00.707-.293l3.414-3.414a1 1 0 000-1.414L15.414 10a1 1 0 00-1.414 0L10.586 13a1 1 0 000 1.414l3.414 3.414a1 1 0 00.707.293H19"></path></svg>
        Return to Cart
      </a>
    </div>

  </div>
</div>

<style>
  /* Custom colors for autumn theme */
  .text-brown-300 { color: #d4a77d; }
  .dark\:text-brown-700 { color: #965f3f; }
  .text-brown-400 { color: #bf8f6b; }
  .dark\:text-brown-700 { color: #965f3f; } /* Re-affirming for dark mode */
  .border-brown-600 { border-color: #a0522d; }
  .dark\:border-brown-300 { border-color: #d4a77d; }
  .bg-brown-500 { background-color: #a0522d; }
  .dark\:bg-brown-700 { background-color: #965f3f; }
  .bg-brown-700 { background-color: #6c3f1f; }
  .dark\:bg-brown-300 { background-color: #d4a77d; }
  .bg-burgundy-600 { background-color: #800020; }
  .dark\:bg-burgundy-800 { background-color: #5d0016; }
  .text-orange-300 { color: #fdbb74; }
  .dark\:text-orange-800 { color: #9a4800; }
  .text-orange-400 { color: #fb923c; }
  .dark\:text-orange-700 { color: #c2410c; }

  /* Keyframes for animations */
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes progress-bar {
    0% { width: 0%; }
    100% { width: 75%; } /* Fixed at 75% for this example */
  }

  /* Tailwind utility classes for custom animations */
  .animate-spin-slow {
    animation: spin-slow 2s linear infinite;
  }
  .animate-progress-bar {
    animation: progress-bar 2s ease-out forwards; /* Plays once, stays at 75% */
  }
</style>

カートに入れるボタンコンポーネント

自然にインスパイアされたパステルカラーの「カートに入れる」ボタンコンポーネントは、ヘルスケア/医療アプリケーション向けに設計されており、流れるようなラインとダークモードをサポートするレスポンシブデザインが特徴です。

開けるプレビュー

                <div class="flex justify-center items-center p-4 bg-gradient-to-br from-fuchsia-50 to-purple-50 dark:from-purple-950 dark:via-fuchsia-950 dark:to-teal-950 min-h-screen">
  <button class="relative flex items-center justify-center py-3 px-8 text-lg font-semibold text-fuchsia-800 bg-gradient-to-r from-fuchsia-200 via-rose-100 to-purple-200 rounded-full shadow-lg overflow-hidden transition-all duration-300 ease-in-out
                   dark:from-fuchsia-800 dark:via-rose-700 dark:to-purple-800 dark:text-fuchsia-50 dark:shadow-xl dark:shadow-fuchsia-900/50
                   hover:scale-105 hover:shadow-xl hover:shadow-fuchsia-300/60 dark:hover:shadow-fuchsia-700/70
                   focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-700
                   active:scale-95">
    <span class="relative z-10 flex items-center space-x-2">
      <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M16 16h.01"></path>
      </svg>
      <span>Add to Cart</span>
    </span>
    <div class="absolute inset-0 bg-gradient-to-r from-fuchsia-100 via-rose-50 to-purple-100 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100
                dark:from-fuchsia-700 dark:via-rose-600 dark:to-purple-700"></div>

    <!-- Nature-inspired flowing lines overlay -->
    <svg class="absolute inset-0 w-full h-full opacity-30 pointer-events-none transform scale-150 transition-transform duration-500 ease-in-out group-hover:scale-100
                dark:opacity-10 dark:text-fuchsia-300" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path d="M0 50 C 25 20, 75 80, 100 50 L 100 100 L 0 100 Z" fill="currentColor" class="text-fuchsia-300/50 dark:text-fuchsia-600/50"></path>
      <path d="M0 60 C 20 90, 80 10, 100 40 V 100 H 0 Z" fill="currentColor" class="text-purple-300/50 dark:text-purple-600/50"></path>
    </svg>
  </button>
</div>

1 ... 8 9 10 11 12 ... 335

検索コンポーネント

カテゴリ

すべてのコンポーネント