Content Display Component
A responsive content display component featuring a minimalist and flat design style, ideal for blogs and content consumption. It has a grayscale color scheme and is equipped with interactive elements while supporting dark mode.
HTML Code
<div class="max-w-xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<div class="ml-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">January 1, 2023</p>
</div>
</div>
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Understanding Minimalism in Design</h3>
<img class="w-full h-48 object-cover rounded-md my-4" src="https://picsum.photos/640/360?random=1" alt="Content Image">
<p class="text-gray-700 dark:text-gray-300 mb-4">Minimalism in design is all about simplicity and the use of space. By focusing on fewer elements, designers can create engaging experiences that are not only functional but also aesthetically pleasing. In this blog post, we will explore the principles of minimalism and how they can be applied.</p>
<a href="#" class="inline-block bg-gray-800 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400">Read More</a>
</div>Related Components
Property Listing Card - Swiss Pastel
A simple, clean, and responsive property listing card with a Swiss/International typography style and a pastel color scheme, suitable for real estate platforms. Includes dark mode support.
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 Component
A Content Display Component with microinteractions,grayscale colors, and moderate complexity, designed for portfolios with responsive dark theme support.