In this article, I will show you the easy way to create a chat layout with Tailwind CSS and Grid.
Setting up libraries
Import Tailwind CSS to your HTML file, by adding the following code to the
1. Creating message box
<div class="mx-auto grid max-w-screen-md grid-cols-1 space-y-10"> <div class="place-self-start"> <div class="rounded-2xl rounded-tl-none bg-green-50 p-5">Hey there, how are you?</div> </div>
There will be two kinds of messages:
- Sent by the user:
<div class="place-self-end"> <div class="rounded-2xl rounded-tl-none bg-green-50 p-5">Okay! See you then.</div> </div>
- Incoming message:
<div class="place-self-start"> <div class="rounded-2xl rounded-tl-none bg-white p-5">Hey there, how are you?</div> </div>
2. Code Explanation
Incoming message has given the class
place-self-start which places the message box to the left end. And, the User sent message has given the class
place-self-end which places the message box to the right end.
We have made a chat layout with comparatively low efforts, all thanks to Tailwind CSS.
If you’re interested in the live version of it, please do check the attached Codepen:
See the Pen by Dhairya Shah (@dhairyathedev) on CodePen.
Thanks for reading
Follow me on Twitter
Thanks for reading!