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

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