Kickstart almost any project with essential Tailwind CSS UI elements through our Core Components collection. This category includes versatile button styles, checkbox variations, tab styles, accordions, alerts, forms, list styles, toggle buttons, badges, breadcrumbs, dropdowns, tooltips, progress bars, and more – Almost all core components are free for commercial use.

Kickstart almost any project with essential Tailwind React Components through our collection of Free React Core Components. This category includes versatile button styles, checkbox variations, tabs, accordions, alerts, forms, lists, toggle buttons, badges, breadcrumbs, dropdowns, tooltips, progress bars, and more. These React Components are designed to integrate seamlessly with React applications, offering pre-built functionality and customizable styles. Almost all core components are free for commercial use.

Core Components

Build complete web applications with our collection of stunning Tailwind UI components designed specifically for web apps. Tailgrids Application UI consists of - blogs, cards, contact sections, special pages, footer sections, modals, navbar & menus, paginations, auth pages, data tables, and more.

Application UI

Transform visitors into customers with our Tailwind Marketing UI Components!. Empower your website with Tailwind Marketing UI Components crafted for product, offer, or app promotion; this category includes features, headers, hero areas, pricing tables, portfolios, team sections, testimonials, videos, CTAs, about sections, brand scrollers, and more.

Marketing UI

Build e-commerce website UI and site by simply copy-pasting the components and blocks with 100+ Tailwind CSS E-Commerce UI Kit Components, Elements, and Pages. Unlock 3 bonus ready-to-use E-Commerce templates built with TailGrids E-Commerce UI components with an All-Access plan Now.

E-Commerce

Build robust and data-rich backend solutions for your web application using Tailwind CSS Dashboard UI Components. This collection includes graphs, charts, stats, maps, drawers, admin menus, and 4 ready-to-use admin/dashboard templates, providing everything you need for a powerful backend solution. Access the entire collection with our All-Access Plan Now!

Dashboard

Elevate your website's appeal and drive conversions with Tailwindcss AI Components! Designed to captivate visitors and convert them into loyal customers, our comprehensive suite of UI components is meticulously crafted for seamless integration into your product, offer, or app promotion strategies.

AI Components

<p>Chat Lists offer important information about the people who are available for a chat. It can also give other information such as who is online at any given time, the last seen of a person etc. You can also choose a design that highlights the name when there is a new chat or adds a number next to the name, depending on the number of messages sent by the person. Tailwind CSS lets you design these chat lists the way you want. With these three TailGrids - Tailwind Dashboard UI Components, you will definitely be able to get a practical one for your Dashboard.</p>

Chat lists are essential for displaying available contacts and their status, such as online presence and last seen. TailGrids offers Tailwind CSS chat list UI, designed for seamless integration with React, including React Router and Hooks. With three distinct designs, you can highlight new messages or display message counts next to each contact's name, tailored to fit your dashboard’s needs. These components are easily customizable with Tailwind CSS, allowing you to adjust the design according to your preferences. Tested for compatibility across all browsers, TailGrids ensures your chat lists function smoothly and look great.


Chat List

A chat list component designed to display a list of active conversations. This style includes a header with an action dropdown menu, a search bar, and each chat item displays the user's profile picture, name, active status, a preview of the last message, and a timestamp.

Make your React application engaging with this chat list component. It displays a list of active conversations. This style features a header with an action dropdown menu, a search bar, each chat item shows user’s profile picture, name, active status a preview of the last message and a timestamp. 

Chat List with Search Bar and Actions Dropdown

A vertical list component designed to display active conversations in a chat. This style features individual chat items with user avatars, names, previews of the last message, and indicators of active or inactive status. It also includes a search bar at the top to easily find specific conversations.

A vertical list React UI component to showcase active conversation in a chat. This style includes individual chat items with user avatars, names, previews of the last message and indicators of active or inactive status.

Chat List with Search Bar and Count

A chat list component designed to display recent conversations, allowing users to sort by latest or oldest. Each conversation is displayed with the contact's avatar, name, last message, and timestamp.  Active/inactive status indicators and unread message counts for each chat.

A chat list UI in React designed to display recent conversations that allow users to sort by latest or oldest. Each conversation is displayed with the contact’s avatar, name, last message, and timestamp.

Chat List

Chat List with Search Bar and Count

Chat List with Sorting Option

Variations