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
Notifications Composante 26
Un composant de notifications minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre, affichant une liste de notifications avec des avatars et des images.
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 avec des éléments skeuomorphes, utilisant une palette de couleurs complémentaires et une mise en page simple adaptée à un portfolio.