CCHub Logo CCHub Tailwind Collection
コンポーネント ギャラリー ギャラリー コンポーネント

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

3Dデザイン、類似の配色、ソーシャルメディアインターフェイスのダークモードサポートを備えたレスポンシブギャラリーコンポーネント。

プレビュー

HTMLコード 

<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=1"
           style="transform: translateZ(10px);"
/>
      </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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=2"
           style="transform: translateZ(10px);"
/>
      </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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=3"
           style="transform: translateZ(10px);"
/>
      </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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=4"
           style="transform: translateZ(10px);"
/>
      </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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=5"
           style="transform: translateZ(10px);"
/>
      </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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=6"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

Skeuomorphism Grayscale Gallery コンポーネント

Skeuomorphismデザイン、グレースケールの配色、ソーシャルメディア用の複雑なレイアウトを備えたレスポンシブフォトギャラリー。ダークテーマのサポートが含まれています。

開ける

ミニマリストギャラリーコンポーネント

夕焼け/暖色系の配色を備えたレスポンシブでミニマリストの画像ギャラリーコンポーネントで、テクノロジー/ SaaSアプリケーションに適しています。ダークモードのサポートが含まれています。

開ける

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

Tailwind CSSを使用したシンプルなギャラリーコンポーネント、トライアドカラースキームによるブルータリズムデザインスタイルの実装、作品や製品を紹介するためのダークテーマのサポート。

開ける