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

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center mb-8 text-gray-800 dark:text-white">Our Vibrant Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Gallery Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-purple-800 dark:text-purple-300">Project Alpha</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">A sleek design project showcasing modern aesthetics.</p>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-red-800 dark:text-red-300">Innovate Beta</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Cutting-edge technology integrated with user-centric design.</p>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-green-800 dark:text-green-300">Data Drive</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Visualizing complex data into intuitive and actionable insights.</p>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum4/400/300" alt="Gallery Image 4" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-blue-800 dark:text-blue-300">Analytics Flow</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Interactive dashboards for real-time performance monitoring.</p>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum5/400/300" alt="Gallery Image 5" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-yellow-800 dark:text-yellow-300">Growth Metrics</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Tracking key growth indicators with dynamic charts.</p>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum6/400/300" alt="Gallery Image 6" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-pink-800 dark:text-pink-300">User Insights</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Understanding user behavior through comprehensive reports.</p>
        </div>
      </div>
    </div>
  </div>
</div>