ウィッシュリストコンポーネント
3Dデザインスタイル、パステルカラースキーム、ビジネスWebサイト向けのレスポンシブデザインを備えたウィッシュリストコンポーネントで、ダークモードをサポートします。
HTMLコード
<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>関連コンポーネント
ウィッシュリストコンポーネント
マイクロインタラクションを備えたビジネス/企業のWebサイト向けのシンプルで応答性の高いウィッシュリストコンポーネント。類似の配色 (青、緑、青緑)、ダーク テーマのサポート、微妙なホバー アニメーションが特徴です。このコンポーネントには、ウィッシュリストアイテムが製品画像、名前、価格、アクションボタンとともに表示されます。
ウィッシュリストコンポーネント
Tailwind CSSを使用したダークモードをサポートするレスポンシブウィッシュリストコンポーネント。画像、タイトル、価格、削除ボタンを含むアイテムのリストを表示します。鮮やかな色のダッシュボード用に設計されています。