my avatar Bahaa Zidan

Floating Toolbar Using Tailwind

Floating Toolbar Using Tailwind hero image

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.