ウィッシュリストコンポーネント
ダークテーマダッシュボード用のスキューモーフィック要素と補色でデザインされたレスポンシブウィッシュリストコンポーネント。
HTMLコード
<div class="max-w-xs mx-auto bg-gray-800 rounded-lg shadow-lg overflow-hidden dark:bg-gray-900">
<div class="p-4">
<h2 class="text-2xl font-bold text-white mb-2">Wishlist</h2>
<ul class="space-y-4">
<li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
<div>
<h3 class="text-lg text-white">Product Name 1</h3>
<p class="text-sm text-gray-400">$20.00</p>
</div>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
</li>
<li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/50/51" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
<div>
<h3 class="text-lg text-white">Product Name 2</h3>
<p class="text-sm text-gray-400">$30.00</p>
</div>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
</li>
<li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/50/52" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
<div>
<h3 class="text-lg text-white">Product Name 3</h3>
<p class="text-sm text-gray-400">$40.00</p>
</div>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
</li>
</ul>
</div>
</div>関連コンポーネント
Glassmorphism_Wishlist_Component
海/青の色調のGlassmorphismデザインを特徴とする、複雑で応答性の高いウィッシュリストコンポーネントで、デート/ソーシャルプラットフォームに最適化されています。ダークモードのサポートとインタラクティブな要素が含まれています。
ウィッシュリストコンポーネント
マイクロインタラクションを備えたビジネス/企業のWebサイト向けのシンプルで応答性の高いウィッシュリストコンポーネント。類似の配色 (青、緑、青緑)、ダーク テーマのサポート、微妙なホバー アニメーションが特徴です。このコンポーネントには、ウィッシュリストアイテムが製品画像、名前、価格、アクションボタンとともに表示されます。