미니멀리스트 오션 블루 그리드 레이아웃

<div class="bg-sky-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl font-extrabold text-blue-900 dark:text-sky-300 text-center mb-12 sm:mb-16">
      Explore Our Latest Collection
    </h2>

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

      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1018/400/500" alt="Elegant Blue Dress">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Ocean Whisper Dress</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Effortless elegance for every occasion.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$129.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1020/400/500" alt="Luxurious Silk Scarf">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Azure Silk Scarf</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Soft and flowing, a touch of luxury.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$49.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1039/400/500" alt="Deep Blue Handbag">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Marine Mini Bag</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Compact and chic, perfect for essentials.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$89.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/97/400/500" alt="Elegant Pearl Necklace">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Seashell Pearl Necklace</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Timeless beauty for a delicate touch.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$199.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1041/400/500" alt="Minimalist Silver Earrings">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Coral Drop Earrings</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Subtle elegance for everyday wear.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$59.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1021/400/500" alt="Trendy Sunglasses Blue Frame">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Deep Sea Shades</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Stylish protection for radiant eyes.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$79.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 7 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1042/400/500" alt="Soft Blue Knitwear">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Coastal Knit Sweater</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Cozy comfort for colder days.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$95.00</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 8 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
          <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1025/400/500" alt="Minimalist Blue Sandals">
          <div class="p-6">
              <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Lagoon Sandals</h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Lightweight and stylish for summer walks.</p>
              <div class="flex justify-between items-center">
                  <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$65.00</span>
                  <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
                      View Details
                  </button>
              </div>
          </div>
      </div>

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