Gallery Component

<div class="container mx-auto p-6">
    <h2 class="text-3xl font-bold text-center text-gray-900 dark:text-gray-100 mb-6">Gallery Component</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <!-- Card 1 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/300" alt="Image 1" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 1</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 1.</p>
        </div>
        
        <!-- Card 2 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/301" alt="Image 2" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 2</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 2.</p>
        </div>
        
        <!-- Card 3 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/302" alt="Image 3" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 3</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 3.</p>
        </div>
        
        <!-- Card 4 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/303" alt="Image 4" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 4</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 4.</p>
        </div>
        
        <!-- More cards -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/304" alt="Image 5" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 5</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 5.</p>
        </div>
        
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/305" alt="Image 6" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 6</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 6.</p>
        </div>
    </div>
</div>