Incredibly simple Talk Bubbles with Tailwind

Tailwind is a utility-first css framework that gives us the opportunity to develop the style of our projects quickly and, at the same time, compared to other frameworks, it saves precious bytes because it removes unused CSS during the production build.

I'm going to show you how easy it is to create a talk bubble using a couple of cool tricks.

For the first step we will create a flex container that hold and position contained items.

<!-- Left aligned bubble -->
<div class="flex items-center justify-start">
</div>
<!-- Right aligned bubble -->
<div class="flex items-center justify-end">
</div>

Next we need to create the arrow, using transform-origin and rotate utilities we will change the set the direction.

<div class="w-3 overflow-hidden">
  <!-- Left aligned bubble -->
  <div 
  class="h-4 bg-green-400 transform rotate-45 origin-bottom-right rounded-sm">
  </div>
  <!-- Right aligned bubble -->
  <div 
  class="h-4 bg-green-400 transform rotate-45 origin-top-left rounded-sm">
  </div>
</div>

Note, giving fixed width to container and fixed height to arrow item is needed if we want to reproduce the effect of the talking bubble.

Final Result

If you're seeking inspiration, I recommend visiting the showcase section of the official Tailwind website. You can find it at https://tailwindcss.com/showcase. This section displays numerous remarkable projects that have been created using the exceptionally user-friendly Tailwind framework.