复古复古信息图表组件

<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>