CCHub Logo CCHub Tailwind Collection
コンポーネント ウィッシュリスト ウィッシュリストコンポーネント

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

Tailwind CSSを使用したダークモードをサポートするレスポンシブウィッシュリストコンポーネント。画像、タイトル、価格、削除ボタンを含むアイテムのリストを表示します。鮮やかな色のダッシュボード用に設計されています。

プレビュー

HTMLコード 

<div class="bg-gray-900 text-gray-200 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-purple-400">My Wishlist</h2>
    <div class="space-y-6">

      <!-- Wishlist Item 1 -->
      <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/item1/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
        <div class="flex-grow">
          <h3 class="text-xl font-semibold text-teal-400">Vibrant Product Title 1</h3>
          <p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <p class="text-lg font-bold mt-2 text-orange-400">$199.99</p>
        </div>
        <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/item2/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
        <div class="flex-grow">
          <h3 class="text-xl font-semibold text-cyan-400">Exciting Product Title 2</h3>
          <p class="text-gray-400">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p class="text-lg font-bold mt-2 text-lime-400">$249.50</p>
        </div>
        <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/item3/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
        <div class="flex-grow">
          <h3 class="text-xl font-semibold text-pink-400">Dynamic Product Title 3</h3>
          <p class="text-gray-400">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
          <p class="text-lg font-bold mt-2 text-yellow-400">$99.00</p>
        </div>
        <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
      </div>

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

関連コンポーネント

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

レトロ/ヴィンテージの美学でデザインされたレスポンシブなウィッシュリストコンポーネントは、トライアドカラースキームとダークモードのサポートを特徴としており、作品や製品の展示に最適です。

開ける

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

マイクロインタラクションを備えたビジネス/企業のWebサイト向けのシンプルで応答性の高いウィッシュリストコンポーネント。類似の配色 (青、緑、青緑)、ダーク テーマのサポート、微妙なホバー アニメーションが特徴です。このコンポーネントには、ウィッシュリストアイテムが製品画像、名前、価格、アクションボタンとともに表示されます。

開ける

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

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

開ける