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étro/vintage conçu avec des tons de terre et des interactions complexes pour montrer le travail du portfolio.
Composant Notifications
Composant de notifications de style skeuomorphisme avec conception réactive et prise en charge du thème sombre. Ce composant présente un aspect réaliste et en relief pour les notifications, y compris un effet d’ombre et de lueur subtil. Il est entièrement réactif et comprend des styles distincts pour le mode sombre, assurant une lisibilité et un attrait esthétique dans toutes les conditions d’éclairage. Utilise des images d’espace réservé pour les avatars.
SkeuomorphicNotificationsComponent
Un composant de notifications simple et réactif inspiré du Skeuomorphism, avec une palette de couleurs analogue adaptée aux sites Web d’entreprise. Il inclut la prise en charge du thème sombre et utilise Tailwind CSS pour le style. Les images proviennent de picsum.photos et les avatars de randomuser.me.