Content Display Components Component
A simple and vibrant content display component with micro-interactions, responsive design, and dark theme support, suitable for blogs and content consumption. Uses picsum.photos for images and randomuser.me for avatars.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black p-4 flex items-center justify-center">
<div class="max-w-md w-full bg-white dark:bg-gray-700 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-red-500/50">
<div class="relative">
<img class="w-full h-48 object-cover transition-opacity duration-300 hover:opacity-80" src="https://picsum.photos/600/400?random=1" alt="Article Thumbnail">
<div class="absolute bottom-0 left-0 bg-black bg-opacity-50 dark:bg-opacity-70 text-white px-3 py-1 rounded-tr-lg text-sm font-semibold">
Article
</div>
</div>
<div class="p-5">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 transition-colors duration-300 hover:text-purple-700 dark:hover:text-red-400">
The Future of Web Development
</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
Explore the exciting new trends and technologies shaping the web, from AI-powered tools to immersive user experiences.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full object-cover border-2 border-purple-500 dark:border-red-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<div>
<p class="text-gray-800 dark:text-white font-semibold text-sm">John Doe</p>
<p class="text-gray-500 dark:text-gray-400 text-xs">2 hours ago</p>
</div>
</div>
<a href="#" class="text-purple-600 dark:text-red-400 hover:text-purple-800 dark:hover:text-red-600 transition-colors duration-300 font-medium text-sm flex items-center group">
Read More
<svg class="ml-1 w-4 h-4 transform transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</a>
</div>
</div>
</div>
</div>Related Components
Retro Social Media Post Card
A responsive social media post card component with a retro/vintage 80s/90s aesthetic, using an analogous color scheme (Sky, Teal, Purple) with Fuchsia accents. Features dark mode support and interactive hover effects. Content includes user avatar, username, timestamp, text post, image, and action buttons (like, comment, share). Built with Tailwind CSS.
Content Display Components
A 3D design portfolio showcasing work or products with a grayscale color scheme and responsive design, supporting dark mode.
Pastel3DBlogContentCard
A responsive Content Display Component for blogs or content sections, designed with Tailwind CSS. It features a simple layout with a 3D-inspired aesthetic using shadows and hover effects. The color scheme is soft pastel for light mode, with a compatible dark mode theme. The component includes an image, title, metadata (author/date), excerpt, and a 'Read More' button. Placeholder images are used from picsum.photos and randomuser.me.