ProgressBarComponent
Un componente de barra de progreso simple, limpio y receptivo con colores neón/eléctricos para sitios web de comida/restaurantes, con soporte para modo oscuro y diseño de tipografía suiza/internacional.
Código HTML
<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>Componentes relacionados
Barra de progreso de neumorfismo
Un componente de barra de progreso con estilo neumorfismo receptivo diseñado para paneles, que incorpora una función interactiva y admite el modo oscuro.
Componente de la barra de progreso
Un componente de barra de progreso receptivo diseñado con elementos 3D, utilizando un esquema de color análogo adecuado para el comercio electrónico, con soporte para modo oscuro
Barra de progreso neumórfica
Un componente de barra de progreso responsivo diseñado con el estilo Neumorphism, que admite temas claros y oscuros mediante Tailwind CSS.