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.
HTML Code
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full ring-2 ring-blue-300" src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar">
<div>
<div class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Notification</div>
<p class="text-sm text-gray-600 dark:text-gray-400">You have a new message from John Doe.</p>
</div>
</div>
<div class="mt-4 flex justify-end">
<button class="px-4 py-2 bg-blue-500 text-white rounded-full shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">
View
</button>
</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.
Memphis_Notifications_Component
Un composant de notifications simple et réactif avec une influence du design de Memphis utilisant des neutres chauds, adapté aux sites Web à but non lucratif/caritatifs. Inclut la prise en charge du mode sombre.