CCHub Logo CCHub Tailwind Collection
コンポーネント 製品カード ダークモードUIの製品カードコンポーネント

ダークモードUIの製品カードコンポーネント

ダークモードUIとTailwind CSSを使用したレスポンシブエフェクトを備えた製品カードコンポーネント。

プレビュー

HTMLコード 

<div class="bg-gray-900 text-white py-8">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-8">Our Products</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 1</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$19.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 2</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$29.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 3</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$39.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

製品カードコンポーネント - 農業/農業

農業および農業の Web サイト向けに設計されたレスポンシブ製品カード コンポーネントで、すっきりとしたタイポグラフィ、グリッド システム、秋の色が特徴です。ダークモードのサポートが含まれています。

開ける

製品カードコンポーネント

ブルータリズムスタイル、単色の配色、Eコマース目的の複雑な複雑さのレベルを備えた製品カードコンポーネント。

開ける

Neumorphic製品カードコンポーネント - レトロパレット

ソフトな Neumorphic UI スタイルでデザインされた、シンプルでレスポンシブな製品カード コンポーネントで、落ち着いたレトロ/ビンテージ カラー パレットを使用しています。機能には、ダーク モードのサポート、押し出し効果のための微妙な影、アクセシビリティのためのセマンティック HTML が含まれます。読書や、ブログやコンテンツの表示など、コンテンツの消費に適しています。

開ける