Collection of free Tailwind CSS chat components from Codepen and other resources.

Related Articles

  1. CSS Chats
  2. Bootstrap Chats
  3. jQuery Chats
Chat Messages with contact list and search bar.

Author

  • rahulsya

Made with

  • HTML / CSS

About a code

Chat Messages

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.2

Demo image: Chat Card - Tailwind CSS

Author

  • Cruip

Made with

  • HTML / CSS / JS

About a code

Chat Card - Tailwind CSS

A profile/chat card made with Tailwind CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 2.0.0+

Chat layout with sidebar menu.

Author

  • iaminos

Made with

  • HTML / CSS

About a code

QuickChat - Chat Layout

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.9.6

Demo image: Lo-fi Chat - with Tailwind CSS

Author

  • Rob Stinson

Made with

  • HTML / CSS

About a code

Lo-fi Chat - with Tailwind CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

WhatsApp web clone.

Author

  • asantibanez

Made with

  • HTML / CSS

About a code

WhatsApp Web Clone

WhatsApp web clone using only Tailwind CSS utilities and inline styles for specific brand colors.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 0.3.0