検索コンポーネント

すべてのコンポーネント

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

Glassmorphism ウィッシュリストコンポーネント - 農業/農業

glassmorphism デザインスタイル、パステル調の配色、農業/農業 Web サイト向けに調整されたレスポンシブウィッシュリストコンポーネント。ぼかし効果、セマンティック HTML、および完全なダークモードのサポートを備えたすりガラスのような半透明の要素が特徴です。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-900 dark:via-zinc-800 dark:to-slate-900 transition-all duration-500">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center drop-shadow-lg">
      Your Harvest Wishlist
    </h1>

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

      <!-- Wishlist Item 1 -->
      <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden bg-white/30 dark:bg-gray-800/30 backdrop-blur-xl border border-white/50 dark:border-gray-700/50 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200/50 to-pink-200/50 dark:from-purple-800/50 dark:to-pink-800/50 opacity-30 blur-2xl -z-10"></div>
        <img src="https://picsum.photos/id/102/400/250" alt="Organic Carrots" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-white/50 dark:border-gray-700/50">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Heirloom Carrots</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-4 line-clamp-3">Sweet and vibrant heirloom carrots, perfect for fresh eating or roasting. Organically grown with care.</p>
        <div class="flex items-center justify-between text-gray-800 dark:text-gray-200 mb-4">
          <span class="block text-lg font-bold text-green-700 dark:text-green-400">$4.50 / lb</span>
          <div class="flex items-center space-x-1">
            <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.565-1.838-.197-1.539-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>
            <span class="text-sm">4.8 (120)</span>
          </div>
        </div>
        <div class="flex gap-3">
          <button class="flex-1 py-3 px-4 rounded-xl bg-gradient-to-r from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 text-white font-semibold shadow-md hover:from-green-500 hover:to-green-700 dark:hover:from-green-700 dark:hover:to-green-900 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            Add to Cart
          </button>
          <button class="p-3 rounded-xl bg-white/50 dark:bg-gray-700/50 border border-white/50 dark:border-gray-600/50 text-gray-700 dark:text-gray-200 hover:bg-gray-100/50 dark:hover:bg-gray-600/50 shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
          </button>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden bg-white/30 dark:bg-gray-800/30 backdrop-blur-xl border border-white/50 dark:border-gray-700/50 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-200/50 to-green-200/50 dark:from-blue-800/50 dark:to-green-800/50 opacity-30 blur-2xl -z-10"></div>
        <img src="https://picsum.photos/id/1080/400/250" alt="Fresh Tomatoes" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-white/50 dark:border-gray-700/50">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vine-Ripened Tomatoes</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-4 line-clamp-3">Juicy and flavorful tomatoes, ripened on the vine for peak taste. Ideal for salads or sauces.</p>
        <div class="flex items-center justify-between text-gray-800 dark:text-gray-200 mb-4">
          <span class="block text-lg font-bold text-green-700 dark:text-green-400">$3.75 / lb</span>
          <div class="flex items-center space-x-1">
            <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.565-1.838-.197-1.539-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>
            <span class="text-sm">4.7 (95)</span>
          </div>
        </div>
        <div class="flex gap-3">
          <button class="flex-1 py-3 px-4 rounded-xl bg-gradient-to-r from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 text-white font-semibold shadow-md hover:from-green-500 hover:to-green-700 dark:hover:from-green-700 dark:hover:to-green-900 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            Add to Cart
          </button>
          <button class="p-3 rounded-xl bg-white/50 dark:bg-gray-700/50 border border-white/50 dark:border-gray-600/50 text-gray-700 dark:text-gray-200 hover:bg-gray-100/50 dark:hover:bg-gray-600/50 shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
          </button>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden bg-white/30 dark:bg-gray-800/30 backdrop-blur-xl border border-white/50 dark:border-gray-700/50 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
        <div class="absolute inset-0 bg-gradient-to-br from-red-200/50 to-orange-200/50 dark:from-red-800/50 dark:to-orange-800/50 opacity-30 blur-2xl -z-10"></div>
        <img src="https://picsum.photos/id/106/400/250" alt="Fresh Berries" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-white/50 dark:border-gray-700/50">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Basket of Mixed Berries</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-4 line-clamp-3">A delightful mix of strawberries, blueberries, and raspberries. Hand-picked for freshness and flavor.</p>
        <div class="flex items-center justify-between text-gray-800 dark:text-gray-200 mb-4">
          <span class="block text-lg font-bold text-green-700 dark:text-green-400">$6.00 / basket</span>
          <div class="flex items-center space-x-1">
            <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.565-1.838-.197-1.539-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>
            <span class="text-sm">4.9 (150)</span>
          </div>
        </div>
        <div class="flex gap-3">
          <button class="flex-1 py-3 px-4 rounded-xl bg-gradient-to-r from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 text-white font-semibold shadow-md hover:from-green-500 hover:to-green-700 dark:hover:from-green-700 dark:hover:to-green-900 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            Add to Cart
          </button>
          <button class="p-3 rounded-xl bg-white/50 dark:bg-gray-700/50 border border-white/50 dark:border-gray-600/50 text-gray-700 dark:text-gray-200 hover:bg-gray-100/50 dark:hover:bg-gray-600/50 shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
          </button>
        </div>
      </div>

    </div>
  </div>
</div>

メディア埋め込みコンポーネント - Marketplace

マーケットプレイス向けに設計された複雑でレスポンシブなメディア埋め込みコンポーネントで、レトロ/ビンテージカラーパレットとダークモードをサポートするマテリアルデザインの美学を特徴としています。

開けるプレビュー

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 transition-colors duration-300 p-4 sm:p-6 md:p-8 lg:p-10">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transition-all duration-300">
    <div class="md:flex">
      <!-- Media Section -->
      <div class="md:flex-shrink-0 relative w-full md:w-2/3 lg:w-3/5 xl:w-2/3">
        <div class="aspect-w-16 aspect-h-9 relative overflow-hidden bg-gray-200 dark:bg-gray-700">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/1200/675?random=1" alt="Product media">
          <div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/70 to-transparent text-white flex justify-between items-end">
            <div class="flex items-center space-x-2">
              <button class="p-2 bg-black/50 rounded-full hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-yellow-400/80 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
              </button>
              <span class="text-sm font-medium">0:35 / 4:12</span>
            </div>
            <div class="flex items-center space-x-2">
              <button class="p-2 bg-black/50 rounded-full hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-yellow-400/80 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M11 18h2v-6h-2v6zm4 0h2v-6h-2v6zM12 4.4L2 9.4v12.2h20V9.4L12 4.4zM4 20v-8h16v8H4z"></path></svg>
              </button>
              <button class="p-2 bg-black/50 rounded-full hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-yellow-400/80 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M15 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6.6-.9c.4-.7.1-1.6-.6-2-.7-.4-1.6-.1-2 .6-.4.7-.1 1.6.6 2 .7.4 1.6.1 2-.6zM9.4 14.9c-.4.7-.1 1.6.6 2 .7.4 1.6.1 2-.6.4-.7.1-1.6-.6-2-.7-.4-1.6-.1-2 .6zm3.2-5.4c.4.7.1 1.6-.6 2-.7.4-1.6.1-2-.6-.4-.7-.1-1.6.6-2 .7-.4 1.6-.1 2 .6z"></path></svg>
              </button>
            </div>
          </div>
        </div>
        <div class="grid grid-cols-4 gap-2 p-2 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <img class="w-full h-20 object-cover rounded shadow-sm cursor-pointer border-2 border-yellow-500" src="https://picsum.photos/300/200?random=1" alt="Thumbnail 1">
          <img class="w-full h-20 object-cover rounded shadow-sm cursor-pointer opacity-70 hover:opacity-100" src="https://picsum.photos/300/200?random=2" alt="Thumbnail 2">
          <img class="w-full h-20 object-cover rounded shadow-sm cursor-pointer opacity-70 hover:opacity-100" src="https://picsum.photos/300/200?random=3" alt="Thumbnail 3">
          <div class="relative w-full h-20 bg-gray-300 dark:bg-gray-600 rounded flex items-center justify-center cursor-pointer group">
            <img class="w-full h-full object-cover rounded opacity-70 group-hover:opacity-100" src="https://picsum.photos/300/200?random=4" alt="Thumbnail 4">
            <div class="absolute inset-0 bg-black/50 text-white flex items-center justify-center rounded">
              <span class="text-lg font-bold">+5</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Details Section -->
      <div class="p-6 md:p-8 md:w-1/3 lg:w-2/5 xl:w-1/3 flex flex-col justify-between">
        <div>
          <div class="uppercase tracking-wide text-sm text-amber-600 dark:text-amber-400 font-semibold mb-2">Vintage Collectible</div>
          <h1 class="block mt-1 text-2xl leading-tight font-extrabold text-gray-900 dark:text-white break-words md:text-3xl lg:text-4xl">
            Mid-Century Modern Desk Lamp
          </h1>
          <p class="mt-3 text-gray-600 dark:text-gray-300 text-sm md:text-base leading-relaxed">
            A rare and exquisite piece from the 1960s, a true testament to timeless design and craftsmanship, perfect for adding a touch of retro elegance to any space.
          </p>

          <div class="mt-4 flex items-baseline">
            <p class="text-4xl font-extrabold text-gray-900 dark:text-yellow-400 mr-2">$129.99</p>
            <p class="text-xl text-gray-500 dark:text-gray-400 line-through">$150.00</p>
            <span class="ml-2 text-green-600 dark:text-green-400 font-semibold text-sm">(13% off)</span>
          </div>

          <div class="mt-6">
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">Seller:</h3>
            <div class="flex items-center">
              <img class="h-10 w-10 rounded-full object-cover border-2 border-amber-400 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Seller Avatar">
              <div class="ml-4">
                <p class="text-lg font-medium text-gray-900 dark:text-white">RetroFinds Emporium</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">500+ sales <span class="text-amber-500">★ 4.9</span></p>
              </div>
            </div>
          </div>

          <div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">Features:</h3>
            <ul class="list-disc list-inside text-gray-600 dark:text-gray-300 text-sm space-y-1">
              <li>Solid Brass Construction</li>
              <li>Adjustable Articulating Arm</li>
              <li>Original Bakelite Switch</li>
              <li>Works with E27 LED bulbs</li>
            </ul>
          </div>
        </div>

        <div class="mt-8 flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
          <button class="flex-1 bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-amber-400/50">
            <svg class="w-5 h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M17 18a2 2 0 01-2 2A2 2 0 0113 18A2 2 0 0115 16A2 2 0 0117 18zm-7 0a2 2 0 01-2 2A2 2 0 016 18A2 2 0 018 16A2 2 0 0110 18zm10.7-15.6l-1.6 1.8c-1.1.9-2.6 1.2-4 1.1h-4.3c-.6 0-1.1.2-1.4.6l-2-2.1c-.8-.9-2.2-.9-3 0-1.2 1.3-1.4 3-1.4 4.5l.5 6.3c.1.7.7 1.2 1.4 1.2h14c.7 0 1.3-.5 1.4-1.2l.5-6.3c.1-1.5-.1-3.2-1.4-4.5z"></path></svg>
            Add to Cart
          </button>
          <button class="flex-1 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300/50 dark:focus:ring-gray-600/50">
            <svg class="w-5 h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
            Wishlist
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Retro_Vintage_Shopping_Cart_Component

レトロ/ヴィンテージの美学を備えたレスポンシブなショッピングカートコンポーネントで、セピア/ブラウンの色調を使用しており、製品のショーケースに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="font-sans antialiased text-gray-800 bg-amber-50 dark:bg-stone-900 dark:text-stone-100 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-4xl mx-auto bg-amber-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-4 border-amber-200 dark:border-stone-700 transform transition duration-500 hover:scale-[1.01]">
    <div class="p-6 sm:p-8 border-b-4 border-amber-200 dark:border-stone-700 bg-amber-200 dark:bg-stone-700">
      <h1 class="text-3xl sm:text-4xl font-bold text-amber-900 dark:text-stone-100 text-center uppercase tracking-wider font-['Press_Start_2P'] drop-shadow-lg">Your Cart</h1>
    </div>

    <div class="p-4 sm:p-6 lg:p-8 space-y-6 sm:space-y-8">
      <!-- Cart Item 1 -->
      <div class="flex flex-col sm:flex-row items-center bg-amber-50 dark:bg-stone-900 p-4 rounded-lg shadow-md border-2 border-amber-200 dark:border-stone-700 relative group transition duration-300 ease-in-out transform hover:translate-y-[-2px]">
        <button class="absolute top-2 right-2 text-amber-500 hover:text-red-600 dark:text-stone-400 dark:hover:text-red-500 transition-colors duration-200" title="Remove item">
          <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="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
        <img src="https://picsum.photos/seed/vintage1/120/120" alt="Retro Camera" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-md border-2 border-amber-300 dark:border-stone-600 shadow-sm mr-4 sm:mr-6 flex-shrink-0">
        <div class="flex-grow mt-4 sm:mt-0 text-center sm:text-left">
          <h3 class="text-xl sm:text-2xl font-semibold text-amber-800 dark:text-stone-200 mb-1">The 'Viewfinder' Camera</h3>
          <p class="text-amber-700 dark:text-stone-300 text-sm sm:text-base">Analog aesthetics, digital reliability.</p>
          <p class="text-lg sm:text-xl font-bold text-amber-900 dark:text-stone-100 mt-2">$499.99</p>
        </div>
        <div class="flex items-center mt-4 sm:mt-0 ml-0 sm:ml-6">
          <label for="qty1" class="sr-only">Quantity</label>
          <input type="number" id="qty1" value="1" min="1" class="w-16 p-2 text-center rounded-md bg-amber-100 dark:bg-stone-800 border-2 border-amber-300 dark:border-stone-600 text-amber-900 dark:text-stone-100 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-stone-400 font-bold">
        </div>
      </div>

      <!-- Cart Item 2 -->
      <div class="flex flex-col sm:flex-row items-center bg-amber-50 dark:bg-stone-900 p-4 rounded-lg shadow-md border-2 border-amber-200 dark:border-stone-700 relative group transition duration-300 ease-in-out transform hover:translate-y-[-2px]">
        <button class="absolute top-2 right-2 text-amber-500 hover:text-red-600 dark:text-stone-400 dark:hover:text-red-500 transition-colors duration-200" title="Remove item">
          <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="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
        <img src="https://picsum.photos/seed/vintage2/120/120" alt="Old School Headphones" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-md border-2 border-amber-300 dark:border-stone-600 shadow-sm mr-4 sm:mr-6 flex-shrink-0">
        <div class="flex-grow mt-4 sm:mt-0 text-center sm:text-left">
          <h3 class="text-xl sm:text-2xl font-semibold text-amber-800 dark:text-stone-200 mb-1">The 'Soundscape' Headphones</h3>
          <p class="text-amber-700 dark:text-stone-300 text-sm sm:text-base">Crystal clear audio, classic design.</p>
          <p class="text-lg sm:text-xl font-bold text-amber-900 dark:text-stone-100 mt-2">$129.99</p>
        </div>
        <div class="flex items-center mt-4 sm:mt-0 ml-0 sm:ml-6">
          <label for="qty2" class="sr-only">Quantity</label>
          <input type="number" id="qty2" value="2" min="1" class="w-16 p-2 text-center rounded-md bg-amber-100 dark:bg-stone-800 border-2 border-amber-300 dark:border-stone-600 text-amber-900 dark:text-stone-100 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-stone-400 font-bold">
        </div>
      </div>

      <!-- Cart Item 3 -->
      <div class="flex flex-col sm:flex-row items-center bg-amber-50 dark:bg-stone-900 p-4 rounded-lg shadow-md border-2 border-amber-200 dark:border-stone-700 relative group transition duration-300 ease-in-out transform hover:translate-y-[-2px]">
        <button class="absolute top-2 right-2 text-amber-500 hover:text-red-600 dark:text-stone-400 dark:hover:text-red-500 transition-colors duration-200" title="Remove item">
          <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="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
        <img src="https://picsum.photos/seed/vintage3/120/120" alt="Vinyl Record" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-md border-2 border-amber-300 dark:border-stone-600 shadow-sm mr-4 sm:mr-6 flex-shrink-0">
        <div class="flex-grow mt-4 sm:mt-0 text-center sm:text-left">
          <h3 class="text-xl sm:text-2xl font-semibold text-amber-800 dark:text-stone-200 mb-1">Classic Rock Vinyl</h3>
          <p class="text-amber-700 dark:text-stone-300 text-sm sm:text-base">Timeless tunes, warm analog sound.</p>
          <p class="text-lg sm:text-xl font-bold text-amber-900 dark:text-stone-100 mt-2">$24.99</p>
        </div>
        <div class="flex items-center mt-4 sm:mt-0 ml-0 sm:ml-6">
          <label for="qty3" class="sr-only">Quantity</label>
          <input type="number" id="qty3" value="1" min="1" class="w-16 p-2 text-center rounded-md bg-amber-100 dark:bg-stone-800 border-2 border-amber-300 dark:border-stone-600 text-amber-900 dark:text-stone-100 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-stone-400 font-bold">
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 border-t-4 border-amber-200 dark:border-stone-700 bg-amber-200 dark:bg-stone-700">
      <div class="flex justify-between items-center text-xl sm:text-2xl font-bold text-amber-900 dark:text-stone-100 mb-4">
        <span class="uppercase font-['Press_Start_2P']">Total:</span>
        <span class="text-3xl sm:text-4xl text-amber-950 dark:text-stone-50 drop-shadow-md">$774.96</span>
      </div>
      <div class="flex flex-col sm:flex-row justify-center gap-4">
        <button class="flex-1 py-3 px-6 bg-amber-700 hover:bg-amber-800 dark:bg-stone-700 dark:hover:bg-stone-600 text-white font-bold rounded-lg shadow-lg uppercase tracking-wider transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 border-2 border-amber-800 dark:border-stone-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-stone-500">
          Continue Shopping
        </button>
        <button class="flex-1 py-3 px-6 bg-amber-900 hover:bg-amber-950 dark:bg-stone-900 dark:hover:bg-stone-800 text-white font-bold rounded-lg shadow-lg uppercase tracking-wider transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 border-2 border-amber-950 dark:border-stone-800 focus:outline-none focus:ring-4 focus:ring-amber-400 dark:focus:ring-stone-600">
          Proceed to Checkout
        </button>
      </div>
    </div>
  </div>

  <!-- Add a specific font if you want the 'Press Start 2P' effect or remove it -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
  </style>
</div>

アクティビティフィードコンポーネント

サイバーパンクの秋の美学を備えたシンプルで応答性の高いアクティビティフィードコンポーネントで、暗い背景、豊かなオレンジ、ブラウン、バーガンディの色調が特徴で、スポーツ/フィットネスアプリケーションに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="min-h-screen bg-[#1a0f0f] dark:bg-[#0a0000] p-4 sm:p-6 md:p-8 font-mono text-[#f8a848] dark:text-[#f8d878]">
  <div class="max-w-xl mx-auto bg-[#2b1a1a] dark:bg-[#1a0a0a] rounded-lg shadow-lg overflow-hidden border border-[#5c3d2e] dark:border-[#3a1d1d]">
    <div class="p-4 sm:p-6 border-b border-[#5c3d2e] dark:border-[#3a1d1d] flex items-center justify-between">
      <h2 class="text-xl sm:text-2xl font-bold uppercase text-[#f8a848] dark:text-[#f8d878]">
        <span class="text-[#ff6f00] dark:text-[#ff9f48]">//</span> ACTIVITY FEED
      </h2>
      <span class="text-sm text-[#8c5339] dark:text-[#b87353]">LIVE <span class="animate-pulse text-[#d62828]">•</span></span>
    </div>

    <div class="divide-y divide-[#3d2929] dark:divide-[#2a1a1a]">

      <!-- Activity Item 1 -->
      <div class="p-4 sm:p-6 flex items-start space-x-4">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-[#ff6f00] dark:border-[#ff9f48] shadow-md" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm sm:text-base mb-1">
            <strong class="text-[#ff6f00] dark:text-[#ff9f48]">Jake 'The Hammer' Miller</strong> completed <span class="text-[#bf4a24] dark:text-[#e07b39]">5K Run</span>.
          </p>
          <p class="text-xs text-[#8c5339] dark:text-[#b87353]">15 minutes ago</p>
          <div class="mt-2 bg-[#1f1212] dark:bg-[#0f0707] p-3 rounded-md border border-[#3d2929] dark:border-[#2a1a1a] text-sm text-[#f8a848] dark:text-[#f8d878] leading-tight">
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Distance: 5.0 km</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Time: 23:45</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Avg Pace: 4:45/km</p>
          </div>
        </div>
      </div>

      <!-- Activity Item 2 -->
      <div class="p-4 sm:p-6 flex items-start space-x-4">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-[#ff6f00] dark:border-[#ff9f48] shadow-md" src="https://randomuser.me/api/portraits/women/62.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm sm:text-base mb-1">
            <strong class="text-[#ff6f00] dark:text-[#ff9f48]">Sarah 'Rocket' Lee</strong> joined the <span class="text-[#bf4a24] dark:text-[#e07b39]">'Autumn Marathon Prep' Challenge</span>.
          </p>
          <p class="text-xs text-[#8c5339] dark:text-[#b87353]">1 hour ago</p>
          <div class="mt-2 text-sm text-[#f8a848] dark:text-[#f8d878]">
            <img class="w-full max-h-40 object-cover rounded-md border border-[#3d2929] dark:border-[#2a1a1a] mb-2" src="https://picsum.photos/400/250?random=1" alt="Challenge Image">
            <p class="text-xs text-[#8c5339] dark:text-[#b87353]">Challenge goal: 42.2 km in 4 weeks.</p>
          </div>
        </div>
      </div>

      <!-- Activity Item 3 -->
      <div class="p-4 sm:p-6 flex items-start space-x-4">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-[#ff6f00] dark:border-[#ff9f48] shadow-md" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm sm:text-base mb-1">
            <strong class="text-[#ff6f00] dark:text-[#ff9f48]">Coach Dave</strong> updated <span class="text-[#bf4a24] dark:text-[#e07b39]">Team Blaze's Next Practice</span>.
          </p>
          <p class="text-xs text-[#8c5339] dark:text-[#b87353]">3 hours ago</p>
          <div class="mt-2 bg-[#1f1212] dark:bg-[#0f0707] p-3 rounded-md border border-[#3d2929] dark:border-[#2a1a1a] text-sm text-[#f8a848] dark:text-[#f8d878] leading-tight">
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Date: 2023-11-10</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Time: 18:00 EST</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Location: City Sports Arena, Court 3</p>
          </div>
        </div>
      </div>

    </div>

    <div class="p-4 sm:p-6 border-t border-[#5c3d2e] dark:border-[#3a1d1d] text-center text-xs text-[#8c5339] dark:text-[#b87353]">
      <p>DATA STREAM // ENCRYPTED & SECURE</p>
    </div>
  </div>
</div>

バウハウスパステルレーティングシステムコンポーネント

幾何学的なフォルムとパステルカラーを備えたレスポンシブで機能的な評価システムコンポーネントで、ダッシュボードの統合に適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6 sm:p-8 border border-gray-100 dark:border-gray-600 transition-all duration-300 ease-in-out">
    <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-wide">Rate Our Service</h3>
    
    <div class="flex justify-center items-center gap-2 sm:gap-3 mb-8">
      <button aria-label="1 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
      <button aria-label="2 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
      <button aria-label="3 star rating" class="rating-star text-3xl sm:text-4xl text-yellow-400 dark:text-yellow-300 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
      <button aria-label="4 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
      <button aria-label="5 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
    </div>
    
    <div class="mb-6">
      <label for="comments" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Comments (Optional):</label>
      <textarea id="comments" rows="4" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-2 focus:ring-blue-300 focus:border-blue-300 dark:bg-gray-800 dark:text-gray-100 resize-none transition-colors duration-200 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Tell us about your experience..."></textarea>
    </div>
    
    <div class="flex justify-center">
      <button type="submit" class="w-full max-w-xs py-2 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 dark:focus:ring-blue-600 transition-colors duration-200 ease-in-out transform hover:-translate-y-0.5">
        Submit Rating
      </button>
    </div>
  </div>
</div>

オーディオプレーヤーコンポーネント

紙や印刷物にインスパイアされたデザイン、クールなニュートラルな配色、ダークモードのサポート、エンターテインメントやメディアプラットフォームに適したインタラクティブ機能を備えたレスポンシブオーディオプレーヤーコンポーネント。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">

  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border border-gray-200 dark:border-gray-700
              transform transition-all duration-300 ease-in-out
              hover:shadow-2xl hover:-translate-y-1
              print-paper-effect relative">

    <!-- Page Curl / Fold Effect (Visual detail for paper feel) -->
    <div class="absolute top-0 right-0 w-16 h-16 bg-gray-50 dark:bg-gray-700 rounded-bl-lg opacity-75" style="clip-path: polygon(100% 0, 0 0, 100% 100%);"></div>
    <div class="absolute top-0 right-0 w-16 h-16 bg-gray-100 dark:bg-gray-900 rounded-bl-lg" style="clip-path: polygon(100% 0, 70% 0, 100% 30%);"></div>

    <!-- Album Art Section -->
    <div class="relative w-full h-64 overflow-hidden rounded-t-lg border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/600/400?random=1" alt="Album Art" class="w-full h-full object-cover object-center filter grayscale-0 dark:filter-none">
      <div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
      <div class="absolute bottom-4 left-4 text-white p-2 rounded-md">
        <h3 class="text-xl font-bold mb-1 drop-shadow-lg">Ephemeral Echoes</h3>
        <p class="text-sm text-gray-200 drop-shadow-md">Luna & The Celestial Tides</p>
      </div>
    </div>

    <!-- Controls Section -->
    <div class="p-6 space-y-4">

      <!-- Playback Progress Bar -->
      <div class="w-full flex items-center space-x-2 text-gray-600 dark:text-gray-400">
        <span class="text-xs font-medium min-w-[30px]">0:45</span>
        <div class="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden relative cursor-pointer">
          <div class="h-full bg-blue-500 dark:bg-blue-400 rounded-full" style="width: 30%;"></div>
          <!-- Draggable thumb (illustrative) -->
          <div class="absolute h-4 w-4 bg-white dark:bg-gray-300 rounded-full shadow border-2 border-blue-500 dark:border-blue-400 -translate-y-1/2 top-1/2 left-[30%] -ml-2"></div>
        </div>
        <span class="text-xs font-medium min-w-[30px]">3:20</span>
      </div>

      <!-- Main Playback Buttons -->
      <div class="flex items-center justify-center space-x-6 text-gray-700 dark:text-gray-300">
        <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200" aria-label="Previous">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </button>
        <button class="p-4 bg-blue-500 dark:bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-all duration-200" aria-label="Play/Pause">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
        <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200" aria-label="Next">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M6 5l7 7-7 7" />
          </svg>
        </button>
      </div>

      <!-- Secondary Controls -->
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 pt-4 border-t border-dashed border-gray-300 dark:border-gray-600">
        <button class="flex items-center space-x-1 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 text-sm" aria-label="Shuffle">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12V8m5.416-3a8.001 8.001 0 0115.356 2m-1.879 11H18V9m3 3L15 9m3 9l3 3"/></svg>
          <span class="hidden sm:inline">Shuffle</span>
        </button>

        <div class="flex items-center space-x-4">
          <!-- Volume Control -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="Volume">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.536 8.464A5 5 0 0117 12h2a7 7 0 00-1.745-4.37A9.001 9.001 0 0121 12h2a11.001 11.001 0 00-2.825-6.879L18 6l-2.464-2.464zM9 6H4a1 1 0 00-1 1v10a1 1 0 001 1h5l4 4V2l-4 4z" />
            </svg>
          </button>
          <!-- Current Playback Mode (Loop/Repeat) -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="Repeat">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
            </svg>
          </button>
          <!-- More Options / Playlist -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="More Options">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
            </svg>
          </button>
        </div>
      </div>
    </div>

  </div>

</div>

<style>
  /* This is for the 'paper-like' effect */
  .print-paper-effect {
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Simulating a subtle texture and shadow */
  }

  /* Optional: Add a very subtle grain/texture if feasible without extra elements */
  /* For a true paper look, a background image or SVG filter would be ideal, but out of scope for pure HTML/TW */
  /* .print-paper-effect::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0; bottom: 0;
     background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuMDcwMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDEyOCwxMjgsMTI4LDAuMDgpIiBzdHJva2Utd2lkdGg9IjEuMjUiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48L3BhdHRlcm4+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuMDcwMikvIj48L3N2Z2c+');
     opacity: 0.2;
     pointer-events: none;
     z-index: 0;
  } */
</style>

Brutalism_Portfolio_Columns_Component

ブルータリズムにインスパイアされたマルチカラムポートフォリオコンポーネントで、落ち着いた色で、大きなタイポグラフィ、ハイコントラストの境界線、非対称のレイアウトが特徴です。ダークモードのサポートが含まれており、タイトル、説明、画像を含むプロジェクトを紹介します。

開けるプレビュー

                <section class="p-4 md:p-8 lg:p-12 min-h-screen bg-gray-100 dark:bg-gray-900 font-mono text-gray-900 dark:text-gray-100 transition-colors duration-300">
  <div class="max-w-7xl mx-auto border-4 border-gray-900 dark:border-gray-100 p-4 lg:p-8 space-y-8 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">

    <!-- Left Column - Main Title & Intro -->
    <div class="lg:col-span-1 border-b-4 lg:border-b-0 lg:border-r-4 border-gray-900 dark:border-gray-100 pb-4 lg:pb-0 lg:pr-4">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl uppercase leading-none mb-4 tracking-tighter text-gray-900 dark:text-gray-100">
        <span class="block">My</span>
        <span class="block text-red-700 dark:text-red-300">Work</span>
        <span class="block">Showcase</span>
      </h1>
      <p class="text-lg md:text-xl leading-snug tracking-tight max-w-sm mb-4">
        A raw collection of creations, defying norms and embracing the unexpected.
      </p>
      <div class="flex space-x-2">
        <button class="px-4 py-2 border-2 border-gray-900 dark:border-gray-100 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 uppercase text-sm font-bold hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-200">
          See All
        </button>
        <button class="px-4 py-2 border-2 text-gray-900 dark:text-gray-100 border-gray-900 dark:border-gray-100 uppercase text-sm font-bold hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
          About Me
        </button>
      </div>
    </div>

    <!-- Right Columns - Projects -->
    <div class="lg:col-span-2 space-y-8">
      
      <!-- Project 1 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-b-4 border-gray-900 dark:border-gray-100 pb-8">
        <div class="md:col-span-1">
          <img src="https://picsum.photos/seed/brutalim_proj1/600/400" alt="Project 1 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
        </div>
        <div class="md:col-span-1 space-y-2">
          <h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">The Grid Disjunction</h2>
          <p class="text-base leading-snug">
            An experimental web interface exploring fragmented layouts and stark contrasts. Built with raw HTML and CSS. 
          </p>
          <ul class="flex flex-wrap text-sm gap-2 mt-4">
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">UI/UX</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Web Design</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Brutalism</li>
          </ul>
          <a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project &rarr;</a>
        </div>
      </div>

      <!-- Project 2 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-b-4 border-gray-900 dark:border-gray-100 pb-8">
        <div class="md:col-span-1 order-2 md:order-1 space-y-2">
          <h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">Echoes of Form</h2>
          <p class="text-base leading-snug">
            A series of digital art pieces focusing on deconstructed shapes and desaturated palettes.
          </p>
          <ul class="flex flex-wrap text-sm gap-2 mt-4">
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Generative Art</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Digital Painting</li>
          </ul>
          <a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project &rarr;</a>
        </div>
        <div class="md:col-span-1 order-1 md:order-2">
          <img src="https://picsum.photos/seed/brutalim_proj2/600/400" alt="Project 2 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
        </div>
      </div>

      <!-- Project 3 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="md:col-span-1">
          <img src="https://picsum.photos/seed/brutalim_proj3/600/400" alt="Project 3 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
        </div>
        <div class="md:col-span-1 space-y-2">
          <h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">Concrete Dreams</h2>
          <p class="text-base leading-snug">
            Architectural visualizations with harsh lighting and exposed structures.
          </p>
          <ul class="flex flex-wrap text-sm gap-2 mt-4">
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">3D Modeling</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Rendering</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Architecture</li>
          </ul>
          <a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project &rarr;</a>
        </div>
      </div>

    </div>

  </div>
</section>

Playful_Finance_Loader

金融/銀行インターフェース用の遊び心のあるシンプルなローダーコンポーネントで、クールなニュートラルと丸みを帯びた要素が特徴です。ダークモードのサポートにより完全に応答します。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 p-4">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-8 transition-colors duration-300">
    <div class="flex flex-col items-center justify-center space-y-6">
      <div class="relative w-24 h-24">
        <!-- Outer ring -->
        <div class="absolute inset-0 rounded-full border-4 border-dashed border-gray-200 dark:border-gray-700 animate-spin-slow opacity-75"></div>
        <!-- Inner spinning circles -->
        <div class="absolute inset-4 rounded-full border-4 border-solid border-blue-300 dark:border-blue-500 animate-spin opacity-90"></div>
        <div class="absolute inset-4 rounded-full border-4 border-solid border-gray-400 dark:border-gray-600 animate-spin-reverse opacity-80"></div>
        <!-- Center icon/text -->
        <div class="absolute inset-0 flex items-center justify-center">
          <svg class="w-12 h-12 text-blue-400 dark:text-blue-300" 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.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M.636 12l.707-.707M12 21v-1m-6.364-1.636l.707-.707M3 12H2m1-.707l-.707-.707m0 0a2 2 0 112.828 2.828l-2.828-2.828zM12 12a3 3 0 100-6 3 3 0 000 6z"></path>
          </svg>
        </div>
      </div>

      <h2 class="text-xl sm:text-2xl font-semibold text-gray-700 dark:text-gray-200 text-center">
        Processing Transaction...
      </h2>
      <p class="text-sm sm:text-base text-gray-500 dark:text-gray-400 text-center max-w-xs">
        Please wait while we securely process your request. This may take a few moments.
      </p>

      <div class="w-full bg-gray-100 dark:bg-gray-700 rounded-full h-2.5 sm:h-3 overflow-hidden mt-4 shadow-inner">
        <div class="bg-blue-400 dark:bg-blue-600 h-full rounded-full transition-all duration-1000 ease-in-out" style="width: 75%;">
        </div>
      </div>
    </div>
  </div>

  <style>
    @keyframes spin-slow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes spin-reverse {
      from { transform: rotate(0deg); }
      to { transform: rotate(-360deg); }
    }
    .animate-spin-slow {
      animation: spin-slow 3s linear infinite;
    }
    .animate-spin-reverse {
      animation: spin-reverse 1.5s linear infinite;
    }
  </style>
</div>

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

サンセット/ウォームトーンのミニマリストでレスポンシブなパスワードリセットコンポーネントで、ダークモードのサポートを含む食品/レストランのWebサイトに適しています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-orange-50 to-red-100 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8 space-y-6 transform transition-all duration-300 hover:shadow-2xl">
    <div class="text-center">
      <h2 class="mt-2 text-3xl font-extrabold text-orange-600 dark:text-orange-400 capitalize drop-shadow-sm">Reset Your Password</h2>
      <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">Enter your email address to receive a password reset link.</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email address</label>
        <div class="mt-1">
          <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-transparent focus:border-orange-500 dark:focus:border-orange-400 sm:text-sm bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white transition-colors duration-200 ease-in-out">
        </div>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-700 dark:focus:ring-orange-500 transition-colors duration-200 ease-in-out transform hover:scale-105 active:scale-95">
          Send Reset Link
        </button>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-sm">
        <a href="#" class="font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300">
          Remembered your password? Log In
        </a>
      </p>
    </div>
  </div>
</div>

レトロ不動産パンくずリスト

秋の色を基調としたレトロ/ビンテージスタイルのシンプルでレスポンシブなパンくずリストナビゲーションコンポーネントで、ダークモードのサポートを含む不動産物件リストに適しています。

開けるプレビュー

                <nav class="flex justify-center py-4 px-2 sm:px-4 text-sm md:text-base bg-gradient-to-b from-amber-50 to-amber-100 dark:from-stone-900 dark:to-stone-800" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-2 sm:space-x-4">
    <li class="inline-flex items-center">
      <a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
        <svg class="w-4 h-4 mr-1 sm:mr-2 text-orange-700 dark:text-orange-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
        </svg>
        Home
      </a>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
        <a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
          Properties
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
        <a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
          Houses
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
        <span class="text-stone-600 dark:text-stone-400 font-light font-serif tracking-wide pr-1 sm:pr-0">
          123 Vintage Lane
        </span>
      </div>
    </li>
  </ol>
</nav>

1 ... 75 76 77 78 79 ... 335

検索コンポーネント

カテゴリ

すべてのコンポーネント