Infographics Component
A complex, minimalist infographic component for portfolios, featuring key statistics or achievements. It uses a complementary color scheme and includes responsive design with dark mode support.
HTML Code
<div class="p-6 sm:p-8 lg:p-12 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-sans">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Section 1: Introduction/Title -->
<div class="lg:col-span-1 md:col-span-2 col-span-1 p-6 rounded-lg shadow-xl bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800 text-white flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl">
<div>
<h2 class="text-4xl sm:text-5xl font-extrabold mb-4 leading-tight">My Portfolio Highlights</h2>
<p class="text-lg opacity-90">A concise overview of key achievements and impact across various projects.</p>
</div>
<div class="mt-8 text-right">
<svg class="h-12 w-12 opacity-80 inline-block" 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="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"></path>
</svg>
</div>
</div>
<!-- Stat Card 1 -->
<div class="p-6 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
<div>
<h3 class="text-5xl font-bold text-teal-600 dark:text-teal-400 mb-2">500+</h3>
<p class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Projects Completed</p>
<p class="text-gray-600 dark:text-gray-400">Successfully delivered a wide range of projects, from small-scale applications to enterprise-level solutions.</p>
</div>
<div class="mt-6 flex justify-end">
<span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200">
<svg class="w-4 h-4 mr-1" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
Milestone
</span>
</div>
</div>
<!-- Stat Card 2 -->
<div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
<div>
<h3 class="text-5xl font-bold text-emerald-600 dark:text-emerald-400 mb-2">95%+</h3>
<p class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Client Satisfaction</p>
<p class="text-gray-600 dark:text-gray-400">Consistently achieved high client satisfaction ratings through effective communication and stellar results.</p>
</div>
<div class="mt-6 flex justify-end">
<span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200">
<svg class="w-4 h-4 mr-1" 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="M5 3v4M3 5h4M6 17v-2m-2-2H4a2 2 0 00-2 2v4a2 2 0 002 2h4a2 2 0 002-2v-4a2 2 0 00-2-2H6m5-11V3h8v8h-8V7m0 4h.01M17 11h.01M13 16h.01M17 16h.01M14 21h.01"></path></svg>
Feedback
</span>
</div>
</div>
<!-- Stat Card 3 -->
<div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
<div>
<h3 class="text-5xl font-bold text-orange-600 dark:text-orange-400 mb-2">10K+</h3>
<p class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Users Impacted</p>
<p class="text-gray-600 dark:text-gray-400">Developed solutions that have positively impacted thousands of users globally across various platforms.</p>
</div>
<div class="mt-6 flex justify-end">
<span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
<svg class="w-4 h-4 mr-1" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12a4 4 0 014 4v2H17zm0 0c-4.148 0-7.793-1.428-10-4L2 20h15zm0 0c-4.148 0-7.793-1.428-10-4L2 20h15zm0-16a3 3 0 00-3-3H7a3 3 0 00-3 3v2h12zm0 0v2h2V4z"></path></svg>
Audience
</span>
</div>
</div>
<!-- Image Callout / Visual Element -->
<div class="md:col-span-2 col-span-1 p-6 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex flex-col lg:flex-row items-center justify-center space-y-6 lg:space-y-0 lg:space-x-8 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-xl">
<div class="flex-shrink-0 lg:w-1/3">
<img src="https://picsum.photos/400/300?random=1" alt="Creative Process" class="rounded-lg object-cover h-48 w-full lg:h-auto lg:w-full shadow-md" loading="lazy">
</div>
<div class="lg:flex-grow text-center lg:text-left">
<h3 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-3">Innovation at Core</h3>
<p class="text-gray-600 dark:text-gray-400 text-lg">Embracing cutting-edge technologies and methodologies to deliver forward-thinking solutions.</p>
</div>
</div>
<!-- Testimonial / Quote -->
<div class="p-6 rounded-lg shadow-lg bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-emerald-900 dark:to-teal-950 border border-emerald-200 dark:border-emerald-800 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl relative overflow-hidden">
<blockquote class="relative z-10">
<p class="text-xl italic font-medium text-gray-800 dark:text-gray-200 leading-relaxed mb-4">“Working with [Your Name] was a game-changer for our project. Their expertise and dedication are truly unmatched.”</p>
<footer class="flex items-center">
<img class="h-12 w-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar" loading="lazy">
<div>
<cite class="block text-lg font-semibold text-gray-900 dark:text-gray-100">John Doe</cite>
<span class="block text-gray-700 dark:text-gray-300 text-sm">CEO, Tech Solutions Inc.</span>
</div>
</footer>
</blockquote>
<div class="absolute -bottom-4 -right-4 text-emerald-300 dark:text-emerald-700 opacity-30 z-0">
<svg class="w-32 h-32" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M6 10C4.343 10 3 11.343 3 13s1.343 3 3 3h3l-3 4v-7c0-1.657 1.343-3 3-3zm9 0c-1.657 0-3 1.343-3 3s1.343 3 3 3h3l-3 4v-7c0-1.657 1.343-3 3-3z"></path>
</svg>
</div>
</div>
<!-- Skillset / Progress Bar (simplified) -->
<div class="lg:col-span-2 col-span-1 p-6 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.015] hover:shadow-xl">
<div>
<h3 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-4">Core Competencies</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-lg font-medium text-gray-700 dark:text-gray-300">Frontend Development</span>
<span class="text-gray-500 dark:text-gray-400">95%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
<div class="bg-emerald-500 h-2 rounded-full" style="width: 95%;"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-lg font-medium text-gray-700 dark:text-gray-300">Backend Development</span>
<span class="text-gray-500 dark:text-gray-400">85%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
<div class="bg-teal-500 h-2 rounded-full" style="width: 85%;"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-lg font-medium text-gray-700 dark:text-gray-300">UI/UX Design</span>
<span class="text-gray-500 dark:text-gray-400">70%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
<div class="bg-orange-500 h-2 rounded-full" style="width: 70%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Related Components
Infographics Component
An interactive 3D-inspired infographic component with a retro/vintage color palette for educational platforms, supporting responsive design and dark mode.
Infographics Component
A simple infographics component designed with Neumorphism style and a Pastel color scheme. It displays a profile card and basic statistics in a visually appealing layout suitable for business or corporate websites.
Infographics Component
A neumorphic infographics component with earth tones inspired by soil, trees, and landscapes. It features a soft UI style with moderate complexity for business/corporate use. The design is responsive and supports dark themes using Tailwind CSS.