Tailwind CSS E-commerce Blocks
Tailwind CSS E-commerce Blocks offer flexible UI components designed for product listings, featured deals, and seamless shopping experiences.
Basic filter with search and CTA button
Use following exmaple to show basic filter options with search and CTA buttons.
Order tracking with cards
This component can be used to show a tracking events and a set of cards where you can show the order information.
Vertical order tracking timeline
Following example shows list of purchased items alongside progess step of order status and google map indication.
Order tracking with location indication
This example shows order tracking with location indication using google map, where you can monitor the progess and location of purchased items.
Order tracking with progress indication
Use below example tailwind css order tracking example to show all purchased items list with there details and order tracking progress steps with different indications which indicates shipping order status.
Order tracking with vertical timeline
Use this tailwind order tracking component to show a vertical timeline of the shipping order status and an overview of the purchased items along with list of orders and order summary.
Order tracking with map indication
Use below example to show a list of tracking events along with purchased items list in a tabular format with map indication for precise order tracking
Side by side order tracking
Following example shows order details next to order tracking steps where it shows order received, order pickup, estimate delivery time etc.
Refund track with detailed steps
This example shows refund status with detailed steps of the refund process, such as refund request, product pickup, product verification, and refund amount.
Refund status with progress steps
The following tailwind refund status example shows all progress steps of the refund process, such as sending the refund request, request acceptance, pickup details, product verification, and refund amount.
Refund status with order summary
This example shows refund status with an order summary, product details, reason for return, and CTA buttons. It shows the whole order refund process, where you can track your refund request.
side-by-side refund status with timeline
The below example of Tailwind CSS refund status shows a split layout of the refund process to track by showing refund details, personal details, and product details on the left side and the whole timeline of the refund process on the right side.
Refund list with personal details
This example shows a list of refunded items with customer personal details, order details, reason for return and CTA buttons of cancel order, view details and add refund request.
Refund with CTA
Following tailwind refund overview shows a list of refunded items with pickup details, reason for return, CTA buttons for re-order, view details and download report.
Refund list with filter
This examples shows list of products with product details, filter options, search input, CTA buttons. You can also download report of your refunds.
Refund with Table
Following refunds overview list with table where you can see list of all the products which is refunded with there product id, dates, reasons, status and many more details.
Product reason selection form
This example of Tailwind CSS Refund Form exmaple can be used to built refund forms to know reason behind a refund request.
Refund request process
Following example of tailwind refund form shows all your purchased items from which you can select perticular item for refund and to show refund options.
