3D Cards Component
A responsive card component with a 3D design style, vibrant colors, and multiple interactive elements, suitable for a dashboard. It supports dark mode using Tailwind's dark prefix.
HTML Code
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<div class="relative">
<img src="https://picsum.photos/400/200" alt="Card image" class="rounded-t-lg w-full">
<div class="absolute top-2 left-2 bg-red-600 text-white py-1 px-2 rounded-md">New</div>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description of the card content. It provides insight into the purpose of this card.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">John Doe</span>
</div>
</div>
<div class="px-4 py-2 border-t dark:border-gray-700">
<button class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none">Action</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<div class="relative">
<img src="https://picsum.photos/400/201" alt="Card image" class="rounded-t-lg w-full">
<div class="absolute top-2 left-2 bg-green-600 text-white py-1 px-2 rounded-md">Featured</div>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Insightful content about the card, detailing its functionalities and offerings.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">Jane Smith</span>
</div>
</div>
<div class="px-4 py-2 border-t dark:border-gray-700">
<button class="bg-orange-600 text-white py-2 px-4 rounded-md hover:bg-orange-700 focus:outline-none">Explore</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<div class="relative">
<img src="https://picsum.photos/400/202" alt="Card image" class="rounded-t-lg w-full">
<div class="absolute top-2 left-2 bg-blue-600 text-white py-1 px-2 rounded-md">Popular</div>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Information and interactive elements that are engaging and useful.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">Mark Johnson</span>
</div>
</div>
<div class="px-4 py-2 border-t dark:border-gray-700">
<button class="bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none">Learn More</button>
</div>
</div>
</div>Related Components
Skeuomorphic Cards Component
Inspired by Skeuomorphism, the following card component is fully responsive with dark theme support. For dark mode, CSS support is sufficient. No JavaScript is needed.
Luxury_Portfolio_Cards_Ocean_Blue
A complex, luxury/premium portfolio cards component designed with ocean/blue tones for showcasing work or products. Features responsive design, sophisticated typography, elegant visuals, and full dark mode support.