Message de réussite Art Déco
Un composant de message de réussite inspiré de l’Art déco avec une palette de couleurs rétro/vintage, conçu pour les plateformes de divertissement/médias. Il présente des motifs géométriques, un style luxueux et est entièrement réactif avec la prise en charge du mode sombre.
HTML Code
<div class="p-4 dark:bg-gray-900 bg-gray-50 min-h-screen flex items-center justify-center font-serif">
<div class="max-w-md w-full mx-auto p-6 md:p-8 rounded-lg shadow-2xl relative overflow-hidden
bg-gradient-to-br from-amber-50 dark:from-gray-800 to-amber-200 dark:to-gray-700
border-4 border-amber-300 dark:border-amber-600
transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
<!-- Art Deco Geometric Background Elements -->
<div class="absolute inset-0 pointer-events-none opacity-20 dark:opacity-10">
<svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<pattern id="artDecoPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M0 5 L5 0 L10 5 L5 10 Z" fill="rgba(180, 150, 60, 0.5)" class="dark:fill-amber-700"></path>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#artDecoPattern)"/>
<path d="M0 0 L100 0 L100 100 L0 100 Z" fill="none" stroke="rgba(180, 150, 60, 0.7)" stroke-width="1.5" class="dark:stroke-amber-800"/>
</svg>
</div>
<div class="relative z-10 text-center">
<!-- Diamond / Jewel Icon -->
<div class="mb-6 mx-auto w-20 h-20 rounded-full bg-amber-400 dark:bg-amber-600 flex items-center justify-center shadow-lg transform rotate-45 border-4 border-amber-100 dark:border-amber-800 group-hover:scale-105 transition-transform duration-300">
<svg class="w-10 h-10 text-white dark:text-amber-100 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18.25L2.83 11.08l.7-.71L10 16.83l6.47-6.47.7.71L10 18.25zm0-16.5L2.83 8.92l.7.71L10 2.17l6.47 6.47.7-.71L10 1.75z" clip-rule="evenodd"/>
</svg>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-amber-900 dark:text-amber-100 leading-tight tracking-wider">
<span class="block italic text-amber-700 dark:text-amber-300 text-lg mb-1">Ritz & Glamour Presents...</span>
Success Unlocked!
</h2>
<p class="text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
Your journey into the Golden Age of entertainment just got an upgrade.
Prepare for a cinematic experience like no other.
</p>
<div class="flex justify-center flex-wrap gap-4">
<button class="flex items-center px-6 py-3 rounded-full text-lg font-semibold
bg-amber-600 text-white dark:bg-amber-700 dark:text-amber-50
shadow-lg hover:shadow-xl hover:bg-amber-700 dark:hover:bg-amber-800
transition duration-300 ease-in-out transform hover:-translate-y-0.5
border border-amber-700 dark:border-amber-800">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
</svg>
Explore New Features
</button>
<button class="flex items-center px-6 py-3 rounded-full text-lg font-semibold
bg-white text-amber-700 dark:bg-gray-700 dark:text-amber-300
shadow-lg hover:shadow-xl hover:bg-gray-100 dark:hover:bg-gray-600
transition duration-300 ease-in-out transform hover:-translate-y-0.5
border border-amber-300 dark:border-amber-600">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
Watch Now
</button>
</div>
</div>
</div>
</div>Composants associés
Composant Messages de réussite
Un composant de messages de réussite de style 3D avec des effets réactifs et la prise en charge du thème sombre, avec des espaces réservés pour les images et les avatars.
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.
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.