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.
HTML Code
<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>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style rétro/vintage utilisant Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.
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.
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.