ギャラリー

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

e コマース用に設計された複雑なレスポンシブ 3D ギャラリーコンポーネントで、ダークテーマと補色スキームが特徴です。

                <div class="max-w-7xl mx-auto p-6">
    <h2 class="text-3xl font-bold text-center mb-6 text-gray-900 dark:text-white">3D Gallery Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Card 1 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-blue-600 text-white text-sm px-2 py-1 rounded">New</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$49.99</span>
                <button class="bg-blue-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-blue-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 2 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-green-600 text-white text-sm px-2 py-1 rounded">Sale</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$39.99</span>
                <button class="bg-green-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-green-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 3 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-red-600 text-white text-sm px-2 py-1 rounded">Featured</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$29.99</span>
                <button class="bg-red-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-red-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 4 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-purple-600 text-white text-sm px-2 py-1 rounded">Exclusive</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 4</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$59.99</span>
                <button class="bg-purple-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-purple-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 5 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-orange-600 text-white text-sm px-2 py-1 rounded">Popular</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 5</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$19.99</span>
                <button class="bg-orange-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-orange-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 6 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-teal-600 text-white text-sm px-2 py-1 rounded">Limited</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 6</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$99.99</span>
                <button class="bg-teal-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-teal-700">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

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

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

プレビューを開く

                <div class="container mx-auto p-6 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg">  <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Gallery</h1>  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=1" alt="Gallery Image 1" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 1</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=2" alt="Gallery Image 2" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 2</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=3" alt="Gallery Image 3" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 3</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=4" alt="Gallery Image 4" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 4</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=5" alt="Gallery Image 5" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 5</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=6" alt="Gallery Image 6" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 6</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>  </div>  <div class="mt-6 text-center">    <h3 class="text-lg font-bold text-gray-700 dark:text-gray-300">Author</h3>    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="mx-auto rounded-full w-24 h-24">    <p class="text-gray-600 dark:text-gray-400">Author Name</p>  </div></div>

Skeuomorphism Grayscale Gallery コンポーネント

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

プレビューを開く

                <div class="bg-gray-200 dark:bg-gray-800 min-h-screen p-8">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-12">Photo Gallery</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Gallery Item 1 -->
      <div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/600/400?random=1" alt="Gallery Image" class="w-full h-64 object-cover">
        <div class="p-6">
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 mr-4">
            <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
          </div>
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Image Title</h2>
          <p class="text-gray-600 dark: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 justify-between items-center">
            <div class="flex space-x-4">
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </button>
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.165-.915L3 20l1.47-3.674A9.986 9.986 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
              </button>
            </div>
            <span class="text-gray-600 dark:text-gray-400 text-sm">3 Likes</span>
          </div>
        </div>
      </div>

       <!-- Gallery Item 2 (Repeat structure for more items) -->
        <div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/600/400?random=2" alt="Gallery Image" class="w-full h-64 object-cover">
        <div class="p-6">
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 mr-4">
            <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
          </div>
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Another Image Title</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex justify-between items-center">
            <div class="flex space-x-4">
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </button>
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.165-.915L3 20l1.47-3.674A9.986 9.986 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
              </button>
            </div>
            <span class="text-gray-600 dark:text-gray-400 text-sm">5 Likes</span>
          </div>
        </div>
      </div>

       <!-- Gallery Item 3 (Repeat structure for more items) -->
       <div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/600/400?random=3" alt="Gallery Image" class="w-full h-64 object-cover">
        <div class="p-6">
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 mr-4">
            <p class="text-gray-700 dark:text-gray-300 font-semibold">Peter Jones</p>
          </div>
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">My Travel Photo</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <div class="flex justify-between items-center">
            <div class="flex space-x-4">
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </button>
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.165-.915L3 20l1.47-3.674A9.986 9.986 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
              </button>
            </div>
            <span class="text-gray-600 dark:text-gray-400 text-sm">8 Likes</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

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

レトロ/ビンテージスタイル、鮮やかな配色、ブログ/コンテンツ消費用のシンプルなレイアウトを備えたレスポンシブギャラリーコンポーネントで、ダークモードがサポートされています。Tailwind CSSを使用します。

プレビューを開く

                <div class="bg-gray-200 dark:bg-gray-800 p-6">  <div class="container mx-auto">    <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-white">Gallery</h2>    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro1/500/300" alt="Gallery Image 1" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 1</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro2/500/300" alt="Gallery Image 2" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 2</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro3/500/300" alt="Gallery Image 3" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 3</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>    </div>  </div></div>

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

マテリアルデザインでデザインされたレスポンシブギャラリーコンポーネントで、ダッシュボードの目的で類似の配色が施されています。

プレビューを開く

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">Description for image 1.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">Description for image 2.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">Description for image 3.</p>
            </div>
        </div>
        <!-- Repeat more images as needed -->
    </div>
    <div class="mt-6">
        <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">User Avatars</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar 1" class="rounded-full">
            </div>
            <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar 2" class="rounded-full">
            </div>
            <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar 3" class="rounded-full">
            </div>
            <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar 4" class="rounded-full">
            </div>
            <!-- Repeat more avatars as needed -->
        </div>
    </div>
</div>

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

ブログやコンテンツの消費向けに設計されたブルータリズムスタイルのギャラリーコンポーネントで、ダークテーマをサポートするレスポンシブレイアウトが特徴です。

プレビューを開く

                <div class="p-5 bg-gray-100 dark:bg-gray-900">
    <h1 class="text-3xl text-gray-800 dark:text-gray-200 font-bold mb-4">Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=1" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 1</h2>
            <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=2" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 2</h2>
            <p class="text-gray-700 dark:text-gray-300">Vivamus lacinia odio vitae vestibulum. Praesent feugiat amet et ligula.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=3" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 3</h2>
            <p class="text-gray-700 dark:text-gray-300">Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=4" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 4</h2>
            <p class="text-gray-700 dark:text-gray-300">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=5" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 5</h2>
            <p class="text-gray-700 dark:text-gray-300">At vero eos et accusamus et iusto odio dignissimos ducimus.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=6" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 6</h2>
            <p class="text-gray-700 dark:text-gray-300">Mollitia animi, id est laborum et dolorum fuga. Et harum quidem.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=7" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 7</h2>
            <p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=8" alt="Gallery Image" />
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 8</h2>
            <p class="text-gray-700 dark:text-gray-300">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.</p>
        </div>
    </div>
</div>

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

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

プレビューを開く

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=1" alt="Random Image 1" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=2" alt="Random Image 2" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=3" alt="Random Image 3" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=4" alt="Random Image 4" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=5" alt="Random Image 5" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=6" alt="Random Image 6" class="w-full h-auto object-cover">
        </div>
    </div>
</div>

Neumorphism Gallery コンポーネント

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

プレビューを開く

                <div class="container mx-auto p-6 bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark rounded-lg">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Gallery</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
    <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark group hover:shadow-neumorphic-hover-light dark:hover:shadow-neumorphic-hover-dark transition duration-300 ease-in-out">
      <img src="https://picsum.photos/seed/1/300/200" alt="Gallery Image 1" class="rounded-md mb-4 shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark">
      <p class="text-gray-700 dark:text-gray-300 text-center">Image Description 1</p>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark group hover:shadow-neumorphic-hover-light dark:hover:shadow-neumorphic-hover-dark transition duration-300 ease-in-out">
      <img src="https://picsum.photos/seed/2/300/200" alt="Gallery Image 2" class="rounded-md mb-4 shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark">
      <p class="text-gray-700 dark:text-gray-300 text-center">Image Description 2</p>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark group hover:shadow-neumorphic-hover-light dark:hover:shadow-neumorphic-hover-dark transition duration-300 ease-in-out">
      <img src="https://picsum.photos/seed/3/300/200" alt="Gallery Image 3" class="rounded-md mb-4 shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark">
      <p class="text-gray-700 dark:text-gray-300 text-center">Image Description 3</p>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark group hover:shadow-neumorphic-hover-light dark:hover:shadow-neumorphic-hover-dark transition duration-300 ease-in-out">
      <img src="https://picsum.photos/seed/4/300/200" alt="Gallery Image 4" class="rounded-md mb-4 shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark">
      <p class="text-gray-700 dark:text-gray-300 text-center">Image Description 4</p>
    </div>
  </div>
</div>

<style>
.shadow-neumorphic-light {
  box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
}
.shadow-neumorphic-inner-light {
  box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inner-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #363636;
}
.shadow-neumorphic-hover-light {
  box-shadow: 3px 3px 8px #a7a7a7, -3px -3px 8px #ffffff;
}
.dark .shadow-neumorphic-hover-dark {
  box-shadow: 3px 3px 8px #4a4a4a, -3px -3px 8px #363636;
}
</style>

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

レスポンシブエフェクトとダークテーマのサポートを備えたレトロなビンテージスタイルのギャラリーコンポーネント。

プレビューを開く

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Retro Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=4" alt="Gallery Image 4" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=5" alt="Gallery Image 5" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=6" alt="Gallery Image 6" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=7" alt="Gallery Image 7" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=8" alt="Gallery Image 8" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-white { background-color: #1a202c; }
        .text-gray-800 { color: #edf2f7; }
    }
</style>

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

3D デザインスタイルのレスポンシブギャラリーコンポーネントで、シャドウとホバーエフェクトによる奥行きとエンゲージメントが特徴です。ダークテーマとライトテーマをサポートしています。

プレビューを開く

                <div class="max-w-7xl mx-auto p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=1" alt="Gallery Item 1" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 1</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=2" alt="Gallery Item 2" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 2</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=3" alt="Gallery Item 3" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 3</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=4" alt="Gallery Item 4" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 4</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=5" alt="Gallery Item 5" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 5</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=6" alt="Gallery Item 6" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 6</span>
            </div>
        </div>
    </div>
</div>
<style>
    .dark { background-color: #1a202c; }
    .dark .text-gray-900 { color: white; }
</style>

カテゴリ