Category

Sort by:

Tailwind CSS E-commerce Blocks

Tailwind CSS E-commerce Blocks offer flexible UI components designed for product listings, featured deals, and seamless shopping experiences.

image

Basic filter with search and CTA button

Use following exmaple to show basic filter options with search and CTA buttons.

image

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.

image

Vertical order tracking timeline

Following example shows list of purchased items alongside progess step of order status and google map indication.

image

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.

image

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.

image

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.

image

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

image

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.

image

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.

image

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.

image

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.

image

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.

image

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.

image

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.

image

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.

image

Default refund status section

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

image

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.

image

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.

image

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.

image

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.

image

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.

image

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.

image

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.

image

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.

Tailwind Code Copied to Clipboard!

Tailwind Code is ready to be pasted (Ctrl+V) into your project.

Uh-oh, Something’s gone wrong!

Don’t let this bug you Contact Us and we’ll squash it together!