Composants d’affichage de contenu Composant 11
Un composant d’affichage de contenu de style rétro/vintage présentant des designs nostalgiques des années 80/90, avec des effets réactifs et une prise en charge du thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="flex flex-col md:flex-row items-center p-6">
<img class="w-full md:w-1/3 h-auto rounded-lg mb-4 md:mb-0" src="https://picsum.photos/300/200?random=1" alt="Random retro image">
<div class="md:ml-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Retro/Vintage Title</h2>
<p class="text-gray-600 dark:text-gray-400 mb-2">This is a nostalgic description that evokes the design style of the 80s and 90s, full of vibrant colors and retro aesthetics.</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">Posted by <span class="font-bold">User Name</span></span>
</div>
</div>
</div>
<div class="p-6">
<p class="text-gray-700 dark:text-gray-300">Here’s a bit more detail about the content. This section can be used to provide additional context or information.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 text-right">
<button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Read More</button>
</div>
</div>Composants associés
Composant d’affichage du contenu
Un composant d’affichage de contenu réactif qui intègre des micro-interactions avec des animations attrayantes axées sur les actions de l’utilisateur. Il inclut la prise en charge du mode sombre et des espaces réservés pour les images et les avatars.
Carte de contenu de conception matérielle pour l’éducation
Une carte de contenu simple et réactive conçue avec les principes de conception matérielle, la palette de couleurs bleues de l’entreprise et la prise en charge du mode sombre, adaptée aux plateformes éducatives.
Skeuomorphic_Fashion_Card
Une carte d’affichage de contenu simple et réactive pour les produits de mode/beauté, conçue avec une esthétique skeuomorphe utilisant des tons bleus d’entreprise. Inclut la prise en charge du mode sombre.