레트로 빈티지 인포그래픽 구성 요소
Tailwind CSS로 제작된 반응형 파스텔 색상의 레트로/빈티지 스타일 소셜 미디어 인포그래픽 대시보드 구성 요소로, 사용자 프로필 통계, 인기 해시태그 막대 차트 및 예시 이미지를 제공합니다. Tailwind의 dark: 접두사 및 대화형 호버 애니메이션(JavaScript 필요 없음)을 통한 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="relative max-w-4xl mx-auto p-8 bg-pink-50 dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden">
<!-- Decorative retro shapes -->
<span class="hidden md:block absolute top-4 left-4 w-12 h-12 bg-blue-100 dark:bg-blue-700 rounded-full"></span>
<span class="hidden md:block absolute top-10 right-10 w-8 h-8 bg-yellow-100 dark:bg-yellow-700 rotate-45"></span>
<span class="hidden md:block absolute bottom-8 left-16 w-6 h-6 bg-green-100 dark:bg-green-700 rounded-sm"></span>
<div class="relative z-10">
<h2 class="text-3xl font-extrabold text-purple-700 dark:text-purple-300 mb-2">Retro Social Insights</h2>
<p class="text-md text-gray-700 dark:text-gray-300 mb-6">Your 90s style user engagement dashboard at a glance</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- User Stats Card -->
<div class="bg-white bg-opacity-70 dark:bg-gray-700 dark:bg-opacity-70 rounded-lg p-4 space-y-4">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar"
class="w-12 h-12 rounded-full border-2 border-purple-300 dark:border-purple-600"/>
<div>
<h3 class="text-lg font-bold text-purple-700 dark:text-purple-300">Jane Doe</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">@janedoe</p>
</div>
</div>
<div class="flex justify-between">
<div class="text-center">
<p class="text-2xl font-bold text-blue-500 dark:text-blue-300">1.2k</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Posts</p>
</div>
<div class="text-center">
<p class="text-2xl font-bold text-green-500 dark:text-green-300">3.4k</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-center">
<p class="text-2xl font-bold text-pink-500 dark:text-pink-300">5.6k</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Likes</p>
</div>
</div>
</div>
<!-- Trending Hashtags Chart -->
<div class="bg-white bg-opacity-70 dark:bg-gray-700 dark:bg-opacity-70 rounded-lg p-4">
<h4 class="text-purple-700 dark:text-purple-300 font-semibold mb-4">Trending Hashtags</h4>
<ul class="space-y-4">
<li class="group">
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">#RetroVibes</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">68%</span>
</div>
<div class="w-full bg-purple-200 dark:bg-purple-600 rounded h-2 overflow-hidden">
<div class="group-hover:bg-purple-400 dark:group-hover:bg-purple-500 transition-all duration-300 bg-purple-500 dark:bg-purple-300 h-2"
style="width: 68%"></div>
</div>
</li>
<li class="group">
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">#VintageStyle</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">54%</span>
</div>
<div class="w-full bg-yellow-200 dark:bg-yellow-600 rounded h-2 overflow-hidden">
<div class="group-hover:bg-yellow-400 dark:group-hover:bg-yellow-500 transition-all duration-300 bg-yellow-500 dark:bg-yellow-300 h-2"
style="width: 54%"></div>
</div>
</li>
<li class="group">
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">#Nostalgia</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">42%</span>
</div>
<div class="w-full bg-pink-200 dark:bg-pink-600 rounded h-2 overflow-hidden">
<div class="group-hover:bg-pink-400 dark:group-hover:bg-pink-500 transition-all duration-300 bg-pink-500 dark:bg-pink-300 h-2"
style="width: 42%"></div>
</div>
</li>
</ul>
</div>
</div>
<!-- Illustrative Image -->
<div class="mt-6">
<img src="https://picsum.photos/800/200?random=2" alt="Infographic illustration"
class="w-full h-48 object-cover rounded-lg shadow-inner transition-transform duration-300 hover:scale-105"/>
</div>
</div>
</div>