インタラクティブコンポーネントコンポーネント

<div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-900 transition-all duration-300">
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 1</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the first card. It's an engaging component.</p>
    </div>
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 2</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the second card. Enjoy the depth effect!</p>
    </div>
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 3</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the third card. The 3D design enhances engagement.</p>
    </div>
</div>