Composant Notifications
Un composant de notifications rétro/vintage conçu avec des tons de terre et des interactions complexes pour montrer le travail du portfolio.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md max-w-md mx-auto">
<h2 class="text-center text-2xl font-bold text-brown-700 dark:text-brown-300 mb-4">Notifications</h2>
<div class="space-y-4">
<div class="bg-green-100 dark:bg-green-900 border-l-4 border-green-600 p-3 rounded-md">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-brown-800 dark:text-brown-200">John Doe</p>
<p class="text-brown-600 dark:text-brown-400">You have a new message!</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">2 minutes ago</p>
</div>
</div>
</div>
<div class="bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-600 p-3 rounded-md">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-brown-800 dark:text-brown-200">Jane Smith</p>
<p class="text-brown-600 dark:text-brown-400">Your portfolio has been viewed!</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">10 minutes ago</p>
</div>
</div>
</div>
<div class="bg-red-100 dark:bg-red-900 border-l-4 border-red-600 p-3 rounded-md">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-brown-800 dark:text-brown-200">Alice Brown</p>
<p class="text-brown-600 dark:text-brown-400">Your project deadline is approaching!</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">30 minutes ago</p>
</div>
</div>
</div>
</div>
<button class="mt-4 w-full bg-brown-600 dark:bg-brown-700 text-white py-2 rounded-lg hover:bg-brown-500 dark:hover:bg-brown-600">View All Notifications</button>
</div>Composants associés
Composant Notifications
Composant de notifications brutalistes avec des tons de terre pour Portfolio
Notifications Composante 26
Un composant de notifications minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre, affichant une liste de notifications avec des avatars et des images.
Composant Notifications
Un composant de notifications conçu selon les principes de Material Design et une palette de couleurs monochromatiques pour les applications de commerce électronique, avec un design réactif et la prise en charge du thème sombre.