Composant Notifications
Un composant de notifications réactives conçu avec des éléments skeuomorphes, utilisant une palette de couleurs complémentaires et une mise en page simple adaptée à un portfolio.
HTML Code
<div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Notifications</h2>
<div class="bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
<div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Uploaded a new project.</p>
</div>
</div>
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="rounded-md">
</div>
<div class="flex items-center justify-between p-4">
<span class="text-gray-500 dark:text-gray-400 text-sm">5 minutes ago</span>
<button class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-2 rounded-lg">View</button>
</div>
</div>
<div class="mt-4 bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
<div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Commented on your photo.</p>
</div>
</div>
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="rounded-md">
</div>
<div class="flex items-center justify-between p-4">
<span class="text-gray-500 dark:text-gray-400 text-sm">10 minutes ago</span>
<button class="bg-green-500 dark:bg-green-700 text-white px-4 py-2 rounded-lg">Reply</button>
</div>
</div>
</div>Composants associés
Composant Notifications
Un composant de notifications skeuomorphique pour le commerce électronique avec une palette de couleurs vives, une interface complexe, un design réactif et une prise en charge du thème sombre, construit avec Tailwind CSS.
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 - Musique/Audio industriels
Un composant de notifications réactif avec une esthétique industrielle et brute, des couleurs à contraste élevé et une prise en charge du mode sombre, adapté aux plateformes musicales et audio. Comprend des états non lus/lus et des éléments interactifs.