Progress Indicators Component
Paper/Print-inspired progress indicators for a marketplace, featuring candy/sweet colors. Complex design with multiple steps, responsive layout, and dark mode support.
HTML Code
<div class="p-4 sm:p-6 md:p-8 min-h-screen bg-rose-50 dark:bg-zinc-900 font-sans">
<div class="max-w-6xl mx-auto bg-white dark:bg-zinc-800 rounded-lg shadow-xl overflow-hidden print-like-border transition-colors duration-300">
<div class="p-6 sm:p-8 md:p-10 border-b border-rose-100 dark:border-rose-900">
<h2 class="text-2xl sm:text-3xl font-extrabold text-pink-600 dark:text-pink-400 mb-2 font-serif tracking-tight">Order Progress</h2>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-300">Track the journey of your current marketplace order.</p>
</div>
<div class="px-4 py-6 sm:p-8 md:p-10">
<div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
<!-- Progress Steps -->
<div class="flex-1 w-full lg:w-auto">
<ol class="relative text-gray-500 border-s-2 border-rose-200 dark:border-rose-700 space-y-8">
<!-- Step 1: Order Placed -->
<li class="mb-8 ms-6 flex items-start group">
<span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</span>
<div class="ml-2 flex flex-col">
<h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Order Placed</h3>
<time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 10:30 AM</time>
<p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your order #ABC-123 has been successfully placed.</p>
</div>
</li>
<!-- Step 2: Payment Confirmed -->
<li class="mb-8 ms-6 flex items-start group">
<span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0113 3.414L16.586 7A2 2 0 0118 8.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 2v6h5a1 1 0 011 1v3h2V8H8a2 2 0 01-2-2z" clip-rule="evenodd"></path></svg>
</span>
<div class="ml-2 flex flex-col">
<h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Payment Confirmed</h3>
<time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 10:35 AM</time>
<p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Payment processed successfully. Awaiting vendor confirmation.</p>
</div>
</li>
<!-- Step 3: Vendor Preparing Order -->
<li class="mb-8 ms-6 flex items-start group">
<span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.885 9.117a.75.75 0 01-.164.839l-3.056 3.055a.75.75 0 01-1.06-.007 2.25 2.25 0 00-3.327-.374l-3.326-2.66c-.664-.53-.984-1.393-.823-2.185.166-.803.791-1.394 1.579-1.554.717-.183 1.488.083 2.052.542l.685.549a.75.75 0 01.077 1.18L9 11.25l-.234.187a.75.75 0 01-.762-.058L5.27 8.358a.75.75 0 01-.013-1.054.75.75 0 011.054-.013l3.41 2.728 2.302-2.302a.75.75 0 011.061 0l3.056 3.055a.75.75 0 010 1.06z" clip-rule="evenodd"></path></svg>
</span>
<div class="ml-2 flex flex-col">
<h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Vendor Preparing Order</h3>
<time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 11:00 AM</time>
<p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your items are being prepared by <span class="font-medium text-pink-700 dark:text-pink-300">Sweet Treats Bakery</span>.</p>
</div>
</li>
<!-- Step 4: Out for Delivery (Current) -->
<li class="mb-8 ms-6 flex items-start group">
<span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-lime-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.52 1.715a.75.75 0 01.46 0l6.5 2.25a.75.75 0 01.46 1.07V15.5a.75.75 0 01-.75.75h-3.72a.75.75 0 01-.689-.5l-1.442-3.605A.75.75 0 0010.5 11.25h-1.5a.75.75 0 00-.689.444L6.97 15.5H3.75a.75.75 0 01-.75-.75V5.035a.75.75 0 01.46-1.07l6.5-2.25zM12 1.5v3.25h2.5V1.5h-2.5z"/></svg>
</span>
<div class="ml-2 flex flex-col">
<h3 class="font-bold text-lg text-lime-600 dark:text-lime-400 leading-tight">Out for Delivery</h3>
<time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 02:15 PM</time>
<p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your delicious treats are on their way! Estimated arrival: <span class="font-medium text-lime-700 dark:text-lime-300">3:00 PM - 4:00 PM</span>.</p>
<div class="flex items-center gap-3 mt-3 p-3 bg-lime-50 dark:bg-lime-900 rounded-md shadow-inner border border-lime-200 dark:border-lime-700">
<img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Delivery Driver" class="w-10 h-10 rounded-full border-2 border-lime-300 dark:border-lime-600">
<div>
<p class="font-medium text-lime-700 dark:text-lime-300">Driver: John Smith</p>
<a href="tel:+1234567890" class="text-sm text-lime-600 dark:text-lime-400 hover:underline flex items-center">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.774a11.037 11.037 0 006.103 6.103l.774-1.548a1 1 0 011.06-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
(123) 456-7890
</a>
</div>
</div>
</div>
</li>
<!-- Step 5: Delivered -->
<li class="ms-6 flex items-start group">
<span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-rose-200 dark:bg-rose-700 text-gray-400 dark:text-gray-500 shadow-md transition-all duration-300 group-hover:scale-110">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 000-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
</span>
<div class="ml-2 flex flex-col">
<h3 class="font-semibold text-lg text-gray-500 dark:text-gray-400 leading-tight">Delivered</h3>
<time class="block text-sm text-gray-400 dark:text-gray-600 font-normal leading-none pt-0.5">Awaiting</time>
<p class="text-base font-normal text-gray-400 dark:text-gray-500 mt-2">Your order will be marked as delivered upon arrival.</p>
</div>
</li>
</ol>
</div>
<!-- Order Summary / Details -->
<div class="relative flex-shrink-0 w-full lg:w-96 p-6 lg:p-8 border border-rose-200 dark:border-rose-700 rounded-lg bg-rose-50 dark:bg-zinc-700 shadow-md transform -rotate-1 perspective-origin-top-left candy-stripes">
<div class="absolute z-10 w-full h-full inset-0 bg-gradient-to-br from-rose-50/70 via-rose-100/70 to-rose-200/70 dark:from-zinc-700/70 dark:via-zinc-750/70 dark:to-zinc-800/70 mix-blend-overlay"></div>
<div class="relative z-20">
<h3 class="text-xl font-bold text-pink-700 dark:text-pink-300 mb-4 font-serif">Order Summary</h3>
<div class="space-y-3 text-gray-700 dark:text-gray-200">
<div class="flex justify-between items-center">
<span class="font-medium">Order ID:</span>
<span class="text-pink-600 dark:text-pink-400 font-semibold">#ABC-123</span>
</div>
<div class="flex justify-between items-center">
<span class="font-medium">Total Items:</span>
<span>3</span>
</div>
<div class="flex justify-between items-center">
<span class="font-medium">Total Amount:</span>
<span class="font-bold text-lg text-lime-600 dark:text-lime-400">$29.99</span>
</div>
<div class="flex justify-between items-center">
<span class="font-medium">Delivery Address:</span>
<span class="text-right">123 Candy Lane, Sweetville, CA 90210</span>
</div>
</div>
<h4 class="text-lg font-bold text-pink-700 dark:text-pink-300 mt-6 mb-3 font-serif">Items in Order:</h4>
<ul class="space-y-4">
<li class="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-md shadow-sm border border-rose-100 dark:border-rose-700">
<img src="https://picsum.photos/80/80?random=1" alt="Item" class="w-16 h-16 rounded-md object-cover border border-rose-200 dark:border-rose-600">
<div class="flex-1">
<p class="font-semibold text-pink-600 dark:text-pink-400">Rainbow Cupcakes (x2)</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Vendor: Sweet Treats Bakery</p>
</div>
</li>
<li class="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-md shadow-sm border border-rose-100 dark:border-rose-700">
<img src="https://picsum.photos/80/80?random=2" alt="Item" class="w-16 h-16 rounded-md object-cover border border-rose-200 dark:border-rose-600">
<div class="flex-1">
<p class="font-semibold text-pink-600 dark:text-pink-400">Gummy Bear Mix (x1)</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Vendor: Candy Kingdom</p>
</div>
</li>
</ul>
<button class="mt-8 w-full bg-gradient-to-r from-pink-500 to-rose-500 text-white font-bold py-3 px-6 rounded-lg hover:from-pink-600 hover:to-rose-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-pink-400 transition-all duration-300 shadow-lg">
View Order Details
</button>
</div>
</div>
</div>
</div>
</div>
<style>
/* Basic Paper-like shadow and border on light mode */
.print-like-border {
border: 2px solid theme('colors.rose.100');
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Dark mode adjustments for border and shadow */
.dark .print-like-border {
border-color: theme('colors.zinc.700');
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
/* Candy Stripes for the Order Summary */
.candy-stripes {
background-image: repeating-linear-gradient(
45deg,
theme('colors.rose.100'),
theme('colors.rose.100') 10px,
theme('colors.pink.50') 10px,
theme('colors.pink.50') 20px
);
background-size: 40px 40px;
box-shadow: 5px 5px 0px theme('colors.pink.200'); /* 'paper curl' shadow */
}
.dark .candy-stripes {
background-image: repeating-linear-gradient(
45deg,
theme('colors.zinc.800'),
theme('colors.zinc.800') 10px,
theme('colors.zinc.700') 10px,
theme('colors.zinc.700') 20px
);
box-shadow: 5px 5px 0px theme('colors.zinc.900');
}
</style>
</div>Related Components
Progress Indicators Component
A simple progress indicator designed with a glassmorphism effect, suitable for e-commerce websites with dark mode support and a monochromatic color scheme.
Progress Indicators Component
A retro/vintage styled progress indicators component featuring responsive design and dark theme support using Tailwind CSS.
Progress Indicators Component
A Material Design-inspired progress indicators component with responsive effects and dark theme support, built using Tailwind CSS.