Skeuomorphic Cards Component
A simple cards component designed in a skeuomorphic style, using an analogous color scheme for reading and content consumption. This component is responsive and supports dark theme.
HTML Code
<div class="flex flex-col items-center justify-center p-6 space-y-4 md:flex-row md:flex-wrap md:space-x-4 md:space-y-0">
<div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
<img class="rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Card Image" />
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
<p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
<img class="rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Card Image" />
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" />
<p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
</div>
</div>
</div>
</div>Related Components
Dark Mode Social Cards
A responsive card component styled for dark mode with earth tones, designed for social media interfaces.
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.