Composant Notifications
Un composant de notifications simple et réactif avec prise en charge du mode sombre, conçu dans un style Skeuomorphic avec une palette de couleurs en niveaux de gris. Idéal pour un portfolio mettant en valeur des compétences minimales en matière de design.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden transform duration-300 hover:scale-105">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Notifications</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">3 New</span>
</div>
<div class="p-4 space-y-4">
<!-- Notification Item 1 -->
<div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
<img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe commented on your post.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<!-- Notification Item 2 -->
<div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
<img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith liked your photo.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
</div>
</div>
<!-- Notification Item 3 -->
<div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
<img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">You have a new message from Bob Johnson.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
</div>
</div>
</div>
<div class="px-6 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-right">
<a href="#" class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transform duration-200 hover:underline">View All Notifications</a>
</div>
</div>
</div>
Composants associés
Composant Notifications
Composant de notifications réactives avec prise en charge du mode sombre pour les interfaces de médias sociaux, avec une palette de couleurs vives.
Brutalist_Industrial_Notifications_Component
Un composant de notifications complexe, de style brutaliste, pour les applications industrielles et manufacturières, avec une palette de couleurs coucher de soleil/chaudes, une réactivité et une prise en charge du mode sombre.
Composant Notifications
Un composant de notifications réactif avec une conception 3D, une mise en page simple en niveaux de gris et une prise en charge du thème sombre, adapté aux sites Web d’entreprise.