CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsbalken Luxury_Grayscale_Social_Media_Progress_Bar

Luxury_Grayscale_Social_Media_Progress_Bar

Eine komplexe, elegante und reaktionsschnelle Fortschrittsleistenkomponente für Social-Media-Schnittstellen mit einem luxuriösen Graustufen-Design mit ausgefeilter Typografie und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-6 tracking-tight dark:text-white">Profile Completion</h2>
      <p class="text-md sm:text-lg text-center text-gray-600 dark:text-gray-300 mb-8 max-w-xl mx-auto leading-relaxed">
        Enhance your presence by completing your profile. The more complete it is, the more opportunities you'll discover.
      </p>

      <!-- Main Progress Bar -->
      <div class="mb-10">
        <div class="flex justify-between items-center mb-2">
          <span class="text-lg font-semibold text-gray-700 dark:text-gray-200">Overall Progress</span>
          <span class="text-xl font-bold text-gray-900 dark:text-white">75%</span>
        </div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden">
          <div class="bg-gradient-to-r from-gray-600 to-gray-900 dark:from-gray-300 dark:to-gray-500 h-full rounded-full" style="width: 75%;"></div>
        </div>
      </div>

      <!-- Detailed Steps -->
      <div class="space-y-6">

        <!-- Step 1: Basic Info -->
        <div class="flex items-center space-x-4">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-900 dark:bg-gray-300 flex items-center justify-center">
            <svg class="w-6 h-6 text-white dark:text-gray-900" 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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 9.354V10a5 5 0 00-10 0v9.354m0 0a5 5 0 00-10 0v-9.354"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Basic Profile Information</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">100%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 100%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" 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="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Step 2: Professional Details -->
        <div class="flex items-center space-x-4 opacity-75">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
            <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" 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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 4h2a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2m8 0h.01M6 16h.01"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Professional &amp; Experience</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">50%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 50%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" 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="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Step 3: Interests and Skills -->
        <div class="flex items-center space-x-4 opacity-50">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
            <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" 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="M10 20l4-16m4 4l4 4-4 4M6 4l-4 4 4 4"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Interests &amp; Skills</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">25%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 25%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" 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="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Step 4: Social Links -->
        <div class="flex items-center space-x-4 opacity-25">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
            <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" 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.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.102 1.101m-.757-4.898l-4 4a4 4 0 105.656 5.656l1.102-1.101"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Social Media Links</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">0%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 0%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" 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="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>
      </div>

      <!-- Call to Action -->
      <div class="mt-10 text-center">
        <button class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white bg-gray-900 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-300 ease-in-out
                              dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
          Complete Your Profile
          <svg class="ml-3 w-5 h-5" 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>
        </button>
      </div>
    </div>

    <!-- Decorative Footer -->
    <div class="p-4 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm">
      <p>Your privacy is important to us. Information shared helps connect you with relevant opportunities.</p>
    </div>

  </div>
</div>

Verwandte Komponenten

Gradient Rainbow Fortschrittsbalken für die Fotografie

Eine komplexe, reaktionsschnelle Fortschrittsleistenkomponente für Fotoportfolios mit einem mehrfarbigen Regenbogendesign mit Farbverlauf und Unterstützung für den Dunkelmodus. Ideal für die Präsentation des Ladens von Fotos oder des Fortschritts von Galerien.

Offen

Komponente der 3D-Fortschrittsleiste

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die für Social-Networking-Schnittstellen entwickelt wurde, mit 3D-Effekt, monochromatischem Farbschema und Unterstützung für den Dunkelmodus, die mit Tailwind CSS erstellt wurde.

Offen

Fortschrittsbalken

Eine reaktionsschnelle Fortschrittsleistenkomponente mit Unterstützung für den Dunkelmodus für E-Commerce, mit einem lebendigen Farbschema und einem einfachen Layout.

Offen