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 d’infographie vintage rétro
Un composant de tableau de bord d’infographie de médias sociaux réactif, de couleur pastel, de style rétro/vintage, construit avec Tailwind CSS, avec des statistiques de profil utilisateur, un graphique à barres de hashtag tendance et une image illustrative. Inclut la prise en charge du mode sombre via le préfixe dark : de Tailwind et des animations de survol interactives (aucun JavaScript requis).
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.
Composant Infographie
Un composant d’infographie simple conçu avec une esthétique 3D, utilisant des couleurs pastel pour les interfaces de médias sociaux, avec prise en charge du mode sombre.