<div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-10">
<!-- Complex Component Section -->
<section class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Interactive Card 1 -->
<div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 1</h3>
<p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
<button class="py-2 px-6 rounded-full bg-blue-500 text-white text-lg font-semibold shadow-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Learn More</button>
</div>
<!-- Interactive Card 2 -->
<div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 2</h3>
<p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
<button class="py-2 px-6 rounded-full bg-green-500 text-white text-lg font-semibold shadow-lg hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 transition duration-300">Learn More</button>
</div>
<!-- Interactive Card 3 -->
<div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 3</h3>
<p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
<button class="py-2 px-6 rounded-full bg-red-500 text-white text-lg font-semibold shadow-lg hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-300">Learn More</button>
</div>
<!-- Interactive Form Example -->
<div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark col-span-1 md:col-span-2 lg:col-span-3">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Contact Us</h3>
<form>
<div class="mb-4">
<label for="name" class="block text-gray-700 dark:text-gray-300 mb-2">Name</label>
<input type="text" id="name" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700 text-gray-800 dark:text-gray-200">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
<input type="email" id="email" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-700 text-gray-800 dark:text-gray-200">
</div>
<div class="mb-4">
<label for="message" class="block text-gray-700 dark:text-gray-300 mb-2">Message</label>
<textarea id="message" rows="4" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-700 text-gray-800 dark:text-gray-200"></textarea>
</div>
<button type="submit" class="py-2 px-6 rounded-full bg-gray-500 text-white text-lg font-semibold shadow-lg hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500 transition duration-300">Send Message</button>
</form>
</div>
<!-- Interactive Element with Image -->
<div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark col-span-1 md:col-span-2 lg:col-span-3 flex flex-col md:flex-row items-center">
<img src="https://picsum.photos/seed/interactive/300/200" alt="Interactive Image" class="rounded-lg mb-6 md:mb-0 md:mr-8 shadow-xl">
<div>
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Interactive Feature with Image</h3>
<p class="text-gray-700 dark:text-gray-300 mb-6">This section includes an image to make the interactive element more engaging visually.</p>
<button class="py-2 px-6 rounded-full bg-yellow-500 text-white text-lg font-semibold shadow-lg hover:bg-yellow-600 dark:bg-yellow-700 dark:hover:bg-yellow-600 transition duration-300">Explore Feature</button>
</div>
</div>
</div>
</section>
<!-- Custom Shadows for Neumorphism -->
<style>
.shadow-2xl-dark {
box-shadow: 9px 9px 16px #1c1c1c, -9px -9px 16px #262626;
}
.shadow-inner-dark {
box-shadow: inset 5px 5px 10px #1c1c1c, inset -5px -5px 10px #262626;
}
</style>
</div>
