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 d’infographie minimaliste avec des espaces propres et des éléments minimaux, la prise en charge du design réactif et du thème sombre.
Composant Infographie
Un composant d’infographie complexe et réactif pour les sites Web d’entreprise, conçu avec un style Skeuomorphism et une palette de couleurs vives à l’aide de Tailwind CSS. Comprend la prise en charge du mode sombre et des éléments interactifs.
Composant Infographie
Un composant d’infographie conçu avec skeuomorphism, avec des effets réactifs et la prise en charge des thèmes sombres, à l’aide de Tailwind CSS.