SimpleContentDisplay
A simple content display component with responsive design and dark theme support using Tailwind CSS.
HTML Code
<div class="container mx-auto p-4 max-w-sm">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/123/400/300" alt="Placeholder image">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Article Title</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">This is a brief description of the article content. It provides a sneak peek into what the user can expect to read.</p>
<div class="flex items-center mt-4">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author avatar">
<span class="text-gray-700 dark:text-gray-400 text-sm">John Doe</span>
</div>
</div>
</div>
</div>Related Components
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.
Content Display Components
A responsive social media content display component designed in skeuomorphic style with pastel colors, featuring multiple interactive elements and dark mode support.
Content Display Components
A responsive content display component for blog or content consumption with a 3D design style and dark theme support.