Interactive Components Component
A 3D interactive component showcasing cards with depth effects, responsive design, and dark theme support.
HTML Code
<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>Related Components
Interactive Components
A web component designed with skeuomorphic elements for social media interfaces featuring a complementary color scheme and dark theme support.
Interactive Components Component
Interactive 3D Component with responsive effects and dark theme support
Brutalist Product Card
A simple interactive product card component for e-commerce, with a Brutalist design in grayscale. It features a product image, title, price, and an 'Add to Cart' button. The component is responsive and supports dark mode. Hover effects are included for interactivity.