Container-Komponente

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition-transform duration-300 hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://i.pravatar.cc/150?img=5" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-vibrant-600 shadow-md">
        <h2 class="text-xl font-bold text-vibrant-600 dark:text-vibrant-300 ml-4">Business Name</h2>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-4">This container is designed to showcase important information while maintaining a 3D effect that engages users.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-vibrant-500 dark:bg-vibrant-700 p-4 rounded-lg shadow-md hover:shadow-xl transform transition-transform duration-300">
            <img src="https://picsum.photos/200/100?random=1" alt="Image 1" class="w-full h-auto rounded-md mb-2">
            <h3 class="font-semibold text-white">Feature One</h3>
            <p class="text-white">Description of feature one with engaging content.</p>
        </div>
        <div class="bg-vibrant-500 dark:bg-vibrant-700 p-4 rounded-lg shadow-md hover:shadow-xl transform transition-transform duration-300">
            <img src="https://picsum.photos/200/100?random=2" alt="Image 2" class="w-full h-auto rounded-md mb-2">
            <h3 class="font-semibold text-white">Feature Two</h3>
            <p class="text-white">Description of feature two with engaging content.</p>
        </div>
    </div>
</div>