Composant multimédia Skeuomorphism
Composant multimédia inspiré du skeuomorphisme utilisant un schéma de couleurs monochromatiques et un niveau de complexité complexe, adapté à des fins de blog/contenu. Les fonctionnalités incluent la conception réactive et la prise en charge du thème sombre sans JavaScript.
HTML Code
<div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800 shadow-lg rounded-xl">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Featured Article Card -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 group">
<img class="w-full h-64 object-cover" src="https://picsum.photos/800/600?random=1" alt="Featured Article Image">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Featured Article Title</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm">Published on <span class="font-semibold">October 26, 2023</span></p>
<p class="text-gray-700 dark:text-gray-300 mt-4">This is a summary of the featured article. It gives a brief overview of the content to entice readers to click and learn more. The design mimics a physical object with subtle borders and shadow.</p>
<div class="flex items-center mt-6">
<img class="w-10 h-10 rounded-full mr-4 border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-300">John Doe</span>
</div>
<a href="#" class="inline-block mt-6 text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
</div>
</div>
<!-- Recent Articles List -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Recent Articles</h3>
<ul>
<li class="border-b border-gray-200 dark:border-gray-600 py-3 last:border-b-0">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
<h4 class="font-semibold">Recent Article Title 1</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">A short description of the recent article.</p>
</a>
</li>
<li class="border-b border-gray-200 dark:border-gray-600 py-3 last:border-b-0">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
<h4 class="font-semibold">Recent Article Title 2</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Another short description of a recent article.</p>
</a>
</li>
<li class="py-3">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
<h4 class="font-semibold">Recent Article Title 3</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">A final short description for the list.</p>
</a>
</li>
</ul>
<button class="mt-6 w-full px-4 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">View All Articles</button>
</div>
</div>
</div>Composants associés
Composant multimédia Glassmorphic
Un composant de carte multimédia réactif avec un design glassmorphism (effet verre givré) construit avec Tailwind CSS. Comprend un espace réservé à l’image (de picsum.photos) avec une icône de lecture de survol, du contenu textuel, une section d’auteur avec un avatar (à partir de randomuser.me) et des boutons d’action. Le composant prend en charge le mode sombre à l’aide des variantes CSS 'dark :' de Tailwind et est réactif sur différentes tailles d’écran. Aucun JavaScript n’est requis. Pour un effet visuel optimal, placez ce composant sur un fond contrasté. La fonctionnalité du mode sombre suppose une configuration CSS Tailwind appropriée (par exemple, 'darkMode : « class"' dans votre tailwind.config.js).
Composants multimédias Composante 2
Un composant multimédia de style rétro/vintage avec un design nostalgique inspiré de l’esthétique des années 80/90, avec des effets réactifs et une prise en charge du thème sombre, en utilisant Tailwind CSS.
Glassmorphism Media Components Component
Composant multimédia Glassmorphism avec effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS