Tailwind CSS E-commerce Blocks

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.

Order tracking with CTA

This example shows order tracking process with CTA buttons, where you can download invoice of orders. It also shows order details with images of purchased items.

Order tracking with horizontal steps

This Tailwind Order tracking example shows order tracking with horizontal steps, where you can track your order status with detailed steps like order confirmed, shipping and delivery estimates.

Default order tracking

Following this example to show a timeline of the status of a product ordered from an e-commerce website after the purchase has been completed by the customer.

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.

Default refund status section

Use this example to show a timeline of the requested refund process with all product details and essential CTA buttons.

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.

Default refund overview list

This is the default refunds overview list where you can see list of all the products that is refunded with their product details, dates of refund, resons and status.

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.

Basic refund application form

This example shows all the neccesory information to return your products amd refund back such as select return items, select reason for return, select method of delivery and select refund options.