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
HTML Code
<div class="container mx-auto py-12 px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Infographic Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-500 dark:bg-blue-700 rounded-full p-3">
<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12c0 4.418-4.03 8-9 8a9.004 9.004 0 01-7.493-3.577L3 16"></path></svg>
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Completion</h3>
</div>
</div>
<p class="mt-4 text-gray-600 dark:text-gray-300">Completed 95% of projects on time within the last year, ensuring client satisfaction and timely delivery.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
<div class="w-full bg-gray-300 rounded-full h-2 dark:bg-gray-600">
<div class="bg-blue-500 h-2 rounded-full" style="width: 95%"></div>
</div>
</div>
</div>
<!-- Infographic Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-teal-500 dark:bg-teal-700 rounded-full p-3">
<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7L6 14l-3-3m0 0l3-3m0 0l3 3m7 0l-3 3m0 0l3 3m0 0l-3-3m3 3l-3-3"></path></svg>
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Skills Acquired</h3>
</div>
</div>
<p class="mt-4 text-gray-600 dark:text-gray-300">Successfully integrated three new key skills into my workflow, enhancing versatility and project outcomes.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
<div class="flex items-center justify-between text-gray-600 dark:text-gray-300">
<span>Skill 1</span>
<span>Advanced</span>
</div>
<div class="flex items-center justify-between text-gray-600 dark:text-gray-300 mt-2">
<span>Skill 2</span>
<span>Intermediate</span>
</div>
<div class="flex items-center justify-between text-gray-600 dark:text-gray-300 mt-2">
<span>Skill 3</span>
<span>Proficient</span>
</div>
</div>
</div>
<!-- Infographic Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-orange-500 dark:bg-orange-700 rounded-full p-3">
<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m6-2v2m0-2a2 2 0 100 4m0-4a2 2 0 110 4m0 4v2"></path></svg>
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Client Satisfaction</h3>
</div>
</div>
<p class="mt-4 text-gray-600 dark:text-gray-300">Achieved a 90% positive feedback rate from clients, demonstrating strong communication and project management.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
<div class="flex items-center justify-betweentext-gray-600 dark:text-gray-300">
<span>Positive Feedback</span>
<span>90%</span>
</div>
<div class="flex items-center justify-between text-gray-600 dark:text-gray-300 mt-2">
<span>Neutral Feedback</span>
<span>8%</span>
</div>
<div class="flex items-center justify-between text-gray-600 dark:text-gray-300 mt-2">
<span>Negative Feedback</span>
<span>2%</span>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Infographie
Composant d’infographie avec design minimaliste / plat, palette de couleurs de tons de terre, complexité modérée pour les entreprises / les entreprises, réactif avec prise en charge du mode sombre.
Composant Infographie
Un composant infographique complexe avec un style de conception Skeuomorphism et une palette de couleurs vives, adapté aux plateformes de commerce électronique. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS. Il affiche diverses statistiques de produits avec des éléments interactifs.
Composant Infographie
Un composant infographique neumorphe avec des tons de terre inspirés du sol, des arbres et des paysages. Il présente un style d’interface utilisateur souple avec une complexité modérée pour une utilisation professionnelle/d’entreprise. Le design est réactif et prend en charge les thèmes sombres à l’aide de Tailwind CSS.