<section class="py-20 bg-black">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row flex-wrap items-center justify-center">
<div class="flex items-center">
<div class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500 text-sm font-bold">1</div>
<span class="font-bold text-white">Shopping Cart</span>
</div>
<span class="my-4 md:my-0 md:mx-8 lg:mx-16">
<svg width="18" height="14" viewbox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M10.6667 1.16669L16.5 7.00002M16.5 7.00002L10.6667 12.8334M16.5 7.00002L1.5 7.00002" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<div class="flex items-center">
<div class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-blueGray-800 text-sm font-bold text-white">2</div>
<span class="font-bold text-white">Payment & Delivery Options</span>
</div>
<span class="my-4 md:my-0 md:mx-8 lg:mx-16">
<svg width="18" height="14" viewbox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M10.6667 1.16669L16.5 7.00002M16.5 7.00002L10.6667 12.8334M16.5 7.00002L1.5 7.00002" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<div class="flex items-center">
<div class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-blueGray-800 text-sm font-bold text-white">3</div>
<span class="font-bold text-white">Order Received</span>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Advanced inputs 18
- Alert 111
- Application 108
- Banners 76
- Benefits 16
- Blog 132
- Breadcrumbs 27
- Call to action 207
- Cards 43
- Careers 32
- Confirmation 6
- Contact 106
- Content 85
- Cookies 97
- Dashboards 13
- Download 5
- Dropdowns 4
- E-commerce (orders) 59
- E-commerce (products) 101
- Empty state 4
- FAQ 95
- Features 236
- Footers 150
- Forms 9
- Graphs 58
- HTTP codes 107
- Hero section 169
- How it works 129
- Instagram photos 5
- Integrations 5
- Logo clouds 179
- Modals 35
- Navbar 212
- Navigation (horizontal) 227
- Navigation (vertical) 12
- Newsletter 129
- Notifications 11
- Paginations 16
- Portfolio 93
- Pricing 128
- Product info 5
- Projects 6
- Reviews 36
- Rich text 3
- Sign in / Sign up 181
- Snackbars 10
- Stats 159
- Steps 7
- Steps 5
- Tables 91
- Tabs 2
- Team 117
- Testimonials 144
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Steps Components by Shuffle
Choose from 5 variations of Tailwind application components. Presented here are variants available in various UI libraries.
Get access to all Tailwind application components, code and our visual editor. Try the demo for free!
