Composant de notifications minimalistes (niveaux de gris)
Un composant de notifications simple et minimaliste en niveaux de gris pour les portfolios, avec prise en charge du mode réactif et sombre à l’aide de Tailwind CSS. Utilise picsum.photos pour les images et randomuser.me pour les avatars.
HTML Code
<div class="container mx-auto p-4">
<!-- Light mode (default) -->
<div class="bg-white shadow-md rounded-lg p-4 mb-4 hidden dark:block">
<div class="flex items-start">
<img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="flex-grow">
<p class="text-gray-800 font-semibold">New Message</p>
<p class="text-gray-600 text-sm">You have a new message from John Doe.</p>
</div>
<button class="text-gray-500 hover:text-gray-700 focus:outline-none">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<!-- Dark mode -->
<div class="bg-gray-800 shadow-md rounded-lg p-4 mb-4 dark:hidden">
<div class="flex items-start">
<img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="flex-grow">
<p class="text-gray-200 font-semibold">New Message</p>
<p class="text-gray-400 text-sm">You have a new message from John Doe.</p>
</div>
<button class="text-gray-500 hover:text-gray-300 focus:outline-none">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>Composants associés
Composant Notifications
Un composant de notifications réactives conçu en mode sombre à l’aide de Tailwind CSS.
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.
Composant Notifications
Un composant de notifications réactif avec un style Material Design, une palette de couleurs complémentaire et une prise en charge du mode sombre, conçu avec Tailwind CSS à des fins de tableau de bord.