May 15, 2025

Floating Toolbar Using Tailwind

Here's a small tip. If you find yourself needing to implement a floating toolbar, try the following set of Taiwind classes:

<div class="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 transform">
  <your-content></your-content>
</div>

This will fix the div in the bottom center of the screen. This is also responsive and will maintain it's relative position when the user is resizing.