Rechercher des composants

Catégories

Composants Indicateurs de progrès

Indicateurs de progrès

Indicateurs visuels des processus en cours

Volet Indicateurs de progrès

Un composant d’indicateur de progression simple, propre et professionnel avec des tons chauds de coucher de soleil, adapté aux services d’affaires et de conseil, doté d’un design réactif et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center mb-10">
      Our Consulting Process
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Step 1 -->
      <div class="relative flex flex-col items-center group">
        <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-yellow-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-yellow-600 shadow-lg">
          1
          <div class="absolute -right-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-yellow-400 transform -translate-y-1/2 hidden md:block"></div>
          <div class="absolute -right-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-yellow-400 transform -translate-y-1/2 hidden lg:hidden md:block"></div>
        </div>
        <div class="text-center mt-4 w-full md:w-auto">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Initial Consultation</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Understanding your needs and goals to tailor our approach.</p>
        </div>
        <div class="absolute top-16 md:hidden w-1 h-8 bg-yellow-500 dark:bg-yellow-400"></div>
      </div>

      <!-- Step 2 -->
      <div class="relative flex flex-col items-center group">
        <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-orange-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-orange-600 shadow-lg">
          2
          <div class="absolute -left-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-orange-400 transform -translate-y-1/2 hidden md:block"></div>
          <div class="absolute -right-2 top-1/2 w-4 h-1 bg-orange-500 dark:bg-orange-400 transform -translate-y-1/2 hidden md:block"></div>
        </div>
        <div class="text-center mt-4 w-full md:w-auto">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Strategy & Planning</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Developing a custom strategy roadmap and detailed action plans.</p>
        </div>
        <div class="absolute top-16 md:hidden w-1 h-8 bg-orange-500 dark:bg-orange-400"></div>
      </div>

      <!-- Step 3 -->
      <div class="relative flex flex-col items-center group">
        <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-red-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-red-600 shadow-lg">
          3
          <div class="absolute -left-2 top-1/2 w-4 h-1 bg-orange-500 dark:bg-red-400 transform -translate-y-1/2 hidden md:block"></div>
        </div>
        <div class="text-center mt-4 w-full md:w-auto">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Execution & Review</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Implementing solutions and continuously reviewing progress.</p>
        </div>
      </div>
    </div>
  </div>
</div>

ArtDecoProgressIndicator

Un composant complexe d’indicateur de progression inspiré de l’Art déco pour les plateformes d’emploi/carrière, avec des motifs géométriques, un style luxueux et des couleurs complémentaires. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-6 md:p-10 lg:p-16 antialiased">
  <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-12 transform -rotate-2 selection:bg-yellow-200 selection:text-black dark:selection:bg-yellow-800 dark:selection:text-white transition-colors duration-300">
    <span class="block bg-gradient-to-r from-yellow-500 to-amber-600 dark:from-yellow-400 dark:to-amber-500 text-transparent bg-clip-text drop-shadow-lg">Your Career Journey</span>
    <span class="block text-2xl md:text-3xl text-gray-600 dark:text-gray-400 mt-2 tracking-wide">Progress Overview</span>
  </h2>

  <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Left Column: Overall Progress -->
    <div class="lg:col-span-1 bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform hover:scale-[1.01] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
      <div class="p-6 md:p-8 flex flex-col justify-between h-full">
        <div>
          <div class="text-center mb-8">
            <div class="relative w-48 h-48 mx-auto mb-4">
              <svg class="w-full h-full transform rotate-[-90deg]" viewBox="0 0 100 100">
                <circle class="text-gray-200 dark:text-gray-700 stroke-current" stroke-width="6" cx="50" cy="50" r="40" fill="transparent"></circle>
                <circle class="text-yellow-500 stroke-current progress-circle transition-all duration-1000 ease-out" stroke-width="6" stroke-linecap="round" cx="50" cy="50" r="40" fill="transparent" stroke-dasharray="calc(2.51 * 75) 251"></circle>
              </svg>
              <div class="absolute inset-0 flex flex-col items-center justify-center">
                <span class="text-5xl font-bold bg-gradient-to-r from-yellow-500 to-amber-600 dark:from-yellow-400 dark:to-amber-500 text-transparent bg-clip-text">75%</span>
                <span class="text-lg text-gray-600 dark:text-gray-400">Completed</span>
              </div>
            </div>
            <p class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">Overall Completion</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Your journey unfolds with great progress.</p>
          </div>

          <div class="space-y-4">
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-400 shadow-md"></div>
              <span class="text-sm text-gray-600 dark:text-gray-400">Profile Setup: <span class="font-semibold text-gray-800 dark:text-gray-200">100%</span></span>
              <!-- Example of a small progress bar for sub-sections -->
              <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                <div class="bg-blue-500 dark:bg-blue-400 h-full rounded-full" style="width: 100%;"></div>
              </div>
            </div>
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-green-500 dark:bg-green-400 shadow-md"></div>
              <span class="text-sm text-gray-600 dark:text-gray-400">Skills & Experience: <span class="font-semibold text-gray-800 dark:text-gray-200">80%</span></span>
              <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                <div class="bg-green-500 dark:bg-green-400 h-full rounded-full" style="width: 80%;"></div>
              </div>
            </div>
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-purple-500 dark:bg-purple-400 shadow-md"></div>
              <span class="text-sm text-gray-600 dark:text-gray-400">Job Applications: <span class="font-semibold text-gray-800 dark:text-gray-200">60%</span></span>
              <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                <div class="bg-purple-500 dark:bg-purple-400 h-full rounded-full" style="width: 60%;"></div>
              </div>
            </div>
          </div>
        </div>

        <button class="mt-8 w-full py-3 px-6 rounded-lg bg-yellow-500 hover:bg-amber-600 dark:bg-amber-600 dark:hover:bg-yellow-500 text-white font-bold text-lg shadow-lg transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-amber-800">
          View Full Details
        </button>
      </div>
    </div>

    <!-- Right Columns: Milestones & Challenges -->
    <div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Milestones Card -->
      <div class="bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl p-6 md:p-8 transform hover:scale-[1.01] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
        <h3 class="text-3xl font-bold bg-gradient-to-r from-blue-500 to-cyan-600 dark:from-blue-400 dark:to-cyan-500 text-transparent bg-clip-text mb-6 pb-2 border-b-2 border-blue-200 dark:border-cyan-700 text-center md:text-left">🚀 Milestones Achieved</h3>
        <div class="space-y-6">
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-blue-500 dark:bg-blue-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Profile Completed</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">All essential information filled on 2023-10-26.</p>
            </div>
          </div>
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-cyan-500 dark:bg-cyan-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">First 5 Applications</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Successfully applied to 5 jobs on 2023-11-01.</p>
            </div>
          </div>
          <div class="flex items-start opacity-70">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-600 dark:text-gray-400 text-xl font-bold mr-4 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-700 dark:text-gray-300 text-lg">Awaiting Interview Invite</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">Next milestone: confirm an interview request.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Challenges Card -->
      <div class="bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl p-6 md:p-8 transform hover:scale-[1.01] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
        <h3 class="text-3xl font-bold bg-gradient-to-r from-red-500 to-orange-600 dark:from-red-400 dark:to-orange-500 text-transparent bg-clip-text mb-6 pb-2 border-b-2 border-red-200 dark:border-orange-700 text-center md:text-left">⚠️ Pending Actions</h3>
        <div class="space-y-6">
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-red-500 dark:bg-red-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Update Resume</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Your resume may need updates for relevance. <a href="#" class="text-red-500 hover:underline dark:text-red-400">Action Required</a></p>
            </div>
          </div>
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-orange-500 dark:bg-orange-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Review Notifications</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">You have 3 unread messages from recruiters. <a href="#" class="text-orange-500 hover:underline dark:text-orange-400">Check Now</a></p>
            </div>
          </div>
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-green-500 dark:bg-green-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Add Cover Letter</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Enhance your application for 'Senior Dev Role' job. <a href="#" class="text-green-500 hover:underline dark:text-green-400">Upload Here</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Avatar & CTA card -->
    <div class="lg:col-span-3 bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden p-6 md:p-8 flex flex-col md:flex-row items-center justify-between mt-8 transform hover:scale-[1.005] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
      <div class="flex items-center space-x-6 mb-6 md:mb-0">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full border-4 border-yellow-400 dark:border-amber-600 shadow-lg">
        <div>
          <p class="text-3xl font-extra-bold bg-gradient-to-r from-teal-500 to-lime-600 dark:from-teal-400 dark:to-lime-500 text-transparent bg-clip-text">Keep Up The Great Work!</p>
          <p class="text-lg text-gray-600 dark:text-gray-400 mt-1">Stay focused on your career goals.</p>
        </div>
      </div>
      <button class="py-4 px-8 rounded-full bg-teal-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-teal-500 text-white font-bold text-xl shadow-lg transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-lime-800">
        Explore New Opportunities
      </button>
    </div>

  </div>
</div>

<style>
  /* Custom CSS for the circular progress bar animation */
  .progress-circle {
    transform-origin: center;
    transition: stroke-dasharray 1s ease-out;
    stroke-dashoffset: 0;
  }

  /* Art Deco inspired background patterns */
  .bg-gray-50 {
    background-image: radial-gradient(circle at 100% 150%, #fefce8, rgba(255,255,255,0) 50%), radial-gradient(circle at 0% 150%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 100% 50%, #fefce8, rgba(255,255,255,0) 50%), radial-gradient(circle at 0% 50%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 100% 0%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 0% 0%, #fefce8, rgba(255,255,255,0) 50%), radial-gradient(circle at 50% 100%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 50% 0%, #fefce8, rgba(255,255,255,0) 50%);
    background-size: 80px 80px;
    background-position: 0 0, 80px 80px, 80px 0, 0 80px;
  }

  .dark .bg-gray-900 {
    background-image: radial-gradient(circle at 100% 150%, #2f344f, rgba(0,0,0,0) 50%), radial-gradient(circle at 0% 150%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 100% 50%, #2f344f, rgba(0,0,0,0) 50%), radial-gradient(circle at 0% 50%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 100% 0%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 0% 0%, #2f344f, rgba(0,0,0,0) 50%), radial-gradient(circle at 50% 100%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 50% 0%, #2f344f, rgba(0,0,0,0) 50%);
    background-size: 80px 80px;
    background-position: 0 0, 80px 80px, 80px 0, 0 80px;
  }

  .bg-gray-850 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 40 49 / var(--tw-bg-opacity)); /* Slightly lighter than gray-900 for card background */
  }

  .dark .bg-gray-850 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 40 49 / var(--tw-bg-opacity));
  }

  /* Glowing effect for specific backgrounds */
  .dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 40px -10px rgba(255, 255, 0, 0.2);
  }

  .selection\:bg-yellow-200::selection {
    background-color: var(--tw-selection-background-color, #fef08a);
  }
  .selection\:text-black::selection {
    color: var(--tw-selection-color, #000);
  }
  .dark .selection\:bg-yellow-800::selection {
    background-color: var(--tw-selection-background-color, #92400e);
  }
  .dark .selection\:text-white::selection {
    color: var(--tw-selection-color, #fff);
  }
</style>

3D_Candy_Music_Player_Progress

Un composant d’indicateur de progression de lecteur de musique complexe, inspiré de la 3D, avec des couleurs sucrées, adapté au streaming musical et aux plateformes audio. Dispose d’une réactivité et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-pink-100 via-purple-100 to-blue-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-xl p-6 md:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out
    border border-pink-200 dark:border-gray-700
    hover:shadow-2xl hover:scale-[1.01]
    relative
    before:content-[''] before:absolute before:inset-0 before:rounded-3xl before:bg-gradient-to-br before:from-pink-50 before:via-purple-50 before:to-blue-50 before:opacity-0 hover:before:opacity-100 dark:before:from-gray-800 dark:before:via-gray-700 dark:before:to-gray-600 dark:hover:before:opacity-5">

    <!-- Background '3D' elements -->
    <div class="absolute -top-10 -left-10 w-32 h-32 bg-pink-300 dark:bg-fuchsia-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob"></div>
    <div class="absolute -bottom-8 -right-8 w-40 h-40 bg-purple-300 dark:bg-violet-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000"></div>
    <div class="absolute top-1/4 right-5 w-24 h-24 bg-blue-300 dark:bg-cyan-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000"></div>

    <div class="relative z-10 space-y-6">
      <!-- Song Info & Album Art -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-6">
        <div class="relative w-32 h-32 sm:w-24 sm:h-24 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg transform transition-all duration-300 ease-in-out
          bg-gradient-to-br from-pink-300 to-purple-300 dark:from-fuchsia-700 dark:to-violet-700
          hover:scale-105 hover:rotate-3"> 
          <!-- 3D effect border -->
          <div class="absolute inset-0.5 rounded-2xl overflow-hidden">
            <img src="https://picsum.photos/id/1043/300/300" alt="Album Art" class="w-full h-full object-cover" />
          </div>
          <div class="absolute inset-0.5 rounded-2xl border-4 border-white border-opacity-30 dark:border-gray-800 dark:border-opacity-30"></div>
        </div>
        <div class="text-center sm:text-left">
          <h3 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white mb-1 leading-tight tracking-wider transform transition-colors duration-300">
            Dreamy Synthwave
          </h3>
          <p class="text-md sm:text-lg text-gray-600 dark:text-gray-300 tracking-wide transform transition-colors duration-300">
            <span class="font-semibold text-purple-600 dark:text-purple-400">Synthwave Artist</span> - Album Name
          </p>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="relative py-4">
        <div class="w-full h-4 relative rounded-full bg-pink-200 dark:bg-gray-700 shadow-inner overflow-hidden">
          <!-- 3D 'track' -->
          <div class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-100 via-purple-100 to-blue-100 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
          <div class="absolute bottom-0 left-0 right-0 h-2 bg-pink-300 dark:bg-gray-900 rounded-b-full opacity-30"></div>

          <!-- Progress fill -->
          <div class="absolute top-0 left-0 h-4 rounded-full bg-gradient-to-r from-pink-400 to-purple-400 dark:from-fuchsia-600 dark:to-violet-600 shadow-lg glow-pink-purple transition-all duration-500 ease-out"
            style="width: 65%;">
            <!-- Inner 3D sparkle -->
            <div class="absolute inset-0 rounded-full bg-white opacity-20 dark:opacity-10 glow-white"></div>
            <!-- 3D 'edge' -->
            <div class="absolute bottom-0 left-0 right-0 h-2 bg-purple-500 dark:bg-violet-800 rounded-b-full opacity-50"></div>
          </div>

          <!-- Playhead 'knob' -->
          <div class="absolute top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-gradient-to-tr from-pink-500 to-purple-500 dark:from-fuchsia-700 dark:to-violet-700 shadow-xl
            flex items-center justify-center glow-pink-purple transition-all duration-500 ease-out"
            style="left: 65%; transform: translateX(-50%) translateY(-50%);">
            <div class="w-3 h-3 rounded-full bg-white dark:bg-gray-100 shadow-md"></div>
          </div>
        </div>
        <div class="flex justify-between text-sm mt-2 text-gray-500 dark:text-gray-400">
          <span class="font-medium">2:35</span>
          <span class="font-medium">3:45</span>
        </div>
      </div>

      <!-- Volume/Playback Speed Bars (mini-progress indicators) -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
        <div>
          <label for="volume-slider" class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1">Volume</label>
          <div class="w-full h-3 relative rounded-full bg-teal-100 dark:bg-gray-700 shadow-inner overflow-hidden">
            <div class="absolute inset-0 rounded-full bg-gradient-to-r from-teal-50 to-emerald-50 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
            <div class="absolute bottom-0 left-0 right-0 h-1.5 bg-teal-200 dark:bg-gray-900 rounded-b-full opacity-30"></div>

            <div class="absolute top-0 left-0 h-3 rounded-full bg-gradient-to-r from-teal-400 to-emerald-400 dark:from-emerald-600 dark:to-teal-600 shadow-md glow-teal-emerald"
              style="width: 80%;"></div>
          </div>
        </div>
        <div>
          <label for="speed-slider" class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1">Speed</label>
          <div class="w-full h-3 relative rounded-full bg-orange-100 dark:bg-gray-700 shadow-inner overflow-hidden">
            <div class="absolute inset-0 rounded-full bg-gradient-to-r from-orange-50 to-amber-50 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
            <div class="absolute bottom-0 left-0 right-0 h-1.5 bg-orange-200 dark:bg-gray-900 rounded-b-full opacity-30"></div>

            <div class="absolute top-0 left-0 h-3 rounded-full bg-gradient-to-r from-orange-400 to-amber-400 dark:from-amber-600 dark:to-orange-600 shadow-md glow-orange-amber"
              style="width: 50%;"></div>
          </div>
        </div>
      </div>

      <!-- Controls (example, not focus of progress) -->
      <div class="flex justify-around items-center pt-6 text-gray-500 dark:text-gray-400">
        <button class="p-3 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-sm dark:shadow-md">
          <!-- < Previous Icon -->
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
          </svg>
        </button>
        <button class="p-4 rounded-full bg-gradient-to-br from-pink-500 to-purple-500 dark:from-fuchsia-700 dark:to-violet-700 text-white shadow-xl glow-pink-purple
          transition-all duration-300 ease-in-out transform hover:scale-105 hover:rotate-3 active:scale-95
          relative overflow-hidden group"
          aria-label="Play">
          <div class="absolute inset-0 rounded-full bg-white opacity-10 dark:opacity-5 group-hover:opacity-20 transition-opacity duration-300"></div>
          <!-- Play Icon -->
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
        <button class="p-3 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-sm dark:shadow-md">
          <!-- Next Icon -->
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
          </svg>
        </button>
      </div>
    </div>

  </div>
</div>

<!-- Custom Styles for 3D effect and animations -->
<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, 0.4, 0.4, 0.8);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Glow effects */
  .glow-pink-purple {
    filter: drop-shadow(0 4px 8px rgba(236, 72, 153, 0.4)) drop-shadow(0 2px 4px rgba(168, 85, 247, 0.3));
  }
  .dark .glow-pink-purple {
    filter: drop-shadow(0 4px 8px rgba(186, 104, 200, 0.3)) drop-shadow(0 2px 4px rgba(126, 75, 140, 0.2)); /* Darker glow for dark mode */
  }

  .glow-teal-emerald {
    filter: drop-shadow(0 2px 4px rgba(20, 184, 166, 0.3)) drop-shadow(0 1px 2px rgba(16, 185, 129, 0.2));
  }
  .dark .glow-teal-emerald {
    filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.2)) drop-shadow(0 1px 2px rgba(20, 184, 166, 0.1));
  }

  .glow-orange-amber {
    filter: drop-shadow(0 2px 4px rgba(249, 115, 22, 0.3)) drop-shadow(0 1px 2px rgba(245, 158, 11, 0.2));
  }
  .dark .glow-orange-amber {
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.2)) drop-shadow(0 1px 2px rgba(249, 115, 22, 0.1));
  }

  .glow-white {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
  }

</style>

Volet Indicateurs de progrès

Indicateurs de progression inspirés du papier/de l’impression pour une place de marché, avec des couleurs bonbons/sucrées. Conception complexe avec plusieurs étapes, mise en page réactive et prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-rose-50 dark:bg-zinc-900 font-sans">
  <div class="max-w-6xl mx-auto bg-white dark:bg-zinc-800 rounded-lg shadow-xl overflow-hidden print-like-border transition-colors duration-300">
    <div class="p-6 sm:p-8 md:p-10 border-b border-rose-100 dark:border-rose-900">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-pink-600 dark:text-pink-400 mb-2 font-serif tracking-tight">Order Progress</h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300">Track the journey of your current marketplace order.</p>
    </div>

    <div class="px-4 py-6 sm:p-8 md:p-10">
      <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
        <!-- Progress Steps -->
        <div class="flex-1 w-full lg:w-auto">
          <ol class="relative text-gray-500 border-s-2 border-rose-200 dark:border-rose-700 space-y-8">
            <!-- Step 1: Order Placed -->
            <li class="mb-8 ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Order Placed</h3>
                <time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 10:30 AM</time>
                <p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your order #ABC-123 has been successfully placed.</p>
              </div>
            </li>

            <!-- Step 2: Payment Confirmed -->
            <li class="mb-8 ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0113 3.414L16.586 7A2 2 0 0118 8.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 2v6h5a1 1 0 011 1v3h2V8H8a2 2 0 01-2-2z" clip-rule="evenodd"></path></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Payment Confirmed</h3>
                <time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 10:35 AM</time>
                <p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Payment processed successfully. Awaiting vendor confirmation.</p>
              </div>
            </li>

            <!-- Step 3: Vendor Preparing Order -->
            <li class="mb-8 ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.885 9.117a.75.75 0 01-.164.839l-3.056 3.055a.75.75 0 01-1.06-.007 2.25 2.25 0 00-3.327-.374l-3.326-2.66c-.664-.53-.984-1.393-.823-2.185.166-.803.791-1.394 1.579-1.554.717-.183 1.488.083 2.052.542l.685.549a.75.75 0 01.077 1.18L9 11.25l-.234.187a.75.75 0 01-.762-.058L5.27 8.358a.75.75 0 01-.013-1.054.75.75 0 011.054-.013l3.41 2.728 2.302-2.302a.75.75 0 011.061 0l3.056 3.055a.75.75 0 010 1.06z" clip-rule="evenodd"></path></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Vendor Preparing Order</h3>
                <time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 11:00 AM</time>
                <p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your items are being prepared by <span class="font-medium text-pink-700 dark:text-pink-300">Sweet Treats Bakery</span>.</p>
              </div>
            </li>

            <!-- Step 4: Out for Delivery (Current) -->
            <li class="mb-8 ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-lime-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.52 1.715a.75.75 0 01.46 0l6.5 2.25a.75.75 0 01.46 1.07V15.5a.75.75 0 01-.75.75h-3.72a.75.75 0 01-.689-.5l-1.442-3.605A.75.75 0 0010.5 11.25h-1.5a.75.75 0 00-.689.444L6.97 15.5H3.75a.75.75 0 01-.75-.75V5.035a.75.75 0 01.46-1.07l6.5-2.25zM12 1.5v3.25h2.5V1.5h-2.5z"/></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-bold text-lg text-lime-600 dark:text-lime-400 leading-tight">Out for Delivery</h3>
                <time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 02:15 PM</time>
                <p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your delicious treats are on their way! Estimated arrival: <span class="font-medium text-lime-700 dark:text-lime-300">3:00 PM - 4:00 PM</span>.</p>
                <div class="flex items-center gap-3 mt-3 p-3 bg-lime-50 dark:bg-lime-900 rounded-md shadow-inner border border-lime-200 dark:border-lime-700">
                  <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Delivery Driver" class="w-10 h-10 rounded-full border-2 border-lime-300 dark:border-lime-600">
                  <div>
                    <p class="font-medium text-lime-700 dark:text-lime-300">Driver: John Smith</p>
                    <a href="tel:+1234567890" class="text-sm text-lime-600 dark:text-lime-400 hover:underline flex items-center">
                      <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.774a11.037 11.037 0 006.103 6.103l.774-1.548a1 1 0 011.06-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
                      (123) 456-7890
                    </a>
                  </div>
                </div>
              </div>
            </li>

            <!-- Step 5: Delivered -->
            <li class="ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-rose-200 dark:bg-rose-700 text-gray-400 dark:text-gray-500 shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 000-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-semibold text-lg text-gray-500 dark:text-gray-400 leading-tight">Delivered</h3>
                <time class="block text-sm text-gray-400 dark:text-gray-600 font-normal leading-none pt-0.5">Awaiting</time>
                <p class="text-base font-normal text-gray-400 dark:text-gray-500 mt-2">Your order will be marked as delivered upon arrival.</p>
              </div>
            </li>
          </ol>
        </div>

        <!-- Order Summary / Details -->
        <div class="relative flex-shrink-0 w-full lg:w-96 p-6 lg:p-8 border border-rose-200 dark:border-rose-700 rounded-lg bg-rose-50 dark:bg-zinc-700 shadow-md transform -rotate-1 perspective-origin-top-left candy-stripes">
          <div class="absolute z-10 w-full h-full inset-0 bg-gradient-to-br from-rose-50/70 via-rose-100/70 to-rose-200/70 dark:from-zinc-700/70 dark:via-zinc-750/70 dark:to-zinc-800/70 mix-blend-overlay"></div>
          <div class="relative z-20">
            <h3 class="text-xl font-bold text-pink-700 dark:text-pink-300 mb-4 font-serif">Order Summary</h3>
            <div class="space-y-3 text-gray-700 dark:text-gray-200">
              <div class="flex justify-between items-center">
                <span class="font-medium">Order ID:</span>
                <span class="text-pink-600 dark:text-pink-400 font-semibold">#ABC-123</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="font-medium">Total Items:</span>
                <span>3</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="font-medium">Total Amount:</span>
                <span class="font-bold text-lg text-lime-600 dark:text-lime-400">$29.99</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="font-medium">Delivery Address:</span>
                <span class="text-right">123 Candy Lane, Sweetville, CA 90210</span>
              </div>
            </div>
            <h4 class="text-lg font-bold text-pink-700 dark:text-pink-300 mt-6 mb-3 font-serif">Items in Order:</h4>
            <ul class="space-y-4">
              <li class="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-md shadow-sm border border-rose-100 dark:border-rose-700">
                <img src="https://picsum.photos/80/80?random=1" alt="Item" class="w-16 h-16 rounded-md object-cover border border-rose-200 dark:border-rose-600">
                <div class="flex-1">
                  <p class="font-semibold text-pink-600 dark:text-pink-400">Rainbow Cupcakes (x2)</p>
                  <p class="text-sm text-gray-600 dark:text-gray-300">Vendor: Sweet Treats Bakery</p>
                </div>
              </li>
              <li class="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-md shadow-sm border border-rose-100 dark:border-rose-700">
                <img src="https://picsum.photos/80/80?random=2" alt="Item" class="w-16 h-16 rounded-md object-cover border border-rose-200 dark:border-rose-600">
                <div class="flex-1">
                  <p class="font-semibold text-pink-600 dark:text-pink-400">Gummy Bear Mix (x1)</p>
                  <p class="text-sm text-gray-600 dark:text-gray-300">Vendor: Candy Kingdom</p>
                </div>
              </li>
            </ul>
            <button class="mt-8 w-full bg-gradient-to-r from-pink-500 to-rose-500 text-white font-bold py-3 px-6 rounded-lg hover:from-pink-600 hover:to-rose-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-pink-400 transition-all duration-300 shadow-lg">
              View Order Details
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Basic Paper-like shadow and border on light mode */
    .print-like-border {
      border: 2px solid theme('colors.rose.100');
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    /* Dark mode adjustments for border and shadow */
    .dark .print-like-border {
      border-color: theme('colors.zinc.700');
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    /* Candy Stripes for the Order Summary */
    .candy-stripes {
      background-image: repeating-linear-gradient(
        45deg, 
        theme('colors.rose.100'), 
        theme('colors.rose.100') 10px, 
        theme('colors.pink.50') 10px, 
        theme('colors.pink.50') 20px
      );
      background-size: 40px 40px;
      box-shadow: 5px 5px 0px theme('colors.pink.200'); /* 'paper curl' shadow */
    }

    .dark .candy-stripes {
      background-image: repeating-linear-gradient(
        45deg, 
        theme('colors.zinc.800'), 
        theme('colors.zinc.800') 10px, 
        theme('colors.zinc.700') 10px, 
        theme('colors.zinc.700') 20px
      );
      box-shadow: 5px 5px 0px theme('colors.zinc.900');
    }
  </style>
</div>

ArtDeco_Food_Restaurant_Progress_Indicators

Composant d’indicateurs de progression d’inspiration Art déco pour les sites Web d’alimentation / restaurants, avec des motifs géométriques, un style luxueux et des tons de terre. Interface complexe avec plusieurs étapes et prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen">
  <div class="max-w-4xl mx-auto bg-stone-200 dark:bg-stone-800 shadow-xl rounded-lg overflow-hidden border border-stone-300 dark:border-stone-700">
    <!-- Header -->
    <div class="bg-gradient-to-br from-amber-800 to-amber-950 dark:from-amber-900 dark:to-stone-950 p-6 sm:p-8 text-center text-stone-100 relative overflow-hidden">
      <div class="absolute inset-0 bg-repeat opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=\'6\' height=\'6\' viewBox=\'0 0 6 6\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23000000\' fill-opacity=\'0.4\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M5 0h1L0 6V5zM6 5v1H5z\'%3E%3C/path%3E%3C/g%3E%3C/svg%3E');"></div>
      <h1 class="text-3xl sm:text-4xl font-bold tracking-wider mb-2 text-stone-100 drop-shadow-md">Your Order Progress</h1>
      <p class="text-stone-200 text-lg">From Kitchen to Your Door</p>
    </div>

    <!-- Progress Steps Container -->
    <div class="p-6 sm:p-8 md:p-10 lg:p-12">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 relative">
        <!-- Horizontal Line for Desktop/Tablet -->
        <div class="hidden md:block absolute top-[25px] left-0 right-0 h-1 bg-stone-400 dark:bg-stone-600 mx-8 lg:mx-16"></div>

        <!-- Step 1: Order Placed -->
        <div class="flex flex-col items-center text-center relative z-10">
          <div class="w-12 h-12 sm:w-14 sm:h-14 bg-amber-700 dark:bg-amber-600 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-amber-500 dark:border-amber-400 shadow-lg">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
          </div>
          <p class="mt-3 text-sm sm:text-base font-semibold text-amber-700 dark:text-amber-300">Order Placed</p>
          <p class="text-xs sm:text-sm text-stone-600 dark:text-stone-400">10:30 AM</p>
        </div>

        <!-- Step 2: Preparing Order -->
        <div class="flex flex-col items-center text-center relative z-10">
          <div class="w-12 h-12 sm:w-14 sm:h-14 bg-amber-700 dark:bg-amber-600 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-amber-500 dark:border-amber-400 shadow-lg">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" 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 20h-3a2 2 0 01-2-2V7a2 2 0 012-2h3a2 2 0 012 2v11a2 2 0 01-2 2z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20h3a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v11a2 2 0 002 2z"></path></svg>
          </div>
          <p class="mt-3 text-sm sm:text-base font-semibold text-amber-700 dark:text-amber-300">Preparing Order</p>
          <p class="text-xs sm:text-sm text-stone-600 dark:text-stone-400">10:45 AM</p>
        </div>

        <!-- Step 3: Out For Delivery -->
        <div class="flex flex-col items-center text-center relative z-10">
          <div class="w-12 h-12 sm:w-14 sm:h-14 bg-stone-500 dark:bg-stone-700 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-stone-400 dark:border-stone-600 shadow-lg opacity-70">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" 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 17l6-6-6-6"></path></svg>
          </div>
          <p class="mt-3 text-sm sm:text-base font-semibold text-stone-700 dark:text-stone-300 opacity-70">Out For Delivery</p>
          <p class="text-xs sm:text-sm text-stone-500 dark:text-stone-400"></p>
        </div>

        <!-- Step 4: Delivered -->
        <div class="flex flex-col items-center text-center relative z-10">
          <div class="w-12 h-12 sm:w-14 sm:h-14 bg-stone-500 dark:bg-stone-700 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-stone-400 dark:border-stone-600 shadow-lg opacity-70">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" 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 13l4 4L19 7"></path></svg>
          </div>
          <p class="mt-3 text-sm sm:text-base font-semibold text-stone-700 dark:text-stone-300 opacity-70">Delivered</p>
          <p class="text-xs sm:text-sm text-stone-500 dark:text-stone-400"></p>
        </div>

        <!-- Vertical Line for Mobile -->
        <div class="absolute inset-y-0 left-1/2 -translate-x-1/2 w-1 bg-stone-400 dark:bg-stone-600 md:hidden"></div>
      </div>
    </div>


    <!-- Delivery Details / Map Section -->
    <div class="bg-stone-300 dark:bg-stone-850 p-6 sm:p-8 md:p-10 lg:p-12 border-t-4 border-amber-800 dark:border-amber-900 border-dashed">
      <h2 class="text-xl sm:text-2xl font-bold text-amber-900 dark:text-amber-200 mb-6 text-center tracking-wide">Delivery Details</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Driver Info Card -->
        <div class="bg-stone-100 dark:bg-stone-700 rounded-lg shadow-md border border-stone-300 dark:border-stone-600 p-6 flex flex-col items-center text-center md:items-start md:text-left">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Driver Avatar" class="w-24 h-24 rounded-full border-4 border-amber-600 dark:border-amber-400 mb-4 shadow-lg">
          <p class="text-lg font-semibold text-stone-800 dark:text-stone-200">Your Driver: John Doe</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Estimated Arrival: 11:30 AM</p>
          <a href="tel:+1234567890" class="mt-4 px-5 py-2 bg-amber-700 dark:bg-amber-600 text-stone-100 rounded-lg shadow-md hover:bg-amber-800 dark:hover:bg-amber-500 transition duration-300 flex items-center">
            <svg class="w-5 h-5 mr-2" 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.134L9.349 14.45a14.001 14.001 0 007.443 7.443l1.815-.545a1 1 0 011.134-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
            Call Driver
          </a>
        </div>

        <!-- Map Placeholder -->
        <div class="bg-stone-100 dark:bg-stone-700 rounded-lg shadow-md border border-stone-300 dark:border-stone-600 p-2 overflow-hidden relative">
          <img src="https://picsum.photos/600/400?grayscale&random=2" alt="Map" class="w-full h-48 md:h-full object-cover rounded-md">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent flex items-end p-4 text-stone-100 font-semibold">
            Tracking Live...
          </div>
        </div>
      </div>
    </div>

    <!-- Decorative Footer -->
    <div class="bg-amber-800 dark:bg-amber-900 h-6 sm:h-8 md:h-10 relative overflow-hidden">
      <div class="absolute inset-0 bg-repeat opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=\'6\' height=\'6\' viewBox=\'0 0 6 6\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23000000\' fill-opacity=\'0.4\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M5 0h1L0 6V5zM6 5v1H5z\'%3E%3C/path%3E%3C/g%3E%3C/svg%3E');"></div>
    </div>
  </div>
</div>

Volet Indicateurs de progrès

Un composant complexe d’indicateur de progression avec des dégradés de couleurs neutres et froides, des transitions fluides et une progression en plusieurs étapes, adapté aux sites Web gouvernementaux/de services publics. Inclut la prise en charge du mode sombre et est entièrement réactif.

Ouvrir Aperçu

                <div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans text-gray-800 dark:text-gray-200 flex items-center justify-center">
  <div class="w-full max-w-5xl bg-white dark:bg-gray-850 shadow-xl rounded-xl p-6 sm:p-8 md:p-10 border border-gray-200 dark:border-gray-700 overflow-hidden">

    <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-center mb-6 sm:mb-8 md:mb-10 text-gray-900 dark:text-gray-100 leading-tight">
      Application Progress Tracker
    </h2>

    <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 mb-8 sm:mb-10 md:mb-12">
      <!-- Step Navigation -->
      <div class="flex flex-col sm:flex-row lg:flex-col items-center lg:items-start w-full lg:w-auto mb-6 lg:mb-0">
        <div class="flex flex-wrap justify-center sm:justify-start lg:block space-x-2 sm:space-x-4 lg:space-x-0 lg:space-y-4 mb-4 lg:mb-0">
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-blue-600/10 text-blue-700 dark:bg-blue-400/20 dark:text-blue-300 shadow-sm hover:underline">
            <svg class="w-4 h-4 mr-2 hidden sm:block" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span class="block">Step 1: Personal Details</span>
          </a>
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-blue-500/5 text-blue-600 dark:bg-gray-700/50 dark:text-gray-400 hover:text-blue-700 dark:hover:text-blue-300 hover:bg-blue-600/10 dark:hover:bg-blue-400/20 shadow-sm">
            <svg class="w-4 h-4 mr-2 hidden sm:block" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="block">Step 2: Address Information</span>
          </a>
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-gray-100 dark:bg-gray-750 text-gray-500 dark:text-gray-400 cursor-not-allowed">
            <svg class="w-4 h-4 mr-2 hidden sm:block" 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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="block">Step 3: Document Upload</span>
          </a>
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-gray-100 dark:bg-gray-750 text-gray-500 dark:text-gray-400 cursor-not-allowed">
            <svg class="w-4 h-4 mr-2 hidden sm:block" 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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="block">Step 4: Review and Submit</span>
          </a>
        </div>
      </div>

      <!-- Overall Progress Bar -->
      <div class="flex-1 w-full lg:w-auto lg:max-w-md">
        <h3 class="text-lg font-semibold mb-2 text-gray-800 dark:text-gray-200 text-center lg:text-left">Overall Progress: 50% Complete</h3>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden relative">
          <div class="h-full bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full transition-all duration-500 ease-out"
               style="width: 50%;">
            <span class="sr-only">50% Complete</span>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-200">50%</span>
        </div>
      </div>
    </div>

    <!-- Current Step Details -->
    <div class="border-t border-gray-200 dark:border-gray-700 pt-6 sm:pt-8">
      <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Current Step: Personal Details</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
        Please provide your basic personal information. All fields are required to proceed to the next step. Your data is securely handled and protected in accordance with government regulations.
      </p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 md:gap-8 mb-8">
        <div>
          <label for="firstName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
          <input type="text" id="firstName" name="firstName" placeholder="e.g., John" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
        <div>
          <label for="lastName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
          <input type="text" id="lastName" name="lastName" placeholder="e.g., Doe" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email" name="email" placeholder="e.g., [email protected]" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
        <div>
          <label for="dob" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Date of Birth</label>
          <input type="date" id="dob" name="dob" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
      </div>

      <div class="flex justify-end gap-3">
        <button type="button" class="px-6 py-2 sm:py-2.5 rounded-md text-base font-medium 
          bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300 
          hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 
          focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-850">
          Save Draft
        </button>
        <button type="button" class="px-6 py-2 sm:py-2.5 rounded-md text-base font-medium 
          bg-gradient-to-r from-blue-500 to-blue-700 text-white dark:from-blue-700 dark:to-blue-900 
          shadow-blue-500/30 hover:from-blue-600 hover:to-blue-800 dark:hover:from-blue-800 dark:hover:to-blue-950 transition-all duration-300 
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">
          Next Step
        </button>
      </div>
    </div>
  </div>
</div>

Volet Indicateurs de progrès industriel

Un composant complexe et contrasté d’indicateurs de progression avec une esthétique de design industriel, adapté aux sites Web d’entreprise. Comprend plusieurs barres de progression, une section d’état détaillée et des textures de matières premières, entièrement réactives avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 font-sans text-gray-800 dark:text-gray-200 min-h-screen">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-400 mb-2 tracking-tight">Project Status Overview</h2>
      <p class="text-gray-600 dark:text-gray-400 text-lg">Comprehensive progress tracking for 'Aurora Borealis' initiative.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 sm:gap-4 p-4 sm:p-6 md:p-8">
      <!-- Left Column: Primary Progress Indicators -->
      <div class="lg:col-span-2 space-y-6 sm:space-y-8">
        <!-- Overall Project Progress -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-blue-600 dark:text-blue-400" 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
            Overall Project Progress
          </h3>
          <div class="mb-2 flex justify-between items-center">
            <span class="text-lg font-medium text-blue-700 dark:text-blue-300">75% Complete</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">Target: 90% by EOM</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden border border-gray-300 dark:border-gray-600">
            <div class="bg-blue-600 dark:bg-blue-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
          </div>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Last Updated: 2 min ago</p>
        </section>

        <!-- Key Milestones Progress -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-emerald-600 dark:text-emerald-400" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Key Milestones
          </h3>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 1: Design & Planning</span>
                <span class="text-md font-medium text-emerald-600 dark:text-emerald-400">100%</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-emerald-600 dark:bg-emerald-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 100%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 2: Development & Integration</span>
                <span class="text-md font-medium text-yellow-600 dark:text-yellow-400">60%</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-yellow-600 dark:bg-yellow-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 60%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 3: Testing & Deployment</span>
                <span class="text-md font-medium text-red-600 dark:text-red-400">20%</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-red-600 dark:bg-red-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 20%;"></div>
              </div>
            </div>
          </div>
        </section>

        <!-- Resource Utilization -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-cyan-600 dark:text-cyan-400" 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 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            Resource Utilization
          </h3>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Budget Allocation</span>
                <span class="text-md font-medium text-orange-600 dark:text-orange-400">85% Used</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-orange-600 dark:bg-orange-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 85%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Team Workload</span>
                <span class="text-md font-medium text-green-600 dark:text-green-400">70% Capacity</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-green-600 dark:bg-green-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 70%;"></div>
              </div>
            </div>
          </div>
        </section>
      </div>

      <!-- Right Column: Status & Updates -->
      <div class="lg:col-span-1 space-y-6 sm:space-y-8">
        <!-- Project Status Board -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-purple-600 dark:text-purple-400" 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 17L12 20L15 17M9 7L12 4L15 7M21 12H3"></path></svg>
            Current Status
          </h3>
          <dl class="divide-y divide-gray-200 dark:divide-gray-700">
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Overall Health:</dt>
              <dd class="font-semibold text-lg text-emerald-600 dark:text-emerald-400">Stable</dd>
            </div>
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Next Deadline:</dt>
              <dd class="font-semibold text-lg text-blue-600 dark:text-blue-400">Feb 28, 2024</dd>
            </div>
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Critical Issues:</dt>
              <dd class="font-semibold text-lg text-red-600 dark:text-red-400">2 Open</dd>
            </div>
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Team Capacity:</dt>
              <dd class="font-semibold text-lg text-orange-600 dark:text-orange-400">Stretched</dd>
            </div>
          </dl>
        </section>

        <!-- Recent Activity -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-indigo-600 dark:text-indigo-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Recent Activity
          </h3>
          <ul class="space-y-4">
            <li class="flex items-start">
              <div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-purple-500"></div>
              <div>
                <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">Dev Team</span> updated 'Auth Module' to 90%.</p>
                <time datetime="2024-02-20" class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</time>
              </div>
            </li>
            <li class="flex items-start">
              <div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-orange-500"></div>
              <div>
                <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">QA Team</span> reported 2 critical bugs in 'Payment Gateway'.</p>
                <time datetime="2024-02-19" class="text-sm text-gray-500 dark:text-gray-400">Yesterday</time>
              </div>
            </li>
            <li class="flex items-start">
              <div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-emerald-500"></div>
              <div>
                <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">Project Manager</span> approved 'Phase 1' completion.</p>
                <time datetime="2024-02-18" class="text-sm text-gray-500 dark:text-gray-400">2 days ago</time>
              </div>
            </li>
          </ul>
        </section>

        <!-- Team Members -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-sky-600 dark:text-sky-400" 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 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5 1.857A2.75 2.75 0 1011 4.252A2.75 2.75 0 0017 17.009zM2 13V7a3 3 0 015.356-1.857M2 13v6a3 3 0 005.356 1.857"></path></svg>
            Core Team
          </h3>
          <div class="flex flex-wrap gap-3">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-blue-500 dark:border-blue-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar of Sarah Johnson">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-500 dark:border-emerald-400" src="https://randomuser.me/api/portraits/men/83.jpg" alt="Avatar of David Lee">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-purple-500 dark:border-purple-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Emily White">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-orange-500 dark:border-orange-400" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar of Michael Brown">
            <a href="#" class="w-12 h-12 rounded-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 font-semibold text-lg border-2 border-gray-400 dark:border-gray-500 transition-colors hover:bg-gray-300 dark:hover:bg-gray-600" aria-label="View all team members">+5</a>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>

Playful_Job_Application_Progress_Indicator

Un composant d’indicateur de progression complexe, ludique et réactif pour les flux de travail des candidatures, avec une palette de couleurs bonbon/sucré et la prise en charge du mode sombre. Conçu pour les sites d’emploi et les plateformes de développement de carrière, il représente visuellement plusieurs étapes de candidature avec des transitions animées et des messages encourageants.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="p-6 sm:p-8">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-pink-600 dark:text-pink-400 mb-2 text-center">
        Your Job Hunt Adventure!
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 text-center">
        Let's track your progress, one sweet step at a time.
      </p>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
        <!-- Application Overview Card -->
        <div class="bg-pink-50 dark:bg-gray-600 rounded-2xl p-6 shadow-md transition-all duration-300 transform hover:scale-105">
          <h3 class="text-xl font-bold text-pink-700 dark:text-pink-300 mb-3">Current Application</h3>
          <p class="text-2xl font-extrabold text-purple-700 dark:text-purple-300">Frontend Developer</p>
          <p class="text-gray-600 dark:text-gray-400 mb-4">at Sparkle Tech Innovations</p>
          <div class="flex items-center text-sm font-medium text-pink-600 dark:text-pink-400">
            <svg class="w-5 h-5 mr-2" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            Applied on: Apr 12, 2024
          </div>
        </div>

        <!-- Motivational Quote Card -->
        <div class="bg-purple-50 dark:bg-gray-600 rounded-2xl p-6 shadow-md transition-all duration-300 transform hover:scale-105">
          <div class="flex items-center justify-center mb-3">
            <svg class="w-10 h-10 text-purple-600 dark:text-purple-300 mr-3" 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.663 17h4.673M12 3v1m6.414 1.758l-.707.707M3.757 19.414l.707-.707M1.021 10.499a11.955 11.955 0 010-2.998m12.745 10.603a11.955 11.955 0 01-2.998 0M21.021 10.499a11.955 11.955 0 000-2.998M3.757 4.586L3.05 3.879m16.97 16.97l-.707-.707M16.95 20.485l.707-.707M12 21.001v-1m-4.504-2.504l-.707.707M5.074 1.758L4.367 1.051M10 12h4m-2 4v-4"></path></svg>
            <h3 class="text-xl font-bold text-purple-700 dark:text-purple-300">Keep Shining!</h3>
          </div>
          <blockquote class="text-lg italic text-gray-700 dark:text-gray-300 text-center">
            "Every 'no' gets you closer to a 'yes'! Your dream job is just around the corner."
          </blockquote>
        </div>
      </div>

      <!-- Progress Steps Container -->
      <div class="relative flex flex-col sm:flex-row justify-between items-center w-full px-4 sm:px-0 mb-8">
        <!-- Progress Line (Mobile/Tablet Hidden) -->
        <div class="hidden sm:block absolute top-1/2 left-0 right-0 h-2 bg-gradient-to-r from-pink-200 to-purple-200 dark:from-gray-500 dark:to-gray-600 rounded-full mx-auto -mt-1 z-0"></div>
        <div class="hidden sm:block absolute top-1/2 left-0 h-2 bg-gradient-to-r from-pink-500 to-purple-500 dark:from-mint-400 dark:to-pink-400 rounded-full transition-all duration-1000 ease-out z-10" style="width: 66%;"></div>

        <!-- Steps -->
        <div class="flex flex-col sm:flex-row w-full justify-between z-20">

          <!-- Step 1: Applied -->
          <div class="flex flex-col items-center mb-6 sm:mb-0 w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-pink-400 to-purple-400 dark:from-mint-500 dark:to-teal-500 text-white shadow-lg transform transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl">
              <svg class="w-8 h-8 sm:w-10 sm:h-10" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-pink-700 dark:text-pink-300 text-center">1. Applied!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-pink-600 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Application Sent (Apr 12)
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-pink-600 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

          <!-- Step 2: Interview Scheduled -->
          <div class="flex flex-col items-center mb-6 sm:mb-0 w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-mint-400 to-teal-400 dark:from-purple-500 dark:to-pink-500 text-white shadow-lg transform transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl">
              <svg class="w-8 h-8 sm:w-10 sm:h-10" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-mint-700 dark:text-mint-300 text-center">2. Interview Time!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-mint-600 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Round 1 Interview (Apr 20)
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-mint-600 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

          <!-- Step 3: Feedback Received -->
          <div class="flex flex-col items-center mb-6 sm:mb-0 w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-orange-400 to-yellow-400 dark:from-amber-500 dark:to-orange-500 text-white shadow-lg opacity-60 transform transition-all duration-300 group-hover:scale-110 group-hover:opacity-100 group-hover:shadow-xl">
              <svg class="w-8 h-8 sm:w-10 sm:h-10" 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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-orange-700 dark:text-orange-300 opacity-60 group-hover:opacity-100 text-center">3. Feedback Fun!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-orange-600 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Awaiting Feedback
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-orange-600 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

          <!-- Step 4: Offer/Rejection -->
          <div class="flex flex-col items-center w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-500 dark:to-gray-600 text-gray-600 dark:text-gray-200 shadow-inner opacity-40 transform transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl group-hover:opacity-100">
              <svg class="w-8 h-8 sm:w-10 sm:h-10" 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 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L12 21l-2.286-6.857L3 12l5.714-2.143L12 3z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-gray-600 dark:text-gray-400 opacity-40 group-hover:opacity-100 text-center">4. Tada Moment!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-gray-800 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Offer or Next Steps
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-gray-800 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

        </div>
      </div>

      <!-- Call to Action / Next Steps -->
      <div class="text-center mt-12">
        <p class="text-xl text-gray-700 dark:text-gray-300 mb-6">Ready for your next power-up? ✨</p>
        <button class="px-8 py-4 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 dark:from-mint-500 dark:to-teal-500 text-white text-lg font-bold shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-mint-300 animate-bounce-slow">
          View All Applications!
        </button>
      </div>

      <!-- Related Content / Profile Link -->
      <div class="mt-10 pt-8 border-t border-gray-200 dark:border-gray-600 text-center">
        <p class="text-gray-600 dark:text-gray-400">Don't forget to keep your profile sparkling! ✨</p>
        <div class="flex items-center justify-center mt-4">
          <img class="w-12 h-12 rounded-full border-4 border-pink-400 dark:border-mint-400 shadow-md mr-3 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <a href="#" class="text-lg font-semibold text-purple-600 dark:text-purple-300 hover:text-purple-800 dark:hover:text-purple-100 transition-colors duration-300">
            My Sparkle Profile
          </a>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
  /* Custom bouncy animation for button */
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .animate-bounce-slow {
    animation: bounce-slow 2s infinite ease-in-out;
  }
</style>

Volet Indicateurs de progrès

Un composant complexe et monochrome sur le thème des réseaux sociaux avec une interface utilisateur en mode sombre, avec plusieurs barres de progression, un flux d’activité et des avatars d’utilisateurs.

Ouvrir Aperçu

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

Indicateur de progression du sépia biologique

Un indicateur de progression simple, inspiré de la nature, pour les applications de rencontres/sociales, avec des tons sépia et bruns chauds avec des lignes fluides, réactif et compatible avec le mode sombre.

Ouvrir Aperçu

                <div class="bg-amber-50 dark:bg-stone-900 min-h-screen p-6 sm:p-10 flex items-center justify-center font-sans">
  <div class="w-full max-w-sm rounded-3xl p-6 sm:p-8 bg-gradient-to-br from-amber-100 to-amber-200 dark:from-stone-800 dark:to-stone-950 shadow-xl overflow-hidden relative border-t border-l border-amber-200/50 dark:border-stone-700/50">
    <!-- Organic Shape Background - Placeholder for SVG/Complex CSS shape -->
    <div class="absolute inset-0 opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'100\%' height=\'100\%' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M0 0 C20 40 80 60 100 20 L100 100 L0 100 Z\' fill=\'#ccc\'/><path d=\'M0 100 C20 60 80 40 100 80 L100 0 L0 0 Z\' fill=\'#eee\'/> Sorry, a true organic shape would require inline SVG or complex CSS, which is outside the scope of pure HTML/Tailwind for this placeholder example. For actual organic shapes, embed an SVG background. This is a subtle radial gradient fallback. '); background-size: cover; background-position: center; border-radius: 1.5rem;"></div>
    <div class="relative z-10 space-y-6">
      <div class="text-center">
        <h2 class="text-2xl font-semibold text-amber-900 dark:text-amber-100 mb-2">Your Journey So Far...</h2>
        <p class="text-sm text-amber-700 dark:text-stone-300">Connecting hearts, one step at a time.</p>
      </div>

      <!-- Progress Steps -->
      <div class="flex justify-between items-center relative">
        <div class="absolute top-1/2 left-0 right-0 h-1 bg-amber-300 dark:bg-stone-700 rounded-full -translate-y-1/2"></div>
        <div class="absolute top-1/2 left-0 right-0 h-1 bg-amber-600 dark:bg-amber-500 rounded-full -translate-y-1/2" style="width: 66.66%;"></div>

        <!-- Step 1 -->
        <div class="relative z-10 flex flex-col items-center">
          <div class="w-8 h-8 rounded-full bg-amber-600 dark:bg-amber-500 flex items-center justify-center text-white text-sm font-bold shadow-md">1</div>
          <p class="text-xs mt-2 text-amber-800 dark:text-stone-200 hidden sm:block">Profile</p>
        </div>

        <!-- Step 2 -->
        <div class="relative z-10 flex flex-col items-center">
          <div class="w-8 h-8 rounded-full bg-amber-600 dark:bg-amber-500 flex items-center justify-center text-white text-sm font-bold shadow-md">2</div>
          <p class="text-xs mt-2 text-amber-800 dark:text-stone-200 hidden sm:block">Interests</p>
        </div>

        <!-- Step 3 (Current) -->
        <div class="relative z-10 flex flex-col items-center">
          <div class="w-10 h-10 rounded-full bg-amber-700 dark:bg-amber-600 border-2 border-amber-500 dark:border-amber-400 flex items-center justify-center text-white text-base font-bold shadow-lg ring-4 ring-amber-300/50 dark:ring-amber-500/30">3</div>
          <p class="text-xs mt-2 text-amber-900 dark:text-amber-100 font-medium sm:block">Photos</p>
        </div>

        <!-- Step 4 -->
        <div class="relative z-10 flex flex-col items-center">
          <div class="w-8 h-8 rounded-full bg-amber-300 dark:bg-stone-700 flex items-center justify-center text-amber-700 dark:text-stone-400 text-sm font-bold">4</div>
          <p class="text-xs mt-2 text-amber-700 dark:text-stone-300 hidden sm:block">Ready!</p>
        </div>
      </div>

      <!-- Call to action/Current Step Info -->
      <div class="text-center pt-4">
        <p class="text-amber-800 dark:text-stone-200 font-medium">You are currently on <span class="font-bold text-amber-900 dark:text-amber-100">Step 3: Upload Photos</span></p>
        <button class="mt-6 w-full py-3 px-6 rounded-full bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 text-white text-lg font-semibold shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300">Continue</button>
      </div>
    </div>
  </div>
</div>