Memphis_Monochromatic_Error_Message
Un composant de message d’erreur simple et monochromatique avec une influence du design de Memphis, adapté aux sites Web d’événements/conférences. Présente des formes audacieuses et une mise en page réactive avec prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
<div class="relative w-full max-w-sm sm:max-w-md lg:max-w-lg mx-auto bg-fuchsia-300 dark:bg-fuchsia-700 rounded-lg shadow-xl overflow-hidden transform rotate-2 dark:rotate-6 transition-all duration-500 ease-in-out hover:scale-105 hover:rotate-0">
<!-- Background Geometric Shapes -->
<div class="absolute inset-0 z-0">
<div class="absolute h-32 w-32 bg-fuchsia-400 dark:bg-fuchsia-600 rounded-full -top-10 -left-10 transform translate-x-2 translate-y-2 rotate-12"></div>
<div class="absolute h-20 w-20 bg-fuchsia-500 dark:bg-fuchsia-500 rounded-lg -bottom-8 -right-8 transform -rotate-45"></div>
<div class="absolute h-16 w-16 bg-fuchsia-400 dark:bg-fuchsia-600 rounded-full top-1/4 right-5 opacity-70"></div>
</div>
<!-- Content Container -->
<div class="relative z-10 p-6 sm:p-8 text-center">
<div class="mb-4 sm:mb-6">
<svg class="mx-auto h-16 w-16 sm:h-20 sm:w-20 text-fuchsia-800 dark:text-fuchsia-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
</svg>
</div>
<h2 class="text-2xl sm:text-3xl font-extrabold text-fuchsia-900 dark:text-fuchsia-100 mb-2 sm:mb-3 font-sans leading-tight">
Oops! Something Went Wrong.
</h2>
<p class="text-base sm:text-lg text-fuchsia-800 dark:text-fuchsia-200 mb-6 sm:mb-8 font-light">
We couldn't process your request. Please check your connection or try again later.
</p>
<button type="button" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-fuchsia-50 dark:text-fuchsia-900 bg-fuchsia-600 dark:bg-fuchsia-300 hover:bg-fuchsia-700 dark:hover:bg-fuchsia-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400 transform -rotate-3 hover:rotate-0 transition-all duration-300 ease-in-out">
<svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
Try Again
</button>
</div>
</div>
</div>Composants associés
Composant Messages d’erreur
Un composant de message d’erreur réactif avec des dégradés de tons de terre, des transitions douces et une prise en charge du mode sombre, adapté aux sites Web de conseil/services.
Composant Messages d’erreur
Composant réactif de messages d’erreur conçu avec un style 3D et une palette de couleurs monochromatiques. Convient à un portfolio, avec des éléments interactifs pour l’engagement de l’utilisateur.
Composant Messages d’erreur - Alimentation/Restaurant
Un composant de message d’erreur triadique complexe, inspiré du papier/de l’impression, pour les sites Web d’alimentation/restaurants, avec prise en charge du mode sombre et une réactivité totale. Comporte plusieurs éléments interactifs simulant une impression physique.