ウィッシュリスト

ウィッシュリストコンポーネント

ビジネスWebサイト向けのブルータリストスタイルのウィッシュリストコンポーネントで、グレースケールの配色と適度な複雑さが特徴です。Tailwind CSSクラスを使用したダークモードサポートのレスポンシブデザイン。

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h2 class="text-2xl font-bold mb-4 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Wishlist</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
      <img src="https://picsum.photos/seed/item1/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
      <h3 class="text-xl font-bold mb-2">Product Title 1</h3>
      <p class="mb-2">Short description of the product.</p>
      <p class="font-bold mb-4">$99.99</p>
      <button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
      <div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
    </div>
    <div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
      <img src="https://picsum.photos/seed/item2/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
      <h3 class="text-xl font-bold mb-2">Product Title 2</h3>
      <p class="mb-2">Short description of the product.</p>
      <p class="font-bold mb-4">$149.99</p>
      <button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
      <div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">Out of Stock</div>
    </div>
    <div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
      <img src="https://picsum.photos/seed/item3/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
      <h3 class="text-xl font-bold mb-2">Product Title 3</h3>
      <p class="mb-2">Short description of the product.</p>
      <p class="font-bold mb-4">$79.99</p>
      <button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
      <div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
    </div>
  </div>
</div>

ウィッシュリストコンポーネント

ダッシュボード用のシンプルな単色デザインのダークモードウィッシュリストコンポーネント

プレビューを開く

                <div class="bg-gray-900 text-gray-200 dark:bg-gray-800 dark:text-gray-100 min-h-screen p-8">
  <div class="max-w-md mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-gray-100 dark:text-gray-50">My Wishlist</h2>
    
    <!-- Wishlist Item 1 -->
    <div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
      <div class="flex items-center">
        <img src="https://picsum.photos/id/1018/60/60" alt="Product Image" class="rounded-md mr-4">
        <div>
          <h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 1</h3>
          <p class="text-gray-400 dark:text-gray-300">$19.99</p>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
      <div class="flex items-center">
        <img src="https://picsum.photos/id/1015/60/60" alt="Product Image" class="rounded-md mr-4">
        <div>
          <h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 2</h3>
          <p class="text-gray-400 dark:text-gray-300">$29.50</p>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Wishlist Item 3 -->
    <div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center">
        <img src="https://picsum.photos/id/1016/60/60" alt="Product Image" class="rounded-md mr-4">
        <div>
          <h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 3</h3>
          <p class="text-gray-400 dark:text-gray-300">$9.00</p>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

  </div>
</div>

ウィッシュリストコンポーネント

レトロ/ビンテージデザインの美学でスタイリングされたレスポンシブなウィッシュリストコンポーネントで、eコマース用の単色の配色を使用しています。

プレビューを開く

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">My Wishlist</h2>
        <p class="text-gray-600 dark:text-gray-400">Items I'd love to get someday!</p>
    </div>
    <div class="divide-y divide-gray-300 dark:divide-gray-600">
        <!-- Item 1 -->
        <div class="flex items-center justify-between p-4">
            <img src="https://picsum.photos/100/100" alt="Item 1" class="rounded-full">
            <div class="ml-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Vintage Camera</h3>
                <span class="text-gray-500 dark:text-gray-400">Price: $120</span>
            </div>
            <button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
                Add to Cart
            </button>
        </div>
        <!-- Item 2 -->
        <div class="flex items-center justify-between p-4">
            <img src="https://picsum.photos/100/100" alt="Item 2" class="rounded-full">
            <div class="ml-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Retro Turntable</h3>
                <span class="text-gray-500 dark:text-gray-400">Price: $250</span>
            </div>
            <button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
                Add to Cart
            </button>
        </div>
        <!-- Item 3 -->
        <div class="flex items-center justify-between p-4">
            <img src="https://picsum.photos/100/100" alt="Item 3" class="rounded-full">
            <div class="ml-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Classic Sneakers</h3>
                <span class="text-gray-500 dark:text-gray-400">Price: $80</span>
            </div>
            <button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
                Add to Cart
            </button>
        </div>
    </div>
    <div class="px-6 py-4">
        <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Account Information</h4>
        <div class="mt-2 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10">
            <div class="ml-2">
                <p class="text-gray-900 dark:text-gray-100">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">[email protected]</p>
            </div>
        </div>
    </div>
</div>

ウィッシュリストコンポーネント

ブルータリズムのアプローチでスタイリングされたシンプルなウィッシュリストコンポーネントで、グレースケールの配色を使用し、作品や製品を紹介するためにデザインされています。

プレビューを開く

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Wishlist</h2>
    <ul class="space-y-4">
        <li class="border-b border-gray-300 dark:border-gray-700 pb-4">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
                <div class="flex-1">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description for product 1.</p>
                </div>
                <button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
            </div>
        </li>
        <li class="border-b border-gray-300 dark:border-gray-700 pb-4">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
                <div class="flex-1">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description for product 2.</p>
                </div>
                <button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
            </div>
        </li>
        <li class="border-b border-gray-300 dark:border-gray-700 pb-4">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
                <div class="flex-1">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description for product 3.</p>
                </div>
                <button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
            </div>
        </li>
    </ul>
</div>

ウィッシュリストコンポーネント

マイクロインタラクションとグレースケールの配色を備えたシンプルなeコマースウィッシュリストコンポーネントで、レスポンシブデザインとダークモードのサポートに最適化されています。

プレビューを開く

                <div class="max-w-md mx-auto my-10 p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>
    <ul class="space-y-4">
        <li class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between transition-shadow duration-300 ease-in-out hover:shadow-lg">
            <img src="https://picsum.photos/100/100" alt="Product Image" class="w-20 h-20 object-cover rounded bg-gray-200" />
            <div class="flex-1 mx-4">
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Name</h3>
                <p class="text-gray-500 dark:text-gray-400">$19.99</p>
            </div>
            <button class="text-red-600 dark:text-red-400 hover:underline focus:outline-none">Remove</button>
        </li>
        <li class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between transition-shadow duration-300 ease-in-out hover:shadow-lg">
            <img src="https://picsum.photos/100/101" alt="Product Image" class="w-20 h-20 object-cover rounded bg-gray-200" />
            <div class="flex-1 mx-4">
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Another Product</h3>
                <p class="text-gray-500 dark:text-gray-400">$29.99</p>
            </div>
            <button class="text-red-600 dark:text-red-400 hover:underline focus:outline-none">Remove</button>
        </li>
    </ul>
    <button class="mt-6 w-full bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-900 dark:hover:bg-gray-300 transition duration-300">Move to Cart</button>
</div>

ウィッシュリストコンポーネント

3Dデザインスタイル、パステルカラースキーム、ビジネスWebサイト向けのレスポンシブデザインを備えたウィッシュリストコンポーネントで、ダークモードをサポートします。

プレビューを開く

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">My Wishlist</h2>
    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist1/100/100" alt="Wishlist Item 1" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 1</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 1</p>
                <span class="text-purple-600 dark:text-purple-400">$29.99</span>
            </div>
        </li>
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist2/100/100" alt="Wishlist Item 2" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 2</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 2</p>
                <span class="text-purple-600 dark:text-purple-400">$39.99</span>
            </div>
        </li>
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist3/100/100" alt="Wishlist Item 3" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 3</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 3</p>
                <span class="text-purple-600 dark:text-purple-400">$49.99</span>
            </div>
        </li>
    </ul>
    <div class="mt-4 flex justify-between items-center">
        <span class="text-gray-700 dark:text-gray-300">Total:</span>
        <span class="text-purple-600 dark:text-purple-400 font-bold">$119.97</span>
    </div>
    <button class="mt-4 w-full bg-purple-500 dark:bg-purple-600 text-white font-semibold py-2 rounded hover:bg-purple-600 dark:hover:bg-purple-700 transition duration-200">Checkout</button>
</div>

ウィッシュリストコンポーネント

Tailwind CSSを使用してダークモードで設計されたレスポンシブウィッシュリストコンポーネント。画像、説明、ユーザーアバターを含むアイテムのカードレイアウトが特徴で、ダークテーマとレスポンシブエフェクトをサポートしています。

プレビューを開く

                <div class="min-h-screen bg-gray-900 flex items-center justify-center">
    <div class="w-full max-w-2xl p-6 bg-gray-800 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold text-white mb-4">My Wishlist</h2>
        <div class="space-y-4">
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 1</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 2</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 3</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
        </div>
    </div>
</div>

ウィッシュリストコンポーネント - マテリアルデザイン

マテリアルデザインにインスパイアされたウィッシュリストコンポーネントに触発され、レスポンシブデザインとダークテーマのサポートを備えています。

プレビューを開く

                <div class='p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-gray-800'>
  <div class='text-center space-y-2 sm:text-left'>
    <div class='space-y-0.5'>
      <p class='text-lg text-black font-semibold dark:text-white'>
        Product Name
      </p>
      <p class='text-gray-500 font-medium dark:text-gray-300'>
        $19.99
      </p>
    </div>
    <button class='px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800'>
      Remove
    </button>
  </div>
  <img class='block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0' src='https://picsum.photos/200' alt='Product Image'>
</div>

ウィッシュリストコンポーネント

プレースホルダー画像とダークテーマを特徴とするミニマルなウィッシュリストコンポーネント。

プレビューを開く

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-4">
        <h2 class="text-lg font-bold text-gray-900 dark:text-white">My Wishlist</h2>
        <ul class="mt-4 space-y-4">
            <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
                    <div>
                        <h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
                    </div>
                </div>
                <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
            </li>
            <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
                    <div>
                        <h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
                    </div>
                </div>
                <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
            </li>
            <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
                    <div>
                        <h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
                    </div>
                </div>
                <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
            </li>
        </ul>
    </div>
</div>

ウィッシュリストコンポーネント

レスポンシブエフェクトとダークテーマのサポートを備えたミニマリスト/フラットデザインのウィッシュリストコンポーネント。

プレビューを開く

                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">My Wishlist</h2>
  <div class="space-y-4">
    <div class="flex items-center">
      <img class="w-16 h-16 object-cover rounded mr-4" src="https://picsum.photos/id/1018/100/100" alt="Product image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h3>
        <p class="text-gray-600 dark:text-gray-400">$19.99</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
    <div class="flex items-center">
      <img class="w-16 h-16 object-cover rounded mr-4" src="https://picsum.photos/id/1015/100/100" alt="Product image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h3>
        <p class="text-gray-600 dark:text-gray-400">$29.99</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>
</div>

カテゴリ