Skeuomorphism 그리드 레이아웃 구성 요소

<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Skeuomorphic Card</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">This is an example of a card with a skeuomorphic design approach, featuring gradients and shadows to mimic real-world textures.</p>
      <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Learn More</button>
    </div>

    <!-- Card 2 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Interactive Element</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">Elements are designed to feel tangible, with hover effects that provide visual feedback, simulating physical interaction.</p>
      <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">View Details</button>
    </div>

    <!-- Card 3 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Dark Mode Ready</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">This component includes full support for dark mode, with colors and shadows adjusting seamlessly for a comfortable viewing experience.</p>
      <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Explore Options</button>
    </div>

        <!-- Card 4 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-full h-48 rounded-md object-cover border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://picsum.photos/seed/picsum/400/300" alt="Placeholder image">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Image Integration</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">Images are integrated with subtle borders and shadows to enhance the skeuomorphic feel, blending them naturally into the design.</p>
      <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">View Gallery</button>
    </div>

     <!-- Card 5 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Responsive Design</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">The grid layout is fully responsive, adapting to different screen sizes while maintaining the skeuomorphic integrity of the design.</p>
      <button class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Discover More</button>
    </div>

     <!-- Card 6 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-full h-48 rounded-md object-cover border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://picsum.photos/seed/another/400/300" alt="Placeholder image">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Customizable</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">Built with Tailwind CSS, this component is easily customizable, allowing for adjustments to colors, spacing, and other design elements.</p>
      <button class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Customize Now</button>
    </div>
  </div>
</div>