Interactive Components Component
A social media interactive component with a pastel color scheme, moderate complexity, responsive design, and dark mode support, built with Tailwind CSS and following Material Design principles. It uses dummy images from picsum.photos and avatars from randomuser.me.
HTML Code
<div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="text-gray-900 dark:text-white font-bold text-lg">John Doe</div>
</div>
<img class="w-full h-64 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum/800/400" alt="Post Image">
<p class="text-gray-700 dark:text-gray-300 mb-4">This is a sample social media post with a pastel color scheme and Material Design styling.</p>
<div class="flex justify-between items-center text-gray-600 dark:text-gray-400 text-sm">
<div class="flex items-center">
<svg class="w-5 h-5 mr-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 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21c-.644 0-1.25-.302-1.63-0.8L10 14V10m4 0H5a2 2 0 00-2 2v6a2 2 0 002 2h10l2.293 2.293c.032.032.07.05.107.05h.1l.1-.147l.145-.194-.013-.014L17 21.5l.354-.354.353.354z"></path></svg>
<span>120 Likes</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 mr-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.913 9.913 0 01-3.981-.815F7.001 16.88C18.745 10.65 7.544 10.5 21 12z"></path></svg>
<span>35 Comments</span>
</div>
</div>
<div class="mt-4 flex items-center">
<input type="text" class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500" placeholder="Add a comment...">
<button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Post</button>
</div>
</div>Related Components
Interactive Components Component
Interactive Components Component with Material Design, Triadic color scheme, Complex complexity, for E-commerce, with responsive design and dark theme support.
Interactive Components Component
Interactive Components Component with 3D Design, Monochromatic color scheme, and Moderate complexity for E-commerce, with responsive design and dark theme support.
Interactive Components Component
A brutalist-inspired interactive component for a blog, featuring high contrast earth tones, responsive design, and dark mode support.