Retro_Vintage_Pastel_Social_Charts_Component
파스텔 색상을 사용하여 레트로/빈티지 80년대/90년대 미학을 가미한 복잡하고 반응형 차트 구성 요소로, 소셜 미디어 플랫폼용으로 설계되었습니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="font-mono min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-yellow-100 p-4 sm:p-6 lg:p-8 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 text-gray-800 dark:text-gray-200">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-3xl border-4 border-purple-300 dark:border-purple-600">
<div class="p-6 sm:p-8 border-b-4 border-purple-300 dark:border-purple-600 bg-gradient-to-r from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-900">
<div class="flex flex-col sm:flex-row items-center justify-between">
<h1 class="text-4xl sm:text-5xl font-extrabold text-blue-600 dark:text-blue-400 mb-4 sm:mb-0 drop-shadow-lg tracking-wide">Retrowave Insights <span class="text-pink-500 dark:text-pink-400 text-2xl">📊</span></h1>
<div class="flex space-x-2">
<button class="px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-pink-300 dark:border-pink-500">Week</button>
<button class="px-4 py-2 bg-purple-400 dark:bg-purple-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-purple-300 dark:border-purple-500">Month</button>
<button class="px-4 py-2 bg-yellow-400 dark:bg-yellow-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-yellow-300 dark:border-yellow-500">Year</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8">
<!-- Engagement Chart -->
<div class="bg-blue-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-blue-200 dark:border-blue-700 transform transition-transform duration-300 hover:scale-[1.02]">
<h2 class="text-2xl font-bold text-blue-600 dark:text-blue-300 mb-4 flex items-center"><span class="text-3xl mr-2">⚡</span>Engagement Overview</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">Your popularity rocketed this month!</p>
<div class="relative h-48 bg-blue-100 dark:bg-gray-600 rounded-lg p-2 flex items-end justify-around border-2 border-blue-200 dark:border-blue-800 shadow-inner overflow-hidden">
<div class="absolute top-2 left-2 right-2 flex justify-between text-xs text-gray-500 dark:text-gray-400">
<span>100K</span><span>75K</span><span>50K</span><span>25K</span><span>0</span>
</div>
<!-- Bars (simplified for HTML/Tailwind) -->
<div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-2/3 transform hover:scale-x-110 transition-transform duration-200 relative group">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">75K</span>
</div>
<div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-4/5 transform hover:scale-x-110 transition-transform duration-200 relative group">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">90K</span>
</div>
<div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-1/2 transform hover:scale-x-110 transition-transform duration-200 relative group">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">50K</span>
</div>
<div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-full transform hover:scale-x-110 transition-transform duration-200 relative group">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">100K</span>
</div>
<div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-3/4 transform hover:scale-x-110 transition-transform duration-200 relative group">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">80K</span>
</div>
</div>
<div class="flex justify-around text-xs mt-2 text-gray-500 dark:text-gray-400">
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span>
</div>
</div>
<!-- Follower Growth -->
<div class="bg-pink-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-pink-200 dark:border-pink-700 transform transition-transform duration-300 hover:scale-[1.02]">
<h2 class="text-2xl font-bold text-pink-600 dark:text-pink-300 mb-4 flex items-center"><span class="text-3xl mr-2">💖</span>Follower Growth</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">You gained 1.2K new cool followers!</p>
<div class="relative h-48 bg-pink-100 dark:bg-gray-600 rounded-lg p-2 flex flex-col justify-end items-start border-2 border-pink-200 dark:border-pink-800 shadow-inner overflow-hidden">
<div class="absolute top-2 left-2 right-2 flex justify-between text-xs text-gray-500 dark:text-gray-400">
<span>20K</span><span>15K</span><span>10K</span><span>5K</span><span>0</span>
</div>
<!-- Line chart simulation with divs -->
<div class="absolute left-0 bottom-0 w-full h-full flex items-end justify-between px-2 pb-2">
<div class="relative flex flex-col items-center w-8" style="height: 20%;">
<div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">4K</span>
</div>
<div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
</div>
<div class="relative flex flex-col items-center w-8" style="height: 50%;">
<div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">10K</span>
</div>
<div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
</div>
<div class="relative flex flex-col items-center w-8" style="height: 70%;">
<div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">14K</span>
</div>
<div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
</div>
<div class="relative flex flex-col items-center w-8" style="height: 90%;">
<div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">18K</span>
</div>
<div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
</div>
<div class="relative flex flex-col items-center w-8" style="height: 100%;">
<div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">20K</span>
</div>
<div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
</div>
</div>
</div>
<div class="flex justify-around text-xs mt-2 text-gray-500 dark:text-gray-400">
<span>W1</span><span>W2</span><span>W3</span><span>W4</span><span>W5</span>
</div>
</div>
<!-- Top Posts / Content Performance -->
<div class="bg-yellow-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-yellow-200 dark:border-yellow-700 transform transition-transform duration-300 hover:scale-[1.02]">
<h2 class="text-2xl font-bold text-yellow-600 dark:text-yellow-300 mb-4 flex items-center"><span class="text-3xl mr-2">🌟</span>Top Content</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">Your latest 8-bit art is blowing up!</p>
<div class="space-y-4">
<div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
<img src="https://picsum.photos/60/60?random=1" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
<div class="flex-1">
<h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">Pixelated Sunset Vibes</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">15.2K Likes • 2.1K Comments</p>
</div>
<span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#1</span>
</div>
<div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
<img src="https://picsum.photos/60/60?random=2" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
<div class="flex-1">
<h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">Neon City Remix</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">12.8K Likes • 1.8K Comments</p>
</div>
<span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#2</span>
</div>
<div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
<img src="https://picsum.photos/60/60?random=3" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
<div class="flex-1">
<h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">VHS Dreams Mixtape</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">9.5K Likes • 1.1K Comments</p>
</div>
<span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#3</span>
</div>
</div>
</div>
<!-- Audience Demographics (Pie Chart) -->
<div class="bg-purple-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-purple-200 dark:border-purple-700 col-span-1 md:col-span-2 lg:col-span-1 transform transition-transform duration-300 hover:scale-[1.02]">
<h2 class="text-2xl font-bold text-purple-600 dark:text-purple-300 mb-4 flex items-center"><span class="text-3xl mr-2">👾</span>Audience Vibe</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">Who's grooving to your tunes?</p>
<div class="relative h-48 flex items-center justify-center bg-purple-100 dark:bg-gray-600 rounded-lg p-2 border-2 border-purple-200 dark:border-purple-800 shadow-inner">
<!-- Simple Pie Chart Simulation with Tailwind - Uses nested divs for segments -->
<div class="relative w-40 h-40 bg-gray-300 dark:bg-gray-500 rounded-full flex items-center justify-center overflow-hidden shadow-xl border border-purple-300 dark:border-purple-600">
<!-- Segment 1: 50% - Female -->
<div class="absolute inset-0 bg-pink-400 dark:bg-pink-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(0deg);"></div>
<!-- Segment 2: 30% - Male -->
<div class="absolute inset-0 bg-blue-400 dark:bg-blue-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(180deg);"></div>
<!-- Segment 3: 20% - Other -->
<div class="absolute inset-0 bg-yellow-400 dark:bg-yellow-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(288deg);"></div>
<div class="absolute w-20 h-20 bg-purple-100 dark:bg-gray-700 rounded-full border border-purple-300 dark:border-purple-600"></div>
</div>
</div>
<div class="flex justify-center flex-wrap gap-4 mt-4 text-sm font-semibold">
<div class="flex items-center">
<span class="block w-4 h-4 bg-pink-400 dark:bg-pink-600 rounded-full mr-2 border border-pink-300 dark:border-pink-500"></span>Female <span class="ml-1 text-pink-600 dark:text-pink-300">(50%)</span>
</div>
<div class="flex items-center">
<span class="block w-4 h-4 bg-blue-400 dark:bg-blue-600 rounded-full mr-2 border border-blue-300 dark:border-blue-500"></span>Male <span class="ml-1 text-blue-600 dark:text-blue-300">(30%)</span>
</div>
<div class="flex items-center">
<span class="block w-4 h-4 bg-yellow-400 dark:bg-yellow-600 rounded-full mr-2 border border-yellow-300 dark:border-yellow-500"></span>Other <span class="ml-1 text-yellow-600 dark:text-yellow-300">(20%)</span>
</div>
</div>
</div>
<!-- Recent Mentions/Comments -->
<div class="bg-green-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-green-200 dark:border-green-700 col-span-1 md:col-span-2 transform transition-transform duration-300 hover:scale-[1.02]">
<h2 class="text-2xl font-bold text-green-600 dark:text-green-300 mb-4 flex items-center"><span class="text-3xl mr-2">💬</span>Latest Echoes</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">People are buzzing about your content!</p>
<div class="space-y-4">
<div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
<div class="flex-1">
<p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@SynthWaveDude</span>: "Totally obsessed with your new track! 🎶 Brings back so many memories!"</p>
<p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
<img src="https://randomuser.me/api/portraits/women/62.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
<div class="flex-1">
<p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@NeonDreamer</span>: "This pixel art is pure perfection! Keep it up! 🤩"</p>
<p class="text-sm text-gray-500 dark:text-gray-400">yesterday</p>
</div>
</div>
<div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
<div class="flex-1">
<p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@VaporWaveViking</span>: "Your commitment to the aesthetic is unmatched. Love the consistency!"</p>
<p class="text-sm text-gray-500 dark:text-gray-400">3 days ago</p>
</div>
</div>
</div>
</div>
</div>
<div class="p-6 sm:p-8 bg-gradient-to-l from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-900 border-t-4 border-purple-300 dark:border-purple-600 text-center">
<p class="text-sm text-gray-700 dark:text-gray-300">Insights generated with <span class="text-pink-500 dark:text-pink-400 font-bold">✨ RetroBoost AI ✨</span></p>
</div>
</div>
</div>관련 구성 요소
차트 구성 요소
회색조 색 구성표를 사용하는 어두운 모드의 전자 상거래 웹 응용 프로그램을 위해 설계된 복잡한 차트 구성 요소입니다. 이 구성 요소에는 차트, 데이터 포인트, 도구 설명 및 버튼과 같은 여러 대화형 요소가 포함되어 있으며 Tailwind CSS를 사용한 반응형 디자인이 있습니다.
차트 구성 요소
스포츠/피트니스 애플리케이션을 위한 간단하고 반응이 빠른 차트 구성 요소로, 보석 톤의 다크 모드 UI를 특징으로 합니다. 기본 진행률 또는 성능 메트릭을 표시합니다.