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

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

Tailwind CSS を使用したレスポンシブ ギャラリー コンポーネントで、Skeuomorphism デザイン、パステル カラー スキーム、ソーシャル メディア用の適度な複雑さを備えています。ダークモードのサポートが含まれており、画像にはpicsum.photosを使用し、アバターには randomuser.me を使用します。

プレビュー

HTMLコード 

<div class="container mx-auto px-4 py-8 dark:bg-gray-800">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of user 1">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 1</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar of user 2">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 2</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
     <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar of user 3">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 3</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

Neumorphism Gallery コンポーネント

ダークモードをサポートするレスポンシブな Neumorphic ギャラリーコンポーネント。画像は picsum.photos のプレースホルダーと randomuser.me のアバターです。

開ける

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

ミニマリストのフラットデザインのレスポンシブギャラリーコンポーネントで、Tailwind CSSを使用した画像とダークテーマのサポートが特徴です。

開ける

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

ブログ/コンテンツの目的でアースカラーのNeumorphismスタイルのギャラリーコンポーネント。このコンポーネントは、複数のインタラクティブ要素、レスポンシブデザイン、およびダークテーマのサポートを備えた豊富なインターフェイスを備えています。

開ける