Composant Notifications
Composant de notifications de style Skeuomorphism avec effets réactifs et prise en charge du thème sombre, construit à l’aide de Tailwind CSS.
HTML Code
<div class="flex flex-col items-center p-4">
<!-- Notification 1 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Just joined the platform.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
<!-- Notification 2 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Liked your post.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
<!-- Notification 3 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Commented on your photo.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
</div>Composants associés
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.
Composant Notifications
Un composant de notifications neumorphiques avec un jeu de couleurs en niveaux de gris et une complexité modérée, conçu pour la consommation de blog/contenu. Il est réactif et prend en charge le thème sombre.