Progress Indicators 구성 요소

<div class="min-h-screen bg-gray-950 p-4 sm:p-8 flex items-center justify-center font-sans dark:bg-gray-950">
  <div class="w-full max-w-4xl bg-gray-900 rounded-lg shadow-xl overflow-hidden dark:bg-gray-900">
    <div class="p-6 sm:p-8 border-b border-gray-800 dark:border-gray-800">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-100 mb-2 dark:text-gray-100">Your Social Progress</h2>
      <p class="text-gray-400 text-sm sm:text-base dark:text-gray-400">Track your engagement and reach milestones.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8">
      <!-- Engagement Progress -->
      <div class="bg-gray-850 p-5 rounded-lg dark:bg-gray-850">
        <h3 class="text-lg font-semibold text-gray-100 mb-3 dark:text-gray-100">Engagement Level</h3>
        <div class="w-full bg-gray-700 rounded-full h-3 dark:bg-gray-700">
          <div class="bg-blue-600 h-3 rounded-full" style="width: 75%;"></div>
        </div>
        <p class="text-sm text-gray-400 mt-2 dark:text-gray-400">75% Towards 'Influencer' Tier</p>
        <div class="flex justify-between items-center text-gray-500 text-xs mt-3 dark:text-gray-500">
          <span>Points: 750/1000</span>
          <span>Next: 250</span>
        </div>
      </div>

      <!-- Post Reach Progress -->
      <div class="bg-gray-850 p-5 rounded-lg dark:bg-gray-850">
        <h3 class="text-lg font-semibold text-gray-100 mb-3 dark:text-gray-100">Post Reach</h3>
        <div class="w-full bg-gray-700 rounded-full h-3 dark:bg-gray-700">
          <div class="bg-purple-600 h-3 rounded-full" style="width: 60%;"></div>
        </div>
        <p class="text-sm text-gray-400 mt-2 dark:text-gray-400">60% of Monthly Target</p>
        <div class="flex justify-between items-center text-gray-500 text-xs mt-3 dark:text-gray-500">
          <span>Reached: 12K/20K</span>
          <span>Remaining: 8K</span>
        </div>
      </div>

      <!-- Profile Completion Progress -->
      <div class="bg-gray-850 p-5 rounded-lg dark:bg-gray-850">
        <h3 class="text-lg font-semibold text-gray-100 mb-3 dark:text-gray-100">Profile Completion</h3>
        <div class="w-full bg-gray-700 rounded-full h-3 dark:bg-gray-700">
          <div class="bg-green-600 h-3 rounded-full" style="width: 90%;"></div>
        </div>
        <p class="text-sm text-gray-400 mt-2 dark:text-gray-400">Almost perfect! Add a bio.</p>
        <div class="flex justify-between items-center text-gray-500 text-xs mt-3 dark:text-gray-500">
          <span>Complete: 9/10 fields</span>
          <span>Missing: 1</span>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 bg-gray-900 border-t border-gray-800 dark:bg-gray-900 dark:border-gray-800">
      <h3 class="text-xl font-semibold text-gray-100 mb-4 dark:text-gray-100">Recent Activity</h3>
      <ul class="space-y-4">
        <!-- Activity Item 1 -->
        <li class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-gray-700 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-200 text-sm dark:text-gray-200"><strong class="text-gray-50">Alex Johnson</strong> liked your post "Summer Vibes".</p>
            <span class="text-gray-500 text-xs dark:text-gray-500">2 hours ago</span>
          </div>
        </li>
        <!-- Activity Item 2 -->
        <li class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-gray-700 dark:border-gray-700" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-200 text-sm dark:text-gray-200"><strong class="text-gray-50">Maria T.</strong> commented on your photo.</p>
            <span class="text-gray-500 text-xs dark:text-gray-500">5 hours ago</span>
          </div>
        </li>
        <!-- Activity Item 3 -->
        <li class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-gray-700 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-200 text-sm dark:text-gray-200"><strong class="text-gray-50">David K.</strong> started following you.</p>
            <span class="text-gray-500 text-xs dark:text-gray-500">1 day ago</span>
          </div>
        </li>
      </ul>
    </div>

    <div class="p-6 sm:p-8 border-t border-gray-800 bg-gray-900 text-center dark:bg-gray-900 dark:border-gray-800">
      <button class="bg-blue-700 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg text-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200 dark:bg-blue-700 dark:hover:bg-blue-600">
        View Detailed Analytics
      </button>
    </div>
  </div>
</div>