Skeuomorphic_Retro_Success_Message_Component
Un composant de message de réussite de complexité modérée conçu avec un style skeuomorphe, rétro/vintage, adapté aux marques de mode/beauté. Il comprend un design réactif et la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-stone-700 dark:to-stone-800 rounded-3xl p-6 sm:p-8 md:p-10 shadow-[8px_8px_16px_rgba(0,0,0,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(60,60,60,0.4)] border border-yellow-300 dark:border-stone-600 transition-all duration-300 ease-in-out">
<!-- Inner embossed area -->
<div class="p-4 sm:p-6 bg-gradient-to-br from-yellow-50 dark:from-stone-800 to-yellow-100 dark:to-stone-900 rounded-2xl shadow-inner-[inset_4px_4px_8px_rgba(0,0,0,0.1),inset_-4px_-4px_8px_rgba(255,255,255,0.5)] dark:shadow-inner-[inset_4px_4px_8px_rgba(0,0,0,0.4),inset_-4px_-4px_8px_rgba(80,80,80,0.3)] border border-yellow-200 dark:border-stone-700">
<div class="text-center space-y-5 sm:space-y-6 md:space-y-8">
<!-- Checkmark icon - Skeuomorphic style -->
<div class="mx-auto w-24 h-24 sm:w-28 sm:h-28 flex items-center justify-center rounded-full bg-gradient-to-br from-lime-400 to-lime-600 dark:from-green-600 dark:to-green-800 shadow-[6px_6px_12px_rgba(0,0,0,0.2),-6px_-6px_12px_rgba(255,255,255,0.7)] dark:shadow-[6px_6px_12px_rgba(0,0,0,0.5),-6px_-6px_12px_rgba(60,60,60,0.4)] transition-all duration-300 ease-in-out">
<svg class="w-14 h-14 sm:w-16 sm:h-16 text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.4)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-teal-800 dark:text-teal-300 drop-shadow-[0_1px_2px_rgba(0,0,0,0.1)] transition-colors duration-300">Order Confirmed!</h2>
<p class="text-lg sm:text-xl text-amber-700 dark:text-amber-200 leading-relaxed drop-shadow-[0_1px_1px_rgba(0,0,0,0.05)] transition-colors duration-300">
Your journey into timeless elegance has just begun. We've received your order and are preparing your exquisite selections. Thank you!
</p>
<div class="pt-4">
<a href="#" class="inline-flex items-center justify-center px-8 py-3 sm:px-10 sm:py-4 text-lg sm:text-xl font-semibold rounded-full
bg-gradient-to-br from-orange-400 to-orange-600 dark:from-red-600 dark:to-red-800 text-white
shadow-[6px_6px_12px_rgba(0,0,0,0.2),-6px_-6px_12px_rgba(255,255,255,0.7)] dark:shadow-[6px_6px_12px_rgba(0,0,0,0.5),-6px_-6px_12px_rgba(60,60,60,0.4)]
hover:from-orange-500 hover:to-orange-700 dark:hover:from-red-700 dark:hover:to-red-900
hover:shadow-[2px_2px_8px_rgba(0,0,0,0.2),-2px_-2px_8px_rgba(255,255,255,0.7)]
dark:hover:shadow-[2px_2px_8px_rgba(0,0,0,0.5),-2px_-2px_8px_rgba(60,60,60,0.4)]
transition-all duration-300 ease-in-out transform active:scale-95
border border-orange-300 dark:border-red-500">
Continue Browsing
</a>
</div>
</div>
</div>
<!-- Decorative elements mimicking 'screws' or 'hinges' -->
<div class="absolute -top-3 -left-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full"></div></div>
<div class="absolute -top-3 -right-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full rotate-45"></div></div>
<div class="absolute -bottom-3 -left-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full"></div></div>
<div class="absolute -bottom-3 -right-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full rotate-45"></div></div>
</div>
</div>Composants associés
IndustrielDynamiqueGouvernementSuccèsMessage
Un composant de message de réussite conçu pour les services gouvernementaux/publics avec une esthétique industrielle, des couleurs vives et une prise en charge du mode sombre. Il présente un look brut et utilitaire avec des accents à haute saturation.
Composant Messages de réussite
Un composant qui affiche des messages de réussite audacieux avec un style de conception brutal, avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre.
Composant Messages de réussite
Il s’agit d’un composant complexe de messages de réussite inspiré du Material Design pour les applications de médias sociaux, avec des couleurs analogues, une réactivité et une prise en charge du mode sombre.