Infographics Component
A complex, responsive Infographics Component for business websites, designed with a Skeuomorphism style and a vibrant color scheme using Tailwind CSS. Includes dark mode support and interactive elements.
HTML Code
<div class="p-8 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans relative overflow-hidden">
<!-- Background texture overlaid with a subtle grid for depth -->
<div class="absolute inset-0 bg-repeat opacity-10" style="background-image: url('https://www.transparenttextures.com/patterns/clean-gray-paper.png');"></div>
<!-- Main container with a rounded, lifted effect -->
<div class="relative max-w-7xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-2xl overflow-hidden
transform transition-all duration-300 hover:scale-[1.005] hover:shadow-3xl
dark:shadow-[0_20px_50px_rgba(0,0,0,0.8)] dark:border dark:border-gray-600">
<!-- Inner metallic bezel effect -->
<div class="absolute inset-0 rounded-3xl p-px
bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-600 dark:to-gray-800
pointer-events-none"></div>
<!-- Content Area -->
<div class="relative p-8 md:p-12 lg:p-16 text-gray-800 dark:text-gray-200">
<!-- Header Section -->
<div class="mb-12 text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-4
text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600
dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
drop-shadow-[0_4px_3px_rgba(0,0,0,0.2)] dark:drop-shadow-[0_4px_3px_rgba(0,0,0,0.6)]">
Corporate Performance Overview
</h1>
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto
drop-shadow-[0_1px_1px_rgba(0,0,0,0.1)]">
A comprehensive look at our key metrics and strategic achievements in the past year.
</p>
</div>
<!-- Infographics Grid Container -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 md:gap-12">
<!-- Card 1: Sales Growth -->
<div class="relative p-6 md:p-8 bg-gradient-to-br from-cyan-400 to-blue-600 dark:from-cyan-700 dark:to-blue-900
rounded-2xl shadow-xl border border-blue-700/50 dark:border-blue-500/50
transform transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl
group overflow-hidden">
<!-- Inner metallic border -->
<div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-600 dark:to-blue-800 pointer-events-none"></div>
<div class="relative z-10">
<div class="flex items-center mb-4">
<div class="p-3 rounded-full bg-blue-700 dark:bg-blue-600 shadow-md group-hover:scale-110 transition-transform">
<svg class="h-8 w-8 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 7h8m0 0v8m0-8l-8 8A5 5 0 013 17V7h4a2 2 0 002-2V3a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 002 2z"></path></svg>
</div>
<h3 class="ml-4 text-3xl font-extrabold text-white drop-shadow-lg">Sales Growth</h3>
</div>
<p class="text-white text-5xl md:text-6xl font-bold mb-4 drop-shadow-md">+25%</p>
<p class="text-cyan-100 dark:text-cyan-200 text-lg">Year-over-year revenue increase, driven by new market penetration.</p>
<div class="mt-6 p-4 bg-white/20 dark:bg-white/10 backdrop-blur-sm rounded-xl border border-white/30 dark:border-white/20 shadow-inner flex justify-between items-center">
<span class="text-white font-semibold">Q4 Target:</span>
<span class="text-white text-xl font-bold">$12M</span>
</div>
</div>
</div>
<!-- Card 2: Customer Satisfaction -->
<div class="relative p-6 md:p-8 bg-gradient-to-br from-lime-400 to-green-600 dark:from-lime-700 dark:to-green-900
rounded-2xl shadow-xl border border-green-700/50 dark:border-green-500/50
transform transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl
group overflow-hidden">
<!-- Inner metallic border -->
<div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-br from-green-300 to-green-500 dark:from-green-600 dark:to-green-800 pointer-events-none"></div>
<div class="relative z-10">
<div class="flex items-center mb-4">
<div class="p-3 rounded-full bg-green-700 dark:bg-green-600 shadow-md group-hover:scale-110 transition-transform">
<svg class="h-8 w-8 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="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<h3 class="ml-4 text-3xl font-extrabold text-white drop-shadow-lg">Customer Satisfaction</h3>
</div>
<p class="text-white text-5xl md:text-6xl font-bold mb-4 drop-shadow-md">92%</p>
<p class="text-lime-100 dark:text-lime-200 text-lg">Improved NPS score, showcasing our commitment to client success.</p>
<div class="mt-6 p-4 bg-white/20 dark:bg-white/10 backdrop-blur-sm rounded-xl border border-white/30 dark:border-white/20 shadow-inner flex justify-between items-center">
<span class="text-white font-semibold">Target Score:</span>
<span class="text-white text-xl font-bold">90%</span>
</div>
</div>
</div>
<!-- Card 3: Employee Retention -->
<div class="relative p-6 md:p-8 bg-gradient-to-br from-purple-400 to-indigo-600 dark:from-purple-700 dark:to-indigo-900
rounded-2xl shadow-xl border border-indigo-700/50 dark:border-indigo-500/50
transform transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl
group overflow-hidden">
<!-- Inner metallic border -->
<div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-br from-indigo-300 to-indigo-500 dark:from-indigo-600 dark:to-indigo-800 pointer-events-none"></div>
<div class="relative z-10">
<div class="flex items-center mb-4">
<div class="p-3 rounded-full bg-indigo-700 dark:bg-indigo-600 shadow-md group-hover:scale-110 transition-transform">
<svg class="h-8 w-8 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="M17 20v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2m3-2h4m-4 0h4m-12 0h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<h3 class="ml-4 text-3xl font-extrabold text-white drop-shadow-lg">Employee Retention</h3>
</div>
<p class="text-white text-5xl md:text-6xl font-bold mb-4 drop-shadow-md">88%</p>
<p class="text-purple-100 dark:text-purple-200 text-lg">High talent retention demonstrating a positive work environment.</p>
<div class="mt-6 p-4 bg-white/20 dark:bg-white/10 backdrop-blur-sm rounded-xl border border-white/30 dark:border-white/20 shadow-inner flex justify-between items-center">
<span class="text-white font-semibold">Industry Avg:</span>
<span class="text-white text-xl font-bold">80%</span>
</div>
</div>
</div>
</div>
<!-- Key Initiatives Section -->
<div class="mt-16 bg-gray-50 dark:bg-gray-800 p-8 rounded-2xl shadow-xl
border border-gray-200 dark:border-gray-700
flex flex-col lg:flex-row items-center justify-between gap-8">
<div class="lg:w-1/2">
<h3 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-4
text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-yellow-500
dark:from-red-400 dark:to-yellow-400
drop-shadow-[0_2px_2px_rgba(0,0,0,0.1)]">
Our Key Initiatives
</h3>
<p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed">
Focused efforts on research & development, sustainability, and global expansion are driving our future success.
</p>
</div>
<div class="lg:w-1/2 grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
transform hover:scale-105 transition-transform duration-200">
<h4 class="text-xl font-bold text-blue-600 dark:text-blue-400 mb-2">Innovation Hub</h4>
<p class="text-gray-600 dark:text-gray-300">Investing in cutting-edge technology and talent.</p>
</div>
<div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
transform hover:scale-105 transition-transform duration-200">
<h4 class="text-xl font-bold text-green-600 dark:text-green-400 mb-2">Sustainable Practices</h4>
<p class="text-gray-600 dark:text-gray-300">Reducing our environmental footprint globally.</p>
</div>
<div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
transform hover:scale-105 transition-transform duration-200">
<h4 class="text-xl font-bold text-purple-600 dark:text-purple-400 mb-2">Global Expansion</h4>
<p class="text-gray-600 dark:text-gray-300">Opening new markets and partnerships worldwide.</p>
</div>
<div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
transform hover:scale-105 transition-transform duration-200">
<h4 class="text-xl font-bold text-red-600 dark:text-red-400 mb-2">Team Empowerment</h4>
<p class="text-gray-600 dark:text-gray-300">Fostering growth and well-being for all employees.</p>
</div>
</div>
</div>
<!-- Call to Action / Footer -->
<div class="mt-16 text-center">
<a href="#" class="inline-flex items-center px-8 py-4 rounded-full
bg-gradient-to-r from-orange-500 to-red-600 text-white text-xl font-bold
shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300
dark:from-orange-400 dark:to-red-500
border border-orange-700 dark:border-orange-300
group">
View Full Report
<svg class="ml-3 h-6 w-6 text-white transform group-hover:translate-x-1 transition-transform" 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 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</a>
<p class="mt-8 text-gray-500 dark:text-gray-400 text-sm">
© 2023 Your Company Name. All rights reserved.
</p>
</div>
</div>
</div>
</div>
<!-- To enable dark mode, add a class "dark" to your html tag:
<html class="dark">
... the component ...
</html>
-->Related Components
Infographics Component
A responsive infographics component with engaging microinteractions and dark theme support using Tailwind CSS.
Infographics Component
Complex Infographics Component with Neumorphism design, complementary color scheme, responsive and dark mode support, for Business/Corporate purpose, using Tailwind CSS.
Infographics Component
Infographics Component - Dark Mode UI with Grayscale and Complex design. Responsive with dark theme support.