CCHub Logo CCHub Tailwind Collection
コンポーネント 製品ギャラリー Product Gallery Component - マテリアルデザイン

Product Gallery Component - マテリアルデザイン

マテリアルデザインにインスパイアされた製品ギャラリーコンポーネントで、レスポンシブデザイン、ホバーエフェクト、ダークテーマのサポートを備えています。Tailwind CSSを使用します。

プレビュー

HTMLコード 

<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <div class="dark:bg-gray-800 dark:text-white">
    <div class="-m-1 flex flex-wrap md:-m-2">
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=1"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=2"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=3"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=4"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=5"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=6"
          />
        </div>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

製品ギャラリーコンポーネント

ダークモード用に設計されたレスポンシブ製品ギャラリーコンポーネントで、Tailwind CSSを使用した画像とアバターが特徴です。

開ける

製品ギャラリーコンポーネント

マテリアルデザインの美学を備えたレスポンシブな製品ギャラリーコンポーネントで、グリッドベースのレイアウトと、製品やポートフォリオの展示に適したインタラクティブな要素が特徴です。ダーク モードのサポートが含まれており、類似の配色が使用されます。

開ける

製品ギャラリーコンポーネント

マテリアルデザインの原則に基づいて設計されたシンプルなレスポンシブ製品ギャラリーコンポーネントで、鮮やかな色とダークモードのサポートが特徴で、ダッシュボードに適しています。このコンポーネントは、スタイル設定に Tailwind CSS を使用します。

開ける