Dhairya Shah
Dhairya Shah's Blog

Follow

Dhairya Shah's Blog

Follow
Chat Layout with Tailwind CSS and Grid

Chat Layout with Tailwind CSS and Grid

Dhairya Shah's photo
Dhairya Shah
ยทSep 3, 2022ยท

1 min read

Play this article

In this article, I will show you the easy way to create a chat layout with Tailwind CSS and Grid.

Let's go!

Setting up libraries

Import Tailwind CSS to your HTML file, by adding the following code to the HEAD tag:

  <script src="https://cdn.tailwindcss.com"></script>

Structure

Frame

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>
    

    user sent image

  • 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>
    

    incoming message

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.

Conclusion

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:

Thanks for reading

Follow me on Twitter

Thanks for reading!

ย 
Share this