인포그래픽 구성 요소
비즈니스 웹사이트를 위한 복잡하고 반응이 빠른 인포그래픽 구성 요소로, Tailwind CSS를 사용하여 스큐어모피즘 스타일과 생생한 색 구성표로 설계되었습니다. 다크 모드 지원 및 대화형 요소가 포함되어 있습니다.
HTML 코드
<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>
-->관련 구성 요소
인포그래픽 구성 요소
뉴모피즘(Neumorphism) 스타일과 파스텔(Pastel) 색 구성표로 디자인된 간단한 인포그래픽 컴포넌트입니다. 프로필 카드와 기본 통계를 비즈니스 또는 기업 웹 사이트에 적합한 시각적으로 매력적인 레이아웃으로 표시합니다.
인포그래픽 구성 요소
어두운 테마를 지원하는 Tailwind CSS를 사용하여 스큐어모픽 스타일로 디자인된 반응형 인포그래픽 구성 요소입니다. 정보를 시각적으로 표시하기 위해 실제 요소를 모방합니다.