Memphis_Gaming_Notification_Simple_Forest_Green
Un composant de notification de jeu simple et réactif avec une influence du design de Memphis utilisant une palette de couleurs vert forêt, y compris la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
<div class="relative w-full max-w-sm sm:max-w-md bg-gradient-to-br from-emerald-100 to-green-200 dark:from-emerald-900 dark:to-green-950 p-6 rounded-2xl shadow-xl overflow-hidden border-4 border-green-700 dark:border-emerald-600">
<!-- Decorative Memphis Shapes -->
<div class="absolute -top-8 -left-8 w-24 h-24 bg-green-500 dark:bg-emerald-700 transform rotate-45 rounded-lg opacity-70"></div>
<div class="absolute -bottom-10 -right-10 w-28 h-28 bg-emerald-500 dark:bg-green-700 rounded-full opacity-60"></div>
<div class="absolute top-1/4 -right-6 w-16 h-4 bg-green-600 dark:bg-emerald-600 transform -rotate-12"></div>
<div class="absolute bottom-1/3 -left-4 w-12 h-12 bg-emerald-600 dark:bg-green-600 rounded-lg transform rotate-25 opacity-80"></div>
<div class="relative z-10">
<div class="flex items-center mb-4">
<div class="flex-shrink-0 relative">
<img class="h-12 w-12 rounded-full ring-4 ring-green-600 dark:ring-emerald-500" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
<span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-red-500 ring-2 ring-emerald-100 dark:ring-emerald-900"></span>
</div>
<div class="ml-4">
<p class="text-lg font-bold text-green-900 dark:text-emerald-100">New Activity!</p>
<p class="text-sm text-green-700 dark:text-emerald-200">Yesterday at 5:30 PM</p>
</div>
</div>
<p class="text-green-800 dark:text-emerald-200 text-base mb-6 leading-relaxed">
<span class="font-semibold text-green-900 dark:text-emerald-50">PlayerOne</span> just achieved "Dragon Slayer" achievement! 🎉
</p>
<div class="flex justify-end">
<button class="px-5 py-2 bg-green-700 hover:bg-green-800 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold rounded-xl shadow-lg transform transition-transform duration-200 ease-in-out active:scale-95 border-2 border-green-800 dark:border-emerald-900">
View Details
</button>
</div>
</div>
</div>
</div>Composants associés
Composant Notifications
Un composant de notifications simple, propre et à contraste élevé, adapté aux systèmes de réservation et de réservation d’entreprise/professionnels, avec une réactivité totale et une prise en charge du mode sombre.
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 Notifications
Un composant de notifications complexe et réactif conçu avec les principes de Material Design, des couleurs neutres froides et la prise en charge du mode sombre, adapté à un portfolio pour présenter des éléments interactifs et des effets de profondeur.