Customer service pages for e-commerce built with Tailwind CSS
Tags: tailwindcss, flowbite, webdev, javascript
Published: 2024-04-24 11:12:26

E-commerce is a huge part of today's internet and Tailwind CSS has been a growing CSS framework that more and more developers are adopting. I'd like to share with you a couple of [customer service pages](https://flowbite.com/blocks/e-commerce/customer-service/) that we've coded over at Flowbite.

Get started with a collection of components and pages to show questions and answers to your E-commerce customers with FAQ and community forums.

## Default customer service page

Use this component to show a list of question and a form where you can submit a question within a modal to provide support to customers.

[![Tailwind CSS customer service](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/um6imv30b69kb8enx1v6.png)](https://flowbite.com/blocks/e-commerce/customer-service/#default-customer-service)

- [Source code and example](https://flowbite.com/blocks/e-commerce/customer-service/#default-customer-service)

## Customer service with drawer

This example can be used to show both questions and answers and use a drawer with a form element that allows you to add a question.

[![Tailwind CSS Customer Service with drawer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owo7smmmug1qwf7ardkg.png)](https://flowbite.com/blocks/e-commerce/customer-service/#customer-service-with-drawer)

- [Source code and example](https://flowbite.com/blocks/e-commerce/customer-service/#customer-service-with-drawer)

## Customer service accordion with FAQ

Use this example to show a list of frequently asked questions and answers inside an accordion component for your e-commerce customers.

[![Tailwind CSS Customer service accordion with FAQ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cclps46xodkzidq9gan.png)](https://flowbite.com/blocks/e-commerce/customer-service/#customer-service-accordion-with-faq)

- [Source code and example](https://flowbite.com/blocks/e-commerce/customer-service/#customer-service-accordion-with-faq)

## Customer service with wysiwyg

Use this example to show a list of questions and answers with upvotes and a wysiwyg form to submit an answer as a product customer.

[![Customer service with wysiwyg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ms3bd4e6i59ph417454m.png)](https://flowbite.com/blocks/e-commerce/customer-service/#customer-service-with-wysiwyg)

- [Tailwind CSS Source code and example](https://flowbite.com/blocks/e-commerce/customer-service/#customer-service-with-wysiwyg)

## Customer service page

Use this example to show a full page of customer service data using FAQ sections and a modal to submit a question.

[![Tailwind CSS Customer service page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfchunewpkpc6o3p8stu.png)](https://flowbite.com/blocks/e-commerce/customer-service/#customer-service-page)

- [Source code and example](https://flowbite.com/blocks/e-commerce/customer-service/#customer-service-page)

## Credits

These components could not have been built without the usage of the following open-source libraries and frameworks:

- [Tailwind CSS](https://tailwindcss.com/)
- [Flowbite Icons](https://flowbite.com/icons/)
- [Flowbite Library](https://flowbite.com/docs/getting-started/introduction/)