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.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md max-w-md mx-auto">
<h2 class="text-center text-2xl font-bold text-brown-700 dark:text-brown-300 mb-4">Notifications</h2>
<div class="space-y-4">
<div class="bg-green-100 dark:bg-green-900 border-l-4 border-green-600 p-3 rounded-md">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-brown-800 dark:text-brown-200">John Doe</p>
<p class="text-brown-600 dark:text-brown-400">You have a new message!</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">2 minutes ago</p>
</div>
</div>
</div>
<div class="bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-600 p-3 rounded-md">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-brown-800 dark:text-brown-200">Jane Smith</p>
<p class="text-brown-600 dark:text-brown-400">Your portfolio has been viewed!</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">10 minutes ago</p>
</div>
</div>
</div>
<div class="bg-red-100 dark:bg-red-900 border-l-4 border-red-600 p-3 rounded-md">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-brown-800 dark:text-brown-200">Alice Brown</p>
<p class="text-brown-600 dark:text-brown-400">Your project deadline is approaching!</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">30 minutes ago</p>
</div>
</div>
</div>
</div>
<button class="mt-4 w-full bg-brown-600 dark:bg-brown-700 text-white py-2 rounded-lg hover:bg-brown-500 dark:hover:bg-brown-600">View All Notifications</button>
</div>Composants associés
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.
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.
Composant Notifications
Un composant de notifications complexe conçu avec une esthétique rétro/vintage et des couleurs vives pour le commerce électronique, prenant en charge le mode sombre.