Storefront hero sections for e-commerce built with Tailwind CSS and Flowbite

Hey devs 👋

Today I would like to show you a couple of new components that we have built using Tailwind CSS and the Flowbite Library for e-commerce websites and these are the hero sections (aka. storefront) as the first and primary parts of the website.

You can use these to show promotions, search inputs, CTA buttons, campaigns, the primary categories of your store and a whole lot more.

All of the components are built with Tailwind CSS, support dark mode, have RTL direction enabled and the first example is also open-source under the MIT license.

Let's check them out!

Default storefront section

Use this section to show a hero section as the storefront page of your e-commerce website featuring a heading, description, CTA button, an illustration and a list of logos of the products that your store is selling.

• Get the source code and example

Storefront hero section with categories

This section can be used as the first section of your e-commerce websites by showing the most popular product categories using cards alongside a heading with two CTA buttons and brand logos below.

• Get the source code and example

Storefront categories grid view

Use this example to show a complex grid view of the primary and secondary highlighted categories from your e-commerce website.

• Get the source code and example

Storefront hero with background image

This section can be used as the hero section of an e-commerce website with a full background image where you show a heading, paragraph, CTA button and a list of the primary categories.

• Get the source code and example

Storefront with CTA and categories list

Use this section to show a list of categories in a sidebar and a hero section with a heading, description and CTA button to increase sales and conversion rates.

• Get the source code and example

Storefront hero with carousel and search

Use this example to show an advanced storefront hero section with a carousel component featuring limited deals and a search bar for your e-commerce website.

• Get the source code and example

Credits

These components could not have been built without the usage of the following awesome open-source resources:

• Tailwind CSS

• Flowbite

• Flowbite Icons