Infographie rétro
Un composant infographique rétro/vintage simple et réactif pour les portfolios avec prise en charge du mode sombre. Utilise une palette de couleurs complémentaires et des éléments minimaux.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-6 md:p-12 font-sans">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-center mb-8">My Infographic</h2>
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
<h3 class="text-xl font-semibold mb-4">Project Alpha</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Alpha and its key features.</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar of user">
<div class="text-sm">
<p class="text-gray-900 dark:text-gray-100 leading-none">John Smith</p>
<p class="text-gray-600 dark:text-gray-400">Developer</p>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
<h3 class="text-xl font-semibold mb-4">Project Beta</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Beta and its key features.</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/76.jpg" alt="Avatar of user">
<div class="text-sm">
<p class="text-gray-900 dark:text-gray-100 leading-none">Jane Doe</p>
<p class="text-gray-600 dark:text-gray-400">Designer</p>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
<h3 class="text-xl font-semibold mb-4">Project Gamma</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Gamma and its key features.</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/77.jpg" alt="Avatar of user">
<div class="text-sm">
<p class="text-gray-900 dark:text-gray-100 leading-none">Peter Jones</p>
<p class="text-gray-600 dark:text-gray-400">Project Manager</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Infographie
Un composant infographique de complexité modérée pour le gouvernement/les services publics, avec des couleurs de bonbons sucrés et une conception subtile de micro-interaction.
Composant Infographie
Infographie Composant pour portfolio - Material Design, Palette de couleurs analogue, Complexité modérée, Réactif, Prise en charge du thème sombre
RetroInfographicsComposant
Un composant d’infographie réactif avec un design rétro/vintage, une palette de couleurs pastel et une prise en charge du mode sombre. Utilise Tailwind CSS pour le style et comprend plusieurs éléments interactifs pour une interface complexe adaptée aux blogs et à la consommation de contenu. Comprend une chronologie, des barres de progression, des graphiques et un appel à l’action, le tout avec une esthétique des années 80/90 et des couleurs pastel. Utilise des images aléatoires de picsum.photos et randomuser.me pour les avatars.