Tailwind CSS

Center Aligned

Navbar

Base Header

Left Aligned

Header with Tabs

Center Logo Header

Floating Header

A navbar (navigation bar) is a horizontal bar typically positioned at the top of a webpage. It contains links to the main sections of the website, providing easy navigation for users. Navbars often include a logo, menu items, and other elements such as search bars or login buttons.

A hero section is a large, prominent area at the top of a webpage, often featuring a compelling image or video, a headline, and a call-to-action button. 

Hero

The features section highlights the key features or benefits of a product or service. It often includes icons, images, and brief descriptions to illustrate the unique selling points and advantages.

Features

The pricing section provides detailed information about the cost of products or services, including different pricing tiers, features included at each level, and any special offers or discounts.

Pricing

The FAQ (Frequently Asked Questions) section addresses common questions and concerns that users might have. It provides concise and helpful answers to improve user understanding and reduce support inquiries.

The blog section is the part of the webpage where blog posts are displayed. It typically includes a list of recent posts, categories, and search functionality to help users find relevant content.

Blog

The article section is the part of the webpage where individual articles are displayed. It often includes the article's title, author, publication date, and the main content.

Article

The team section showcases the people behind a company or project. It typically includes photos, names, roles, and brief bios of team members, helping to build trust and personal connection with users.

Team

The testimonials section features quotes and reviews from satisfied customers or clients. It serves to build credibility and trust by showcasing positive experiences and endorsements.

Testimonials

The clients section lists the companies or individuals who use a product or service. It often includes logos or names of prominent clients to build credibility and demonstrate the user base.

Clients

The galleries section is the part of the webpage where image or media collections are presented. It is used to showcase visual content in a structured and appealing way.

Galleries

The contact section provides users with ways to get in touch with the company or organization. It typically includes a contact form, phone number, email address, and physical address.

Contact

The login section allows users to enter their credentials to access a restricted area of the website. It typically includes fields for a username and password and may offer options for password recovery or account creation.

Login

A footer is a section at the bottom of a webpage, containing supplementary information such as copyright notices, links to privacy policies, contact information, and additional navigation links.

Footer

The call to action section is the part of the webpage dedicated to presenting one or more CTAs. It is strategically placed to motivate users to engage with the website's offerings.

Call to Action

A product card component is a versatile UI element used to display essential information about a product in a compact and visually appealing format. It is designed to provide users with a quick overview of the product, including images, titles, descriptions, prices, and call-to-action buttons.

Product Card

An error section displays messages when something goes wrong on a webpage, such as a broken link or a failed form submission. It provides users with information about the error and guidance on how to proceed.