Content Display Component
A responsive content display component that incorporates microinteractions with engaging animations focused on user actions. It includes support for dark mode and placeholders for images and avatars.
HTML Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">John Doe</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">Software Engineer</p>
</div>
</div>
<div class="p-4">
<img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full rounded-lg hover:scale-105 transition-transform duration-300">
<p class="mt-2 text-gray-700 dark:text-gray-300">This is a brief description of the content. It engages the user with interesting information and encourages interaction.</p>
<a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Read More</a>
</div>
</div>Related Components
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.
Industrial_3D_Content_Display
A simple, responsive content display component for manufacturing/industrial companies, featuring a subtle 3D design using muted colors and dark mode support.
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.