Alert Messages Component
A responsive alert messages component designed in a minimalistic/flat style with a pastel color scheme, suitable for social media interfaces, incorporating dark theme support.
HTML Code
<div class="max-w-md mx-auto mt-5">
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden">
<div class="flex items-center p-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h2 class="text-gray-800 dark:text-white text-lg font-medium">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Just now</p>
</div>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-300">This is a simple alert message for your social media interface.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden mt-4">
<div class="flex items-center p-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h2 class="text-gray-800 dark:text-white text-lg font-medium">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">5 minutes ago</p>
</div>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-300">Another alert message from the social networking interface!</p>
</div>
</div>
</div>
Related Components
Alert Messages Component
A simple Neumorphism-styled alert message component for business websites, featuring vibrant colors and responsive dark theme support using Tailwind CSS and no JavaScript.
Alert Messages Component
This component is an alert message with a minimalist/flat design, earth tones color scheme, and a complex layout. It is designed for social media interfaces and is responsive with dark theme support. It uses Tailwind CSS for styling and includes multiple interactive elements.
Alert Messages Component
A responsive skeuomorphic alert messages component designed for blogs/content consumption, featuring a complementary color scheme and dark theme support.