<p>Remember the chat bubble we did with Tailwind CSS and Alpine JS? Well today we'll be doing the same thing but using vanilla JavaScript instead!</p>
<p>Read the article <a target="_blank" href="https://lexingtonthemes.com/tutorials/how-to-create-a-chat-bubble-with-tailwind-css-and-javascript/">See it live and get the code</a></p>


Remember the chat bubble we did with Tailwind CSS and Alpine JS? Well today we'll be doing the same thing but using vanilla JavaScript instead!

Read the article [See it live and get the code](https://lexingtonthemes.com/tutorials/how-to-create-a-chat-bubble-with-tailwind-css-and-javascript/)

How to create a chat bubble with Tailwind CSS and JavaScript

A quick refresh of what is a chat or contact bubble is...

The wrapper element

The modal classe for positioning the chat bubble

The buttons to open and close the chat bubble

The JavaScript

The event listener

The toggle button

Conclusion

✺ UI Designer & Front end dev working on lexingtonthemes.com


A bi-weekly newsletter for web developers and UI/UX designers discovering new resources and articles about the latest and relevant trends.

How to create a chat bubble with Tailwind CSS and JavaScript

Table of contents