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
Composant Infographie
Un composant d’infographie réactif avec des éléments de conception 3D, une palette de couleurs pastel et une complexité modérée pour les tableaux de bord, avec prise en charge du mode sombre. Pas de JavaScript, seulement du HTML avec Tailwind CSS.
Composant Infographie
Un composant d’infographie réactif avec des micro-interactions attrayantes et une prise en charge du thème sombre à l’aide de Tailwind CSS.
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.