Composant Infographie
Composant Infographie - Interface utilisateur en mode sombre avec niveaux de gris et conception complexe. Réactif avec prise en charge du thème sombre.
HTML Code
<div class="bg-gray-900 text-gray-200 p-8 min-h-screen">
<div class="container mx-auto">
<h1 class="text-4xl font-bold text-center text-white mb-12">My Portfolio Infographics</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project Stats Card -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-semibold text-white mb-4">Project Statistics</h2>
<div class="flex items-center mb-4">
<div class="text-gray-400 mr-2">Completed Projects:</div>
<div class="text-white font-bold">50+</div>
</div>
<div class="flex items-center mb-4">
<div class="text-gray-400 mr-2">Client Satisfaction:</div>
<div class="text-white font-bold">100%</div>
</div>
<div class="flex items-center">
<div class="text-gray-400 mr-2">Years of Experience:</div>
<div class="text-white font-bold">10+</div>
</div>
</div>
<!-- Skills Distribution Card -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-semibold text-white mb-4">Skills Distribution</h2>
<div class="mb-4">
<div class="flex justify-between text-gray-400 mb-1"><span>HTML/CSS</span><span>95%</span></div>
<div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
<div class="bg-gray-400 h-2 rounded-full" style="width: 95%"></div>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between text-gray-400 mb-1"><span>JavaScript</span><span>85%</span></div>
<div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
<div class="bg-gray-400 h-2 rounded-full" style="width: 85%"></div>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between text-gray-400 mb-1"><span>Tailwind CSS</span><span>90%</span></div>
<div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
<div class="bg-gray-400 h-2 rounded-full" style="width: 90%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-gray-400 mb-1"><span>Python</span><span>70%</span></div>
<div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
<div class="bg-gray-400 h-2 rounded-full" style="width: 70%"></div>
</div>
</div>
</div>
<!-- Testimonials Card -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-semibold text-white mb-4">Client Testimonials</h2>
<div class="mb-4 border-b border-gray-700 pb-4">
<p class="text-gray-400 italic mb-2">"Outstanding work! Exceeded expectations and delivered on time."</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar">
<div class="text-white font-semibold">John Smith</div>
</div>
</div>
<div>
<p class="text-gray-400 italic mb-2">"Highly recommend for any web development project. Great communication."</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client Avatar">
<div class="text-white font-semibold">Jane Doe</div>
</div>
</div>
</div>
<!-- Project Showcase Card -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6 md:col-span-2 lg:col-span-3">
<h2 class="text-2xl font-semibold text-white mb-4">Featured Projects</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="relative overflow-hidden rounded-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project1/400/300" alt="Project Image 1">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
<p class="text-white text-xl font-bold">Project Alpha</p>
</div>
</div>
<div class="relative overflow-hidden rounded-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project2/400/300" alt="Project Image 2">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
<p class="text-white text-xl font-bold">Project Beta</p>
</div>
</div>
<div class="relative overflow-hidden rounded-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project3/400/300" alt="Project Image 3">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
<p class="text-white text-xl font-bold">Project Gamma</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
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.
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.
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.