Composant d’intégration de support de voyage Art Déco
Un composant multimédia complexe et très contrasté de style Art déco pour les sites Web de voyage et de tourisme, avec des motifs géométriques, un style luxueux et une réactivité totale avec prise en charge du mode sombre. Conçu pour afficher des destinations ou des activités de voyage avec un lecteur multimédia intégré, des détails et un appel à l’action.
HTML Code
<div class="font-sans antialiased bg-stone-100 text-stone-900 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 rounded-xl shadow-2xl relative overflow-hidden">
<!-- Art Deco Border Elements (Purely Decorative) -->
<div class="absolute inset-0 border-4 border-stone-800 dark:border-stone-200 rounded-xl pointer-events-none z-0"></div>
<div class="absolute top-0 left-0 w-16 h-16 bg-gradient-to-br from-amber-500 to-yellow-600 rounded-br-full transform origin-top-left -translate-x-1/2 -translate-y-1/2 opacity-70"></div>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-gradient-to-tl from-amber-500 to-yellow-600 rounded-tl-full transform origin-bottom-right translate-x-1/2 translate-y-1/2 opacity-70"></div>
<div class="relative z-10 flex flex-col lg:flex-row gap-8 lg:gap-12 items-start">
<!-- Left Section: Media Player and Geometric Background -->
<div class="w-full lg:w-3/5 relative rounded-lg overflow-hidden shadow-xl aspect-video bg-stone-800 dark:bg-stone-700 border-4 border-stone-800 dark:border-stone-200">
<!-- Placeholder for Video Embed -->
<iframe class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="absolute inset-0 bg-gradient-to-br from-stone-900/50 to-stone-900/10 dark:from-stone-900/70 dark:to-stone-900/30"></div>
<!-- Geometric Overlay Example -->
<div class="absolute inset-0 pointer-events-none opacity-20 dark:opacity-30">
<svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="0,0 20,0 0,20" fill="#d4a26a"></polygon>
<polygon points="100,0 80,0 100,20" fill="#d4a26a"></polygon>
<polygon points="0,100 0,80 20,100" fill="#d4a26a"></polygon>
<polygon points="100,100 100,80 80,100" fill="#d4a26a"></polygon>
<rect x="25" y="25" width="50" height="50" rx="5" ry="5" fill="none" stroke="#d4a26a" stroke-width="1"></rect>
</svg>
</div>
</div>
<!-- Right Section: Content Details -->
<div class="w-full lg:w-2/5 flex flex-col gap-6">
<header>
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight leading-tight text-amber-600 dark:text-amber-400 drop-shadow-lg [text-shadow:2px_2px_4px_var(--tw-shadow-color)] shadow-stone-900 dark:shadow-stone-700">
Explore the Golden Era of Travel
</h2>
<p class="mt-3 text-lg sm:text-xl text-stone-700 dark:text-stone-300 font-serif italic border-l-4 border-amber-500 pl-4">
Discover the untouched marvels of a bygone world.
</p>
</header>
<div class="space-y-4 text-stone-800 dark:text-stone-200">
<p class="text-base leading-relaxed">
Step back in time to an era of elegance and grand adventure. This exclusive journey takes you through breathtaking landscapes, unveiling hidden gems and iconic landmarks, all with a touch of vintage luxury.
</p>
<ul class="list-none p-0 m-0 space-y-2">
<li class="flex items-center gap-3">
<svg class="w-6 h-6 text-amber-500 flex-shrink-0" 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" d="M9.5 13.5L5 9L1 13.5" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M23 12h-6.5M10.5 5.5L15 1L19.5 5.5" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M23 12h-6.5M10.5 5.5L15 1L19.5 5.5" /><rect x="1" y="1" width="22" height="22" rx="2" ry="2" stroke="currentColor" fill="none"/></svg>
<span class="font-bold">Destination:</span> The Uncharted Highlands
</li>
<li class="flex items-center gap-3">
<svg class="w-6 h-6 text-amber-500 flex-shrink-0" 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" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
<span class="font-bold">Duration:</span> 7 Days / 6 Nights
</li>
<li class="flex items-center gap-3">
<svg class="w-6 h-6 text-amber-500 flex-shrink-0" 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" d="M17.686 17.686A5 5 0 0015 13.5a5 5 0 00-7.071-7.071m2.122 2.121a2 2 0 112.828 2.828M15 11l-8 8m-4-2h1.01M20 16h1.01M13 1h-1.01M1 8h1.01M7 23h.01M17 23h.01M23 8h-.01M13 23h.01"></path></svg>
<span class="font-bold">Travel Style:</span> Vintage Luxury, Expeditionary
</li>
</ul>
</div>
<div class="flex flex-col sm:flex-row gap-4 mt-6">
<a href="#book-now" class="w-full sm:w-auto px-8 py-3 bg-amber-600 hover:bg-amber-700 text-stone-50 font-bold uppercase rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105 active:scale-95
border-2 border-amber-700 dark:border-amber-400
relative overflow-hidden group">
<span class="relative z-10">Book Your Grand Tour</span>
<div class="absolute inset-0 bg-stone-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
</a>
<a href="#learn-more" class="w-full sm:w-auto px-8 py-3 bg-transparent text-amber-600 dark:text-amber-400 font-bold uppercase rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105 active:scale-95
border-2 border-amber-600 dark:border-amber-400 hover:bg-amber-600 hover:text-stone-50 dark:hover:bg-amber-400 dark:hover:text-stone-900">
<span class="relative z-10">Learn More</span>
</a>
</div>
</div>
</div>
</div>Composants associés
Brutalist_Retro_Media_Embed_E-commerce
Un composant d’intégration multimédia complexe, réactif et de style brutaliste pour le commerce électronique, avec un contraste élevé, une palette de couleurs rétro, la prise en charge du mode sombre et de multiples éléments interactifs pour la présentation des produits.
Composant d’intégration multimédia - Crypto/Blockchain
Un composant d’intégration multimédia simple et réactif conçu pour les applications de crypto-monnaie ou de blockchain, avec des tons sépia/bruns et la prise en charge du mode sombre pour réduire la fatigue oculaire.
Composant d’intégration de média
Un composant multimédia d’intégration minimaliste conçu pour les tableaux de bord avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.