Composant d’intégration de média
Un composant multimédia complexe et réactif pour la consommation de blog/contenu, avec un design organique/inspiré de la nature, des tons de bijoux et la prise en charge du mode sombre. Comprend un lecteur vidéo, le contenu de l’article et les médias associés.
HTML Code
<div class="font-sans antialiased bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-slate-900 dark:to-teal-950 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen text-gray-800 dark:text-gray-200">
<div class="max-w-7xl mx-auto rounded-3xl overflow-hidden shadow-2xl relative bg-white dark:bg-gray-800 border border-emerald-200 dark:border-teal-700 backdrop-blur-sm bg-opacity-90 dark:bg-opacity-90">
<!-- Organic Top Shape -->
<div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
<svg class="w-full h-full" viewBox="0 0 1440 600" preserveAspectRatio="none">
<path fill="url(#flowyGradient)" d="M0,224C0,224,374.8,2.7,720,0c345.2,-2.7,720,224,720,224L1440,600L0,600L0,224Z"></path>
<defs>
<linearGradient id="flowyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#34D399" />
<stop offset="100%" stop-color="#10B981" />
</linearGradient>
</defs>
</svg>
</div>
<div class="relative z-10 p-6 sm:p-8 md:p-10 lg:p-12 grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Main Content Area -->
<div class="lg:col-span-2 space-y-8">
<!-- Video Embed Area -->
<div class="relative pb-[56.25%] h-0 rounded-2xl overflow-hidden shadow-xl border border-emerald-300 dark:border-teal-600 transform scale-[0.99] hover:scale-100 transition-transform duration-300 ease-in-out">
<iframe class="absolute top-0 left-0 w-full h-full rounded-2xl" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=WpIK1mX4qIK0wK2X" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<!-- Article Details & Content -->
<article class="space-y-6 text-lg leading-relaxed">
<header class="space-y-4">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-emerald-800 dark:text-emerald-300 capitalize tracking-tight leading-snug">
The Serene Dance of Emerald Forests
</h1>
<div class="flex items-center space-x-4 text-emerald-600 dark:text-teal-400 text-sm">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full object-cover border-2 border-emerald-400 dark:border-teal-500 shadow-md"/>
<span>By Sarah Green</span>
</div>
<span>•</span>
<span>October 26, 2023</span>
<span>•</span>
<span>8 min read</span>
</div>
</header>
<p class="text-gray-700 dark:text-gray-300 first-letter:text-5xl first-letter:font-bold first-letter:float-left first-letter:mr-3 first-letter:text-emerald-700 dark:first-letter:text-teal-400">
In the heart of ancient lands, where the veil between worlds thins, lies a realm of unparalleled beauty – the Emerald Forests. Here, sunlight filters through a canopy of vibrant leaves, painting the forest floor in shifting patterns of gold and green. The air is thick with the scent of damp earth and blooming wildflowers, carried on a gentle breeze that whispers secrets through the rustling foliage.
</p>
<p class="text-gray-700 dark:text-gray-300">
Towering trees, their roots deeply intertwined, form natural cathedrals. Moss-covered rocks, worn smooth by centuries of rain, punctuate crystal-clear streams that meander through the landscape, their murmuring currents a soothing melody. This verdant sanctuary is a testament to nature's enduring power and delicate balance, a symphony of life playing out in vibrant hues.
</p>
<blockquote class="p-4 border-l-4 border-emerald-500 dark:border-teal-400 text-gray-700 dark:text-gray-300 italic rounded-r-lg bg-emerald-50 dark:bg-teal-900 shadow-inner">
"Nature does not hurry, yet everything is accomplished." – Lao Tzu
</blockquote>
<p class="text-gray-700 dark:text-gray-300">
From the smallest beetle scuttling through fallen leaves to the majestic deer grazing in sun-dappled clearings, every creature plays a vital role in this thriving ecosystem. Birds with plumage like living jewels flit between branches, their songs echoing through the silence, adding to the immersive experience. It's a place where time slows, allowing one to truly connect with the rhythms of the earth.
</p>
<h2 class="text-2xl sm:text-3xl font-bold text-emerald-700 dark:text-emerald-400 mt-8 mb-4">The Flow of Life's Energies</h2>
<p class="text-gray-700 dark:text-gray-300">
The very essence of the Emerald Forests is its flow – the cyclical dance of growth and decay, the ceaseless movement of water and air, the interconnectedness of all living things. This natural rhythm inspires a sense of profound peace and understanding, reminding us of our own place within the grand tapestry of existence. Observing the intricate patterns of a fern, or the graceful bend of a willow by a stream, reveals lessons in resilience and adaptation.
</p>
</article>
</div>
<!-- Sidebar Area -->
<aside class="space-y-8">
<!-- Related Content -->
<section class="bg-emerald-50 dark:bg-gray-900 p-6 rounded-2xl shadow-lg border border-emerald-200 dark:border-teal-700 transform hover:scale-[1.01] transition-transform duration-300 ease-out">
<h2 class="text-xl font-bold mb-4 text-emerald-700 dark:text-emerald-400">More from Nature's Embrace</h2>
<ul class="space-y-4">
<li class="flex items-center space-x-4 border-b pb-4 last:border-b-0 last:pb-0 border-emerald-200 dark:border-teal-800">
<img src="https://picsum.photos/100/70?random=1" alt="Related media" class="w-20 h-14 object-cover rounded-md shadow-sm border border-emerald-100 dark:border-teal-700"/>
<div class="flex-1">
<a href="#" class="block text-md font-semibold text-emerald-600 dark:text-teal-400 hover:text-emerald-800 dark:hover:text-amber-300 transition-colors duration-200">
Whispers of the Ancient Woods
</a>
<p class="text-sm text-gray-500 dark:text-gray-400">A deep dive into old-growth forests.</p>
</div>
</li>
<li class="flex items-center space-x-4 border-b pb-4 last:border-b-0 last:pb-0 border-emerald-200 dark:border-teal-800">
<img src="https://picsum.photos/100/70?random=2" alt="Related media" class="w-20 h-14 object-cover rounded-md shadow-sm border border-emerald-100 dark:border-teal-700"/>
<div class="flex-1">
<a href="#" class="block text-md font-semibold text-emerald-600 dark:text-teal-400 hover:text-emerald-800 dark:hover:text-amber-300 transition-colors duration-200">
Rivers of Sapphire: Journey Through Waterways
</a>
<p class="text-sm text-gray-500 dark:text-gray-400">Exploring the lifeblood of ecosystems.</p>
</div>
</li>
<li class="flex items-center space-x-4 border-b pb-4 last:border-b-0 last:pb-0 border-emerald-200 dark:border-teal-800">
<img src="https://picsum.photos/100/70?random=3" alt="Related media" class="w-20 h-14 object-cover rounded-md shadow-sm border border-emerald-100 dark:border-teal-700"/>
<div class="flex-1">
<a href="#" class="block text-md font-semibold text-emerald-600 dark:text-teal-400 hover:text-emerald-800 dark:hover:text-amber-300 transition-colors duration-200">
Ruby Sunset: The Colors of Wildlife
</a>
<p class="text-sm text-gray-500 dark:text-gray-400">A photographic essay on vibrant animal life.</p>
</div>
</li>
</ul>
</section>
<!-- Newsletter Signup -->
<section class="bg-emerald-100 dark:bg-emerald-950 p-6 rounded-2xl shadow-lg border border-emerald-300 dark:border-teal-600 transform hover:scale-[1.01] transition-transform duration-300 ease-out">
<h2 class="text-xl font-bold mb-4 text-emerald-800 dark:text-emerald-300">Embrace the Flow with Our Newsletter</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">
Join our community for weekly insights into nature, sustainability, and mindful living.
</p>
<form class="space-y-4">
<input type="email" placeholder="[email protected]" class="w-full p-3 rounded-lg border border-emerald-400 dark:border-teal-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-emerald-500 dark:focus:ring-teal-400 focus:border-transparent transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500" aria-label="Email address for newsletter signup" required />
<button type="submit" class="w-full bg-emerald-600 hover:bg-emerald-700 dark:bg-teal-500 dark:hover:bg-teal-600 text-white font-bold py-3 px-6 rounded-xl shadow-md transition-colors duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-teal-400 dark:focus:ring-offset-gray-900">
Subscribe Now
</button>
</form>
</section>
</aside>
</div>
</div>
</div>Composants associés
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.
Composant d’intégration de média
Un composant d’intégration multimédia réactif conçu avec un style de neumorphisme, avec des couleurs vives et une interface interactive adaptée aux applications de tableau de bord.
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.