CCHub Logo CCHub Tailwind Collection
コンポーネント メディアコンポーネント シンプルなニューモーフィズムEコマースメディアコンポーネント

シンプルなニューモーフィズムEコマースメディアコンポーネント

アースカラー、シンプルな複雑さ、Eコマースサイト向け、レスポンシブデザイン、ダークテーマのサポートを備えたニューモーフィズムスタイルのメディアコンポーネント。画像には picsum.photos を使用します。

プレビュー

HTMLコード 

<div class="p-4 max-w-sm mx-auto bg-gray-200 rounded-xl shadow-lg space-y-4 dark:bg-gray-800">
  <div class="relative">
    <img class="w-full h-48 object-cover rounded-md shadow-md" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
    <button class="absolute top-2 right-2 bg-white text-gray-800 dark:bg-gray-700 dark:text-gray-200 p-1 rounded-full shadow-md">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>
  <div class="text-center">
    <div class="text-lg font-medium text-black dark:text-white">Product Title</div>
    <p class="text-gray-500 dark:text-gray-400">$19.99</p>
  </div>
  <div class="flex justify-center">
    <button class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-semibold rounded-lg shadow-md hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
      Add to Cart
    </button>
  </div>
</div>

関連コンポーネント

Cyberpunk_Dating_Media_Component

サイバーパンクの美学を備えたデート/ソーシャルプラットフォーム向けのレスポンシブメディアコンポーネントで、明るいキャンディーカラー、暗い背景、インタラクティブな要素が特徴です。ダークモードをサポートします。

開ける

バウハウスの類似メディアコンポーネント

バウハウスにインスパイアされたデザインのレスポンシブメディアコンポーネントで、類似の配色を使用しており、政府/公共サービスのWebサイトに適しています。幾何学的な形状、主要な類似色、およびダークモードのサポートを備えています。

開ける

Skeuomorphism メディア コンポーネント

スキューモーフィズムにインスパイアされたメディアコンポーネントで、単色の配色と複雑な複雑さのレベルを使用し、ブログ/コンテンツの目的に合わせて調整されています。機能には、レスポンシブデザインとJavaScriptなしのダークテーマのサポートが含まれます。

開ける