ProgressBarComponent
Un composant de barre de progression simple, propre et réactif avec des couleurs néon/électriques pour les sites Web d’alimentation/restaurants, avec prise en charge du mode sombre et conception typographique suisse/internationale.
HTML Code
<div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 md:p-8 lg:p-10 flex min-h-screen items-center justify-center">
<div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 leading-tight border border-gray-200 dark:border-gray-700">
<h2 class="text-xl sm:text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-3 md:mb-4 tracking-tight">
Your Order Progress
</h2>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-6 sm:mb-8 md:mb-10">
Keep an eye on your delicious order's journey!
</p>
<div class="mb-6 sm:mb-8 md:mb-10">
<div class="flex justify-between items-center mb-2">
<span class="text-lg sm:text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-500 dark:from-red-400 dark:to-pink-400">
Preparing Your Feast
</span>
<span class="text-sm sm:text-base font-semibold text-gray-800 dark:text-gray-200">
75%
</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
<div class="bg-gradient-to-r from-fuchsia-500 to-pink-500 dark:from-fuchsia-400 dark:to-pink-400 h-3 rounded-full" style="width: 75%;">
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-center sm:text-left">
<div class="space-y-1">
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Estimated Delivery
</p>
<p class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white">
15-20 min
</p>
</div>
<div class="space-y-1">
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Order ID
</p>
<p class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white break-all">
#FDRM_87Y5XC
</p>
</div>
</div>
</div>
</div>Composants associés
Composant de la barre de progression
Un composant de barre de progression réactif conçu avec des éléments 3D, utilisant une palette de couleurs analogue adaptée au commerce électronique, avec prise en charge du mode sombre
Barre de progression terreuse de conception matérielle
Une barre de progression inspirée du Material Design avec des tons de terre, adaptée aux interfaces de médias sociaux. Il est réactif et inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant de la barre de progression du mode sombre
Un composant de barre de progression réactif en mode sombre pour les sites Web d’entreprise, utilisant des couleurs vives et des éléments interactifs.