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
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éactives conçu en mode sombre à l’aide de Tailwind CSS.
Composant Notifications
Un composant de notifications complexe et réactif avec prise en charge du mode sombre, conçu selon les principes de Material Design et une palette de couleurs pastel pour un site Web de blog/contenu.