Componentes Notificaciones Memphis_Gaming_Notification_Simple_Forest_Green

Memphis_Gaming_Notification_Simple_Forest_Green

Un componente de notificación de juegos simple y receptivo con una influencia de diseño de Memphis que utiliza una paleta de colores verde bosque, incluida la compatibilidad con el modo oscuro.

Vista previa

Código HTML

<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>

Componentes relacionados

Componente de notificaciones

Un componente de notificaciones complejo y receptivo con elementos inspirados en la Bauhaus que utilizan neutros cálidos, adecuado para sitios de documentación o wiki, con soporte para modo oscuro.

Abrir

Componente de notificaciones 26

Un componente de notificaciones minimalista diseñado con Tailwind CSS, con efectos responsivos y soporte para temas oscuros, que muestra una lista de notificaciones con avatares e imágenes.

Abrir

Componente de notificaciones

Componente de notificaciones responsivas con soporte de modo oscuro para interfaces de redes sociales, con un esquema de colores vibrantes.

Abrir