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.
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.
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.
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.
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.
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.
Credits
These components could not have been built without the usage of the following awesome open-source resources: