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

Volet Indicateurs de progrès

Un composant d’indicateurs de progression de style rétro/vintage avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir

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

Volet Indicateurs de progrès

Un composant d’indicateur de progression avec un style glassmorphism, un design réactif et une prise en charge du thème sombre. Utilise Tailwind CSS pour le coiffage.

Ouvrir