Composants Indicateurs de progrès Indicateur de progression du sépia biologique

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.

Aperçu

HTML Code

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

Composants associés

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

Composant de la barre de progression 3D

Style avec des effets 3D, Tailwind CSS, un design réactif et la prise en charge du mode sombre.

Ouvrir

Volet Indicateurs de progrès

Un indicateur de progression simple conçu avec un effet de glassmorphism, adapté aux sites Web de commerce électronique avec prise en charge du mode sombre et une palette de couleurs monochromatiques.

Ouvrir