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
Composant de notifications de style Neumorphisme avec une palette de couleurs pastel, une complexité modérée et un design réactif avec prise en charge du thème sombre. Convient aux sites Web d’entreprise/d’entreprise.
Composant Notifications
Un composant de notifications réactives avec des micro-interactions, une palette de couleurs triadique et une prise en charge du thème sombre, conçu pour présenter des travaux ou des produits.
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.