Component

Tailwind CSS Speed Dial

Speed dial in tailwind css is the quickest way to show the list of action buttons whenever the user hovers or clicks on it. It can also be called a shortcut.

Requires Pagedone JS

This component requires the use of our Pagedone UI as a package, else you can skip this message if you are already using Pagedone UI as a package.

By using various utility classes of tailwind css, speed dial can easily be customized by changing colors, position, style, size, text and icon.

Default speed dial

To creat tailwind speed dial, add speeddial-button class to an element that contains both the trigger element and the list of items in order to initialize a speed dial component.

Additionally, add speed-dial-menu class to the list of items in order to initialize a speed dial tailwind component.

 <div class="w-full relative min-h-[380px]">
 <div class="absolute right-6 bottom-6 group z-50 speeddial-button">
     <div id="speed-dial-menu-default" class="speed-dial-menu flex flex-col items-center hidden mb-4 space-y-2">
         <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
             <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M6.5 14.0832H15.1667M6.5 17.3332H10.8333M14.8049 2.52753V7.22197C14.8049 8.41859 15.7749 9.38864 16.9715 9.38864H21.666M13.9081 2.1665H9.25C6.42157 2.1665 5.00736 2.1665 4.12868 3.04518C3.25 3.92386 3.25 5.33808 3.25 8.1665V17.8332C3.25 20.6616 3.25 22.0758 4.12868 22.9545C5.00736 23.8332 6.42079 23.8332 9.24766 23.8332C11.4087 23.8332 13.8504 23.8332 16.0282 23.8332C18.8563 23.8332 20.2704 23.8332 21.1491 22.9545C22.0278 22.0758 22.0278 20.6616 22.0278 17.8332V10.2862C22.0278 9.71155 21.7995 9.16045 21.3932 8.75412L15.4402 2.80111C15.0338 2.39478 14.4827 2.1665 13.9081 2.1665Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" />
             </svg>
         </button>
         <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
             <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M10.2917 11.917L11.9167 13.542L16.25 9.20866M15.0143 20.8557L16.4024 21.5845C19.2396 23.074 20.6582 23.8188 21.7041 23.1866C22.75 22.5545 22.75 20.9522 22.75 17.7478V10.8337C22.75 6.74815 22.75 4.7054 21.4808 3.4362C20.2116 2.16699 18.1688 2.16699 14.0833 2.16699H11.9167C7.83116 2.16699 5.78841 2.16699 4.5192 3.4362C3.25 4.7054 3.25 6.74815 3.25 10.8337V17.7478C3.25 20.9522 3.25 22.5545 4.29588 23.1866C5.34177 23.8188 6.76038 23.074 9.59762 21.5845L10.9857 20.8557C11.9725 20.3377 12.4658 20.0787 13 20.0787C13.5342 20.0787 14.0275 20.3377 15.0143 20.8557Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
         </button>
         <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
             <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M9.75033 9.69045C9.75033 5.43695 16.2503 5.43695 16.2503 9.69045C16.2503 12.729 13.2968 12.1226 13.2968 15.7675M13.2957 19.5003L13.3068 19.4866M13.0003 23.8337C7.01724 23.8337 2.16699 18.9834 2.16699 13.0003C2.16699 7.01724 7.01724 2.16699 13.0003 2.16699C18.9834 2.16699 23.8337 7.01724 23.8337 13.0003C23.8337 18.9834 18.9834 23.8337 13.0003 23.8337Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
         </button>
         <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
             <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M2.16699 9.74967H23.8337M17.2199 15.708H17.2297M17.2198 18.958H17.2295M13.2123 15.708H13.222M13.2123 18.958H13.222M9.20271 15.708H9.21244M9.20271 18.958H9.21244M7.58366 5.41634V1.08301M18.417 5.41634V1.08301M10.8337 24.9163H15.167C19.2525 24.9163 21.2953 24.9163 22.5645 23.6471C23.8337 22.3779 23.8337 20.3352 23.8337 16.2497V11.9163C23.8337 7.83083 23.8337 5.78808 22.5645 4.51888C21.2953 3.24967 19.2525 3.24967 15.167 3.24967H10.8337C6.74815 3.24967 4.7054 3.24967 3.4362 4.51888C2.16699 5.78808 2.16699 7.83084 2.16699 11.9163V16.2497C2.16699 20.3352 2.16699 22.3779 3.4362 23.6471C4.7054 24.9163 6.74815 24.9163 10.8337 24.9163Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
         </button>
     </div>
     <button type="button" aria-expanded="false" class="flex items-center justify-center text-white bg-indigo-600 rounded-full w-16 h-16 hover:bg-indigo-700 focus:ring-4 focus:outline-none ">
         <svg class="w-5 h-5 transition-transform group-hover:rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
         </svg>
         <span class="sr-only">Open actions menu</span>
     </button>
 </div>
</div>

Text with button

This tailwind css speed dial can be used as an alternative style where text is shown beside the button available in the speed dial.

<div class="w-full relative min-h-[380px]">
<div class="absolute right-6 bottom-6 group z-50 speeddial-button">
   <div id="speed-dial-menu-with-text" class="speed-dial-menu flex flex-col items-center hidden mb-4 space-y-2">
       <div class="flex items-center gap-5 relative">
           <span class="text-sm text-gray-600 absolute -left-1 -translate-x-16">Articles</span>
           <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
               <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M6.5 14.0832H15.1667M6.5 17.3332H10.8333M14.8049 2.52753V7.22197C14.8049 8.41859 15.7749 9.38864 16.9715 9.38864H21.666M13.9081 2.1665H9.25C6.42157 2.1665 5.00736 2.1665 4.12868 3.04518C3.25 3.92386 3.25 5.33808 3.25 8.1665V17.8332C3.25 20.6616 3.25 22.0758 4.12868 22.9545C5.00736 23.8332 6.42079 23.8332 9.24766 23.8332C11.4087 23.8332 13.8504 23.8332 16.0282 23.8332C18.8563 23.8332 20.2704 23.8332 21.1491 22.9545C22.0278 22.0758 22.0278 20.6616 22.0278 17.8332V10.2862C22.0278 9.71155 21.7995 9.16045 21.3932 8.75412L15.4402 2.80111C15.0338 2.39478 14.4827 2.1665 13.9081 2.1665Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" />
               </svg>
           </button>
       </div>
       <div class="flex items-center gap-5 relative">
           <span class="text-sm text-gray-600 absolute -left-1 -translate-x-16">Favorite</span>
           <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
               <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M10.2917 11.917L11.9167 13.542L16.25 9.20866M15.0143 20.8557L16.4024 21.5845C19.2396 23.074 20.6582 23.8188 21.7041 23.1866C22.75 22.5545 22.75 20.9522 22.75 17.7478V10.8337C22.75 6.74815 22.75 4.7054 21.4808 3.4362C20.2116 2.16699 18.1688 2.16699 14.0833 2.16699H11.9167C7.83116 2.16699 5.78841 2.16699 4.5192 3.4362C3.25 4.7054 3.25 6.74815 3.25 10.8337V17.7478C3.25 20.9522 3.25 22.5545 4.29588 23.1866C5.34177 23.8188 6.76038 23.074 9.59762 21.5845L10.9857 20.8557C11.9725 20.3377 12.4658 20.0787 13 20.0787C13.5342 20.0787 14.0275 20.3377 15.0143 20.8557Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
           </button>
       </div>
       <div class="flex items-center gap-5 relative">
           <span class="text-sm text-gray-600 absolute -left-1 -translate-x-16">Support</span>
           <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
               <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M9.75033 9.69045C9.75033 5.43695 16.2503 5.43695 16.2503 9.69045C16.2503 12.729 13.2968 12.1226 13.2968 15.7675M13.2957 19.5003L13.3068 19.4866M13.0003 23.8337C7.01724 23.8337 2.16699 18.9834 2.16699 13.0003C2.16699 7.01724 7.01724 2.16699 13.0003 2.16699C18.9834 2.16699 23.8337 7.01724 23.8337 13.0003C23.8337 18.9834 18.9834 23.8337 13.0003 23.8337Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
           </button>
       </div>
       <div class="flex items-center gap-5 relative">
           <span class="text-sm text-gray-600 absolute -left-1 -translate-x-16">Support</span>
           <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
               <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M2.16699 9.74967H23.8337M17.2199 15.708H17.2297M17.2198 18.958H17.2295M13.2123 15.708H13.222M13.2123 18.958H13.222M9.20271 15.708H9.21244M9.20271 18.958H9.21244M7.58366 5.41634V1.08301M18.417 5.41634V1.08301M10.8337 24.9163H15.167C19.2525 24.9163 21.2953 24.9163 22.5645 23.6471C23.8337 22.3779 23.8337 20.3352 23.8337 16.2497V11.9163C23.8337 7.83083 23.8337 5.78808 22.5645 4.51888C21.2953 3.24967 19.2525 3.24967 15.167 3.24967H10.8337C6.74815 3.24967 4.7054 3.24967 3.4362 4.51888C2.16699 5.78808 2.16699 7.83084 2.16699 11.9163V16.2497C2.16699 20.3352 2.16699 22.3779 3.4362 23.6471C4.7054 24.9163 6.74815 24.9163 10.8337 24.9163Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
           </button>
       </div>
   </div>
   <button type="button" aria-expanded="false" class="flex items-center justify-center text-white bg-indigo-600 rounded-full w-16 h-16 hover:bg-indigo-700 focus:ring-4 focus:outline-none ">
       <svg class="w-5 h-5 transition-transform group-hover:rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
       </svg>
       <span class="sr-only">Open actions menu</span>
   </button>
</div>
</div>

Dropdown menu

You can also display a list of menu items instead of showing buttons inside the speed dial tailwind css.

<div class="w-full relative min-h-[380px]">
<div class="absolute right-6 bottom-6 group z-50 speeddial-button">
   <div id="speed-dial-menu-dropdown" class="speed-dial-menu flex flex-col hidden items-center mb-4 space-y-2 bg-white shadow-[0px_15px_60px_-4px_rgba(16,24,40,0.10)] rounded-xl border border-gray-200">
       <ul class="text-sm text-gray-600 p-5">
           <li>
               <a href="javascript:;" class="flex items-center mb-5 hover:text-gray-900">
                   <svg class="w-6 h-6 mr-2 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path d="M6 13H14M6 16H10M13.666 2.33325V6.66658C13.666 7.77115 14.5614 8.66659 15.666 8.66659H19.9993M12.8382 2H9C6.17157 2 4.75736 2 3.87868 2.87868C3 3.75736 3 5.17157 3 8V16C3 18.8284 3 20.2426 3.87868 21.1213C4.75736 22 6.17082 22 8.99774 22C10.7205 22 12.602 22 14.3355 22C17.1625 22 18.576 22 19.4547 21.1213C20.3333 20.2426 20.3333 18.8284 20.3333 16V9.49509C20.3333 8.96466 20.1226 8.45595 19.7475 8.08088L14.2525 2.58579C13.8774 2.21071 13.3687 2 12.8382 2Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
                   </svg>
                   <span class="text-sm font-medium">News</span>
               </a>
           </li>
           <li>
               <a href="javascript:;" class="flex items-center mb-5  hover:text-gray-900 dark:hover:text-white">
                   <svg class="w-6 h-6 mr-2 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path d="M9.5 11L11 12.5L15 8.5M13.8593 19.2512L15.1407 19.9238C17.7596 21.2988 19.0691 21.9863 20.0346 21.4028C21 20.8192 21 19.3402 21 16.3823V10C21 6.22876 21 4.34315 19.8284 3.17157C18.6569 2 16.7712 2 13 2H11C7.22876 2 5.34315 2 4.17157 3.17157C3 4.34315 3 6.22876 3 10V16.3823C3 19.3402 3 20.8192 3.96543 21.4028C4.93086 21.9863 6.24035 21.2988 8.85934 19.9238L10.1407 19.2512C11.0515 18.773 11.5069 18.5339 12 18.5339C12.4931 18.5339 12.9485 18.773 13.8593 19.2512Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                   </svg>
                   <span class="text-sm font-medium">Favorite</span>
               </a>
           </li>
           <li>
               <a href="javascript:;" class="flex items-center mb-5 hover:text-gray-900 dark:hover:text-white">
                   <svg class="w-6 h-6 mr-2 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path d="M9 8.94473C9 5.01842 15 5.01842 15 8.94473C15 11.7495 12.2737 11.1898 12.2737 14.5543M12.2726 18L12.2829 17.9873M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                   </svg>
                   <span class="text-sm font-medium">Support</span>
               </a>
           </li>
           <li>
               <a href="javascript:;" class="flex items-center  hover:text-gray-900 dark:hover:text-white">
                   <svg class="w-6 h-6 mr-2 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path d="M2 9H22M15.895 14.5H15.904M15.8949 17.5H15.9039M12.1957 14.5H12.2047M12.1957 17.5H12.2047M8.49451 14.5H8.50349M8.49451 17.5H8.50349M7 5V1M17 5V1M10 23H14C17.7712 23 19.6569 23 20.8284 21.8284C22 20.6569 22 18.7712 22 15V11C22 7.22876 22 5.34315 20.8284 4.17157C19.6569 3 17.7712 3 14 3H10C6.22876 3 4.34315 3 3.17157 4.17157C2 5.34315 2 7.22876 2 11V15C2 18.7712 2 20.6569 3.17157 21.8284C4.34315 23 6.22876 23 10 23Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                   </svg>
                   <span class="text-sm font-medium">Calendar</span>
               </a>
           </li>
       </ul>
   </div>
   <button type="button" aria-expanded="false" class="flex items-center justify-center text-white bg-indigo-600 rounded-full w-16 h-16 hover:bg-indigo-700 focus:outline-none ml-auto">
       <svg class="w-5 h-5 transition-transform group-hover:rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
       </svg>
       <span class="sr-only">Open actions menu</span>
   </button>
</div>
</div>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Alternative style

This is an alternative style of showing a list of the menu items in the speed dial.

<div class="w-full relative min-h-[380px]">
<div class="absolute right-6 bottom-6 group z-50 speeddial-button">
   <div id="speed-dial-menu-dropdown" class="speed-dial-menu flex flex-col hidden items-center mb-4 space-y-2 bg-white shadow-[0px_15px_60px_-4px_rgba(16,24,40,0.10)] rounded-xl border border-gray-200">
       <ul class="text-sm text-gray-600 py-5">
           <li>
               <a href="javascript:;" class="flex items-center pb-4 px-7 border-b border-gray-200 hover:text-gray-900">
                   <svg class="w-6 h-6 mr-3 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path d="M6 13H14M6 16H10M13.666 2.33325V6.66658C13.666 7.77115 14.5614 8.66659 15.666 8.66659H19.9993M12.8382 2H9C6.17157 2 4.75736 2 3.87868 2.87868C3 3.75736 3 5.17157 3 8V16C3 18.8284 3 20.2426 3.87868 21.1213C4.75736 22 6.17082 22 8.99774 22C10.7205 22 12.602 22 14.3355 22C17.1625 22 18.576 22 19.4547 21.1213C20.3333 20.2426 20.3333 18.8284 20.3333 16V9.49509C20.3333 8.96466 20.1226 8.45595 19.7475 8.08088L14.2525 2.58579C13.8774 2.21071 13.3687 2 12.8382 2Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
                   </svg>
                   <span class="text-sm font-medium">News</span>
               </a>
           </li>
           <li>
               <a href="javascript:;" class="flex items-center py-4 px-7 border-b border-gray-200 hover:text-gray-900 ">
                   <svg class="w-6 h-6 mr-3 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path d="M9.5 11L11 12.5L15 8.5M13.8593 19.2512L15.1407 19.9238C17.7596 21.2988 19.0691 21.9863 20.0346 21.4028C21 20.8192 21 19.3402 21 16.3823V10C21 6.22876 21 4.34315 19.8284 3.17157C18.6569 2 16.7712 2 13 2H11C7.22876 2 5.34315 2 4.17157 3.17157C3 4.34315 3 6.22876 3 10V16.3823C3 19.3402 3 20.8192 3.96543 21.4028C4.93086 21.9863 6.24035 21.2988 8.85934 19.9238L10.1407 19.2512C11.0515 18.773 11.5069 18.5339 12 18.5339C12.4931 18.5339 12.9485 18.773 13.8593 19.2512Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                   </svg>
                   <span class="text-sm font-medium">Favorite</span>
               </a>
           </li>
           <li>
               <a href="javascript:;" class="flex items-center mb-5 py-4 px-7 border-b border-gray-200 hover:text-gray-900 ">
                   <svg class="w-6 h-6 mr-3 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path d="M9 8.94473C9 5.01842 15 5.01842 15 8.94473C15 11.7495 12.2737 11.1898 12.2737 14.5543M12.2726 18L12.2829 17.9873M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                   </svg>
                   <span class="text-sm font-medium">Support</span>
               </a>
           </li>
           <li>
               <a href="javascript:;" class="flex items-center px-7 hover:text-gray-900 ">
                   <svg class="w-6 h-6 mr-3 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path d="M2 9H22M15.895 14.5H15.904M15.8949 17.5H15.9039M12.1957 14.5H12.2047M12.1957 17.5H12.2047M8.49451 14.5H8.50349M8.49451 17.5H8.50349M7 5V1M17 5V1M10 23H14C17.7712 23 19.6569 23 20.8284 21.8284C22 20.6569 22 18.7712 22 15V11C22 7.22876 22 5.34315 20.8284 4.17157C19.6569 3 17.7712 3 14 3H10C6.22876 3 4.34315 3 3.17157 4.17157C2 5.34315 2 7.22876 2 11V15C2 18.7712 2 20.6569 3.17157 21.8284C4.34315 23 6.22876 23 10 23Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                   </svg>
                   <span class="text-sm font-medium">Calendar</span>
               </a>
           </li>
       </ul>
   </div>
   <button type="button" aria-expanded="false" class="flex items-center justify-center text-white bg-indigo-600 rounded-full w-16 h-16 hover:bg-indigo-700 focus:outline-none ml-auto">
       <svg class="w-5 h-5 transition-transform group-hover:rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
       </svg>
       <span class="sr-only">Open actions menu</span>
   </button>
</div>
</div>

Alternative style

This is an alternative style of showing a list of the menu items in the speed dial.

<div class="w-full relative min-h-[380px]">
<div class="absolute right-6 bottom-6 group z-50 speeddial-button">
   <div id="speed-dial-menu-dropdown" class="speed-dial-menu flex flex-col hidden items-center mb-4 space-y-2 bg-white shadow-[0px_15px_60px_-4px_rgba(16,24,40,0.10)] rounded-xl border border-gray-200">
       <ul class="text-sm text-gray-600 p-5">
           <li>
               <a href="javascript:;" class="flex items-center pb-4 border-b border-gray-200 hover:text-gray-900">
                   <svg class="w-6 h-6 mr-3 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path d="M6 13H14M6 16H10M13.666 2.33325V6.66658C13.666 7.77115 14.5614 8.66659 15.666 8.66659H19.9993M12.8382 2H9C6.17157 2 4.75736 2 3.87868 2.87868C3 3.75736 3 5.17157 3 8V16C3 18.8284 3 20.2426 3.87868 21.1213C4.75736 22 6.17082 22 8.99774 22C10.7205 22 12.602 22 14.3355 22C17.1625 22 18.576 22 19.4547 21.1213C20.3333 20.2426 20.3333 18.8284 20.3333 16V9.49509C20.3333 8.96466 20.1226 8.45595 19.7475 8.08088L14.2525 2.58579C13.8774 2.21071 13.3687 2 12.8382 2Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
                   </svg>
                   <span class="text-sm font-medium">News</span>
               </a>
           </li>
           <li>
               <a href="javascript:;" class="flex items-center py-4 border-b border-gray-200 hover:text-gray-900 ">
                   <svg class="w-6 h-6 mr-3 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path d="M9.5 11L11 12.5L15 8.5M13.8593 19.2512L15.1407 19.9238C17.7596 21.2988 19.0691 21.9863 20.0346 21.4028C21 20.8192 21 19.3402 21 16.3823V10C21 6.22876 21 4.34315 19.8284 3.17157C18.6569 2 16.7712 2 13 2H11C7.22876 2 5.34315 2 4.17157 3.17157C3 4.34315 3 6.22876 3 10V16.3823C3 19.3402 3 20.8192 3.96543 21.4028C4.93086 21.9863 6.24035 21.2988 8.85934 19.9238L10.1407 19.2512C11.0515 18.773 11.5069 18.5339 12 18.5339C12.4931 18.5339 12.9485 18.773 13.8593 19.2512Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                   </svg>
                   <span class="text-sm font-medium">Favorite</span>
               </a>
           </li>
           <li>
               <a href="javascript:;" class="flex items-center py-4 border-b border-gray-200 hover:text-gray-900 ">
                   <svg class="w-6 h-6 mr-3 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path d="M9 8.94473C9 5.01842 15 5.01842 15 8.94473C15 11.7495 12.2737 11.1898 12.2737 14.5543M12.2726 18L12.2829 17.9873M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                   </svg>
                   <span class="text-sm font-medium">Support</span>
               </a>
           </li>
           <li>
               <a href="javascript:;" class="flex items-center pt-4 hover:text-gray-900 ">
                   <svg class="w-6 h-6 mr-3 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path d="M2 9H22M15.895 14.5H15.904M15.8949 17.5H15.9039M12.1957 14.5H12.2047M12.1957 17.5H12.2047M8.49451 14.5H8.50349M8.49451 17.5H8.50349M7 5V1M17 5V1M10 23H14C17.7712 23 19.6569 23 20.8284 21.8284C22 20.6569 22 18.7712 22 15V11C22 7.22876 22 5.34315 20.8284 4.17157C19.6569 3 17.7712 3 14 3H10C6.22876 3 4.34315 3 3.17157 4.17157C2 5.34315 2 7.22876 2 11V15C2 18.7712 2 20.6569 3.17157 21.8284C4.34315 23 6.22876 23 10 23Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                   </svg>
                   <span class="text-sm font-medium">Calendar</span>
               </a>
           </li>
       </ul>
   </div>
   <button type="button" aria-expanded="false" class="flex items-center justify-center text-white bg-indigo-600 rounded-full w-16 h-16 hover:bg-indigo-700 focus:outline-none ml-auto">
       <svg class="w-5 h-5 transition-transform group-hover:rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
       </svg>
       <span class="sr-only">Open actions menu</span>
   </button>
</div>
</div>

Positioning

Following positions can be kept as per the design requirements. component.

Top right

In case when we wish to keep the speed dial button on top right of the page top{*} and right{*} utility classes can be used to set the position of the speed dial component. 

 <div class="w-full relative min-h-[380px]">
<div class="absolute top-6 right-6 group z-50 speeddial-button">
    <button type="button" aria-expanded="false" class="flex items-center justify-center text-white bg-indigo-600 rounded-full w-16 h-16 hover:bg-indigo-700 focus:ring-4 focus:outline-none ">
        <svg class="w-5 h-5 transition-transform group-hover:rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
        </svg>
        <span class="sr-only">Open actions menu</span>
    </button>
    <div id="speed-dial-menu-default" class="speed-dial-menu flex flex-col items-center hidden mt-4 space-y-2">
        <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
            <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.5 14.0832H15.1667M6.5 17.3332H10.8333M14.8049 2.52753V7.22197C14.8049 8.41859 15.7749 9.38864 16.9715 9.38864H21.666M13.9081 2.1665H9.25C6.42157 2.1665 5.00736 2.1665 4.12868 3.04518C3.25 3.92386 3.25 5.33808 3.25 8.1665V17.8332C3.25 20.6616 3.25 22.0758 4.12868 22.9545C5.00736 23.8332 6.42079 23.8332 9.24766 23.8332C11.4087 23.8332 13.8504 23.8332 16.0282 23.8332C18.8563 23.8332 20.2704 23.8332 21.1491 22.9545C22.0278 22.0758 22.0278 20.6616 22.0278 17.8332V10.2862C22.0278 9.71155 21.7995 9.16045 21.3932 8.75412L15.4402 2.80111C15.0338 2.39478 14.4827 2.1665 13.9081 2.1665Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" />
            </svg>
        </button>
        <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
            <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2917 11.917L11.9167 13.542L16.25 9.20866M15.0143 20.8557L16.4024 21.5845C19.2396 23.074 20.6582 23.8188 21.7041 23.1866C22.75 22.5545 22.75 20.9522 22.75 17.7478V10.8337C22.75 6.74815 22.75 4.7054 21.4808 3.4362C20.2116 2.16699 18.1688 2.16699 14.0833 2.16699H11.9167C7.83116 2.16699 5.78841 2.16699 4.5192 3.4362C3.25 4.7054 3.25 6.74815 3.25 10.8337V17.7478C3.25 20.9522 3.25 22.5545 4.29588 23.1866C5.34177 23.8188 6.76038 23.074 9.59762 21.5845L10.9857 20.8557C11.9725 20.3377 12.4658 20.0787 13 20.0787C13.5342 20.0787 14.0275 20.3377 15.0143 20.8557Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
        <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
            <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.75033 9.69045C9.75033 5.43695 16.2503 5.43695 16.2503 9.69045C16.2503 12.729 13.2968 12.1226 13.2968 15.7675M13.2957 19.5003L13.3068 19.4866M13.0003 23.8337C7.01724 23.8337 2.16699 18.9834 2.16699 13.0003C2.16699 7.01724 7.01724 2.16699 13.0003 2.16699C18.9834 2.16699 23.8337 7.01724 23.8337 13.0003C23.8337 18.9834 18.9834 23.8337 13.0003 23.8337Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
        <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
            <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.16699 9.74967H23.8337M17.2199 15.708H17.2297M17.2198 18.958H17.2295M13.2123 15.708H13.222M13.2123 18.958H13.222M9.20271 15.708H9.21244M9.20271 18.958H9.21244M7.58366 5.41634V1.08301M18.417 5.41634V1.08301M10.8337 24.9163H15.167C19.2525 24.9163 21.2953 24.9163 22.5645 23.6471C23.8337 22.3779 23.8337 20.3352 23.8337 16.2497V11.9163C23.8337 7.83083 23.8337 5.78808 22.5645 4.51888C21.2953 3.24967 19.2525 3.24967 15.167 3.24967H10.8337C6.74815 3.24967 4.7054 3.24967 3.4362 4.51888C2.16699 5.78808 2.16699 7.83084 2.16699 11.9163V16.2497C2.16699 20.3352 2.16699 22.3779 3.4362 23.6471C4.7054 24.9163 6.74815 24.9163 10.8337 24.9163Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
    </div>
</div>
</div>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Bottom right

Use bottom{*} and right{*} utility classes to set the bottom right position of the speed dial component on the document page.

 <div class="w-full relative min-h-[380px]">
<div class="absolute right-6 bottom-6 group z-50 speeddial-button">
    <div id="speed-dial-menu-default" class="speed-dial-menu flex flex-col items-center hidden mb-4 space-y-2">
        <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
            <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.5 14.0832H15.1667M6.5 17.3332H10.8333M14.8049 2.52753V7.22197C14.8049 8.41859 15.7749 9.38864 16.9715 9.38864H21.666M13.9081 2.1665H9.25C6.42157 2.1665 5.00736 2.1665 4.12868 3.04518C3.25 3.92386 3.25 5.33808 3.25 8.1665V17.8332C3.25 20.6616 3.25 22.0758 4.12868 22.9545C5.00736 23.8332 6.42079 23.8332 9.24766 23.8332C11.4087 23.8332 13.8504 23.8332 16.0282 23.8332C18.8563 23.8332 20.2704 23.8332 21.1491 22.9545C22.0278 22.0758 22.0278 20.6616 22.0278 17.8332V10.2862C22.0278 9.71155 21.7995 9.16045 21.3932 8.75412L15.4402 2.80111C15.0338 2.39478 14.4827 2.1665 13.9081 2.1665Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" />
            </svg>
        </button>
        <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
            <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2917 11.917L11.9167 13.542L16.25 9.20866M15.0143 20.8557L16.4024 21.5845C19.2396 23.074 20.6582 23.8188 21.7041 23.1866C22.75 22.5545 22.75 20.9522 22.75 17.7478V10.8337C22.75 6.74815 22.75 4.7054 21.4808 3.4362C20.2116 2.16699 18.1688 2.16699 14.0833 2.16699H11.9167C7.83116 2.16699 5.78841 2.16699 4.5192 3.4362C3.25 4.7054 3.25 6.74815 3.25 10.8337V17.7478C3.25 20.9522 3.25 22.5545 4.29588 23.1866C5.34177 23.8188 6.76038 23.074 9.59762 21.5845L10.9857 20.8557C11.9725 20.3377 12.4658 20.0787 13 20.0787C13.5342 20.0787 14.0275 20.3377 15.0143 20.8557Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
        <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
            <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.75033 9.69045C9.75033 5.43695 16.2503 5.43695 16.2503 9.69045C16.2503 12.729 13.2968 12.1226 13.2968 15.7675M13.2957 19.5003L13.3068 19.4866M13.0003 23.8337C7.01724 23.8337 2.16699 18.9834 2.16699 13.0003C2.16699 7.01724 7.01724 2.16699 13.0003 2.16699C18.9834 2.16699 23.8337 7.01724 23.8337 13.0003C23.8337 18.9834 18.9834 23.8337 13.0003 23.8337Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
        <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
            <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.16699 9.74967H23.8337M17.2199 15.708H17.2297M17.2198 18.958H17.2295M13.2123 15.708H13.222M13.2123 18.958H13.222M9.20271 15.708H9.21244M9.20271 18.958H9.21244M7.58366 5.41634V1.08301M18.417 5.41634V1.08301M10.8337 24.9163H15.167C19.2525 24.9163 21.2953 24.9163 22.5645 23.6471C23.8337 22.3779 23.8337 20.3352 23.8337 16.2497V11.9163C23.8337 7.83083 23.8337 5.78808 22.5645 4.51888C21.2953 3.24967 19.2525 3.24967 15.167 3.24967H10.8337C6.74815 3.24967 4.7054 3.24967 3.4362 4.51888C2.16699 5.78808 2.16699 7.83084 2.16699 11.9163V16.2497C2.16699 20.3352 2.16699 22.3779 3.4362 23.6471C4.7054 24.9163 6.74815 24.9163 10.8337 24.9163Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
    </div>
    <button type="button" aria-expanded="false" class="flex items-center justify-center text-white bg-indigo-600 rounded-full w-16 h-16 hover:bg-indigo-700 focus:ring-4 focus:outline-none ">
        <svg class="w-5 h-5 transition-transform group-hover:rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
        </svg>
        <span class="sr-only">Open actions menu</span>
    </button>
</div>
</div>

Bottom left

Similarly, bottom{*} and left{*} utility classes are used to keep the speed dial component on the bottom left of the page.

 <div class="w-full relative min-h-[380px]">
<div class="absolute left-6 bottom-6 group z-50 speeddial-button">
   <div id="speed-dial-menu-default" class="speed-dial-menu flex flex-col items-center hidden mb-4 space-y-2">
       <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
           <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M6.5 14.0832H15.1667M6.5 17.3332H10.8333M14.8049 2.52753V7.22197C14.8049 8.41859 15.7749 9.38864 16.9715 9.38864H21.666M13.9081 2.1665H9.25C6.42157 2.1665 5.00736 2.1665 4.12868 3.04518C3.25 3.92386 3.25 5.33808 3.25 8.1665V17.8332C3.25 20.6616 3.25 22.0758 4.12868 22.9545C5.00736 23.8332 6.42079 23.8332 9.24766 23.8332C11.4087 23.8332 13.8504 23.8332 16.0282 23.8332C18.8563 23.8332 20.2704 23.8332 21.1491 22.9545C22.0278 22.0758 22.0278 20.6616 22.0278 17.8332V10.2862C22.0278 9.71155 21.7995 9.16045 21.3932 8.75412L15.4402 2.80111C15.0338 2.39478 14.4827 2.1665 13.9081 2.1665Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" />
           </svg>
       </button>
       <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
           <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M10.2917 11.917L11.9167 13.542L16.25 9.20866M15.0143 20.8557L16.4024 21.5845C19.2396 23.074 20.6582 23.8188 21.7041 23.1866C22.75 22.5545 22.75 20.9522 22.75 17.7478V10.8337C22.75 6.74815 22.75 4.7054 21.4808 3.4362C20.2116 2.16699 18.1688 2.16699 14.0833 2.16699H11.9167C7.83116 2.16699 5.78841 2.16699 4.5192 3.4362C3.25 4.7054 3.25 6.74815 3.25 10.8337V17.7478C3.25 20.9522 3.25 22.5545 4.29588 23.1866C5.34177 23.8188 6.76038 23.074 9.59762 21.5845L10.9857 20.8557C11.9725 20.3377 12.4658 20.0787 13 20.0787C13.5342 20.0787 14.0275 20.3377 15.0143 20.8557Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
           </svg>
       </button>
       <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
           <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M9.75033 9.69045C9.75033 5.43695 16.2503 5.43695 16.2503 9.69045C16.2503 12.729 13.2968 12.1226 13.2968 15.7675M13.2957 19.5003L13.3068 19.4866M13.0003 23.8337C7.01724 23.8337 2.16699 18.9834 2.16699 13.0003C2.16699 7.01724 7.01724 2.16699 13.0003 2.16699C18.9834 2.16699 23.8337 7.01724 23.8337 13.0003C23.8337 18.9834 18.9834 23.8337 13.0003 23.8337Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
           </svg>
       </button>
       <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
           <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M2.16699 9.74967H23.8337M17.2199 15.708H17.2297M17.2198 18.958H17.2295M13.2123 15.708H13.222M13.2123 18.958H13.222M9.20271 15.708H9.21244M9.20271 18.958H9.21244M7.58366 5.41634V1.08301M18.417 5.41634V1.08301M10.8337 24.9163H15.167C19.2525 24.9163 21.2953 24.9163 22.5645 23.6471C23.8337 22.3779 23.8337 20.3352 23.8337 16.2497V11.9163C23.8337 7.83083 23.8337 5.78808 22.5645 4.51888C21.2953 3.24967 19.2525 3.24967 15.167 3.24967H10.8337C6.74815 3.24967 4.7054 3.24967 3.4362 4.51888C2.16699 5.78808 2.16699 7.83084 2.16699 11.9163V16.2497C2.16699 20.3352 2.16699 22.3779 3.4362 23.6471C4.7054 24.9163 6.74815 24.9163 10.8337 24.9163Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
           </svg>
       </button>
   </div>
   <button type="button" aria-expanded="false" class="flex items-center justify-center text-white bg-indigo-600 rounded-full w-16 h-16 hover:bg-indigo-700 focus:ring-4 focus:outline-none ">
       <svg class="w-5 h-5 transition-transform group-hover:rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
       </svg>
       <span class="sr-only">Open actions menu</span>
   </button>
</div>
</div>

Top left

When one wishes to keep the speed dial button on the top left of the page top-{*} and left-{*} utility classes can be used to achieve desired top left position. 

 <div class="w-full relative min-h-[380px]">
 <div class="absolute left-6 top-6 group z-50 speeddial-button">
     <button type="button" aria-expanded="false" class="flex items-center justify-center text-white bg-indigo-600 rounded-full w-16 h-16 hover:bg-indigo-700 focus:ring-4 focus:outline-none ">
         <svg class="w-5 h-5 transition-transform group-hover:rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
         </svg>
         <span class="sr-only">Open actions menu</span>
     </button>
     <div id="speed-dial-menu-default" class="speed-dial-menu flex flex-col items-center hidden mt-4 space-y-2">
         <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
             <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M6.5 14.0832H15.1667M6.5 17.3332H10.8333M14.8049 2.52753V7.22197C14.8049 8.41859 15.7749 9.38864 16.9715 9.38864H21.666M13.9081 2.1665H9.25C6.42157 2.1665 5.00736 2.1665 4.12868 3.04518C3.25 3.92386 3.25 5.33808 3.25 8.1665V17.8332C3.25 20.6616 3.25 22.0758 4.12868 22.9545C5.00736 23.8332 6.42079 23.8332 9.24766 23.8332C11.4087 23.8332 13.8504 23.8332 16.0282 23.8332C18.8563 23.8332 20.2704 23.8332 21.1491 22.9545C22.0278 22.0758 22.0278 20.6616 22.0278 17.8332V10.2862C22.0278 9.71155 21.7995 9.16045 21.3932 8.75412L15.4402 2.80111C15.0338 2.39478 14.4827 2.1665 13.9081 2.1665Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" />
             </svg>
         </button>
         <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
             <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M10.2917 11.917L11.9167 13.542L16.25 9.20866M15.0143 20.8557L16.4024 21.5845C19.2396 23.074 20.6582 23.8188 21.7041 23.1866C22.75 22.5545 22.75 20.9522 22.75 17.7478V10.8337C22.75 6.74815 22.75 4.7054 21.4808 3.4362C20.2116 2.16699 18.1688 2.16699 14.0833 2.16699H11.9167C7.83116 2.16699 5.78841 2.16699 4.5192 3.4362C3.25 4.7054 3.25 6.74815 3.25 10.8337V17.7478C3.25 20.9522 3.25 22.5545 4.29588 23.1866C5.34177 23.8188 6.76038 23.074 9.59762 21.5845L10.9857 20.8557C11.9725 20.3377 12.4658 20.0787 13 20.0787C13.5342 20.0787 14.0275 20.3377 15.0143 20.8557Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
         </button>
         <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
             <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M9.75033 9.69045C9.75033 5.43695 16.2503 5.43695 16.2503 9.69045C16.2503 12.729 13.2968 12.1226 13.2968 15.7675M13.2957 19.5003L13.3068 19.4866M13.0003 23.8337C7.01724 23.8337 2.16699 18.9834 2.16699 13.0003C2.16699 7.01724 7.01724 2.16699 13.0003 2.16699C18.9834 2.16699 23.8337 7.01724 23.8337 13.0003C23.8337 18.9834 18.9834 23.8337 13.0003 23.8337Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
         </button>
         <button type="button" class="flex justify-center items-center w-16 h-16 text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
             <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M2.16699 9.74967H23.8337M17.2199 15.708H17.2297M17.2198 18.958H17.2295M13.2123 15.708H13.222M13.2123 18.958H13.222M9.20271 15.708H9.21244M9.20271 18.958H9.21244M7.58366 5.41634V1.08301M18.417 5.41634V1.08301M10.8337 24.9163H15.167C19.2525 24.9163 21.2953 24.9163 22.5645 23.6471C23.8337 22.3779 23.8337 20.3352 23.8337 16.2497V11.9163C23.8337 7.83083 23.8337 5.78808 22.5645 4.51888C21.2953 3.24967 19.2525 3.24967 15.167 3.24967H10.8337C6.74815 3.24967 4.7054 3.24967 3.4362 4.51888C2.16699 5.78808 2.16699 7.83084 2.16699 11.9163V16.2497C2.16699 20.3352 2.16699 22.3779 3.4362 23.6471C4.7054 24.9163 6.74815 24.9163 10.8337 24.9163Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
         </button>
     </div>
 </div>
</div>

Alignment

Flexbox utility classes of tailwind css are used to set the alignment of the speed dial component.

Horizontal

Flexbox utility classes of the tailwind css will help you display tailwind speed dial components horizontally.

 <div class="w-full relative min-h-[380px]">
<div class="absolute right-6 bottom-6 group z-50  flex speeddial-button">
    <div id="speed-dial-menu-default" class="speed-dial-menu flex  items-center hidden mr-4 space-x-2">
        <button type="button" class="flex justify-center items-center w-16 h-16  text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
            <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.5 14.0832H15.1667M6.5 17.3332H10.8333M14.8049 2.52753V7.22197C14.8049 8.41859 15.7749 9.38864 16.9715 9.38864H21.666M13.9081 2.1665H9.25C6.42157 2.1665 5.00736 2.1665 4.12868 3.04518C3.25 3.92386 3.25 5.33808 3.25 8.1665V17.8332C3.25 20.6616 3.25 22.0758 4.12868 22.9545C5.00736 23.8332 6.42079 23.8332 9.24766 23.8332C11.4087 23.8332 13.8504 23.8332 16.0282 23.8332C18.8563 23.8332 20.2704 23.8332 21.1491 22.9545C22.0278 22.0758 22.0278 20.6616 22.0278 17.8332V10.2862C22.0278 9.71155 21.7995 9.16045 21.3932 8.75412L15.4402 2.80111C15.0338 2.39478 14.4827 2.1665 13.9081 2.1665Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" />
            </svg>
        </button>
        <button type="button" class="flex justify-center items-center w-16 h-16  text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
            <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2917 11.917L11.9167 13.542L16.25 9.20866M15.0143 20.8557L16.4024 21.5845C19.2396 23.074 20.6582 23.8188 21.7041 23.1866C22.75 22.5545 22.75 20.9522 22.75 17.7478V10.8337C22.75 6.74815 22.75 4.7054 21.4808 3.4362C20.2116 2.16699 18.1688 2.16699 14.0833 2.16699H11.9167C7.83116 2.16699 5.78841 2.16699 4.5192 3.4362C3.25 4.7054 3.25 6.74815 3.25 10.8337V17.7478C3.25 20.9522 3.25 22.5545 4.29588 23.1866C5.34177 23.8188 6.76038 23.074 9.59762 21.5845L10.9857 20.8557C11.9725 20.3377 12.4658 20.0787 13 20.0787C13.5342 20.0787 14.0275 20.3377 15.0143 20.8557Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
        <button type="button" class="flex justify-center items-center w-16 h-16  text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
            <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.75033 9.69045C9.75033 5.43695 16.2503 5.43695 16.2503 9.69045C16.2503 12.729 13.2968 12.1226 13.2968 15.7675M13.2957 19.5003L13.3068 19.4866M13.0003 23.8337C7.01724 23.8337 2.16699 18.9834 2.16699 13.0003C2.16699 7.01724 7.01724 2.16699 13.0003 2.16699C18.9834 2.16699 23.8337 7.01724 23.8337 13.0003C23.8337 18.9834 18.9834 23.8337 13.0003 23.8337Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
        <button type="button" class="flex justify-center items-center w-16 h-16  text-gray-900 hover:text-gray-900 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-gray-50  focus:outline-none relative">
            <svg class="w-6 h-6" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.16699 9.74967H23.8337M17.2199 15.708H17.2297M17.2198 18.958H17.2295M13.2123 15.708H13.222M13.2123 18.958H13.222M9.20271 15.708H9.21244M9.20271 18.958H9.21244M7.58366 5.41634V1.08301M18.417 5.41634V1.08301M10.8337 24.9163H15.167C19.2525 24.9163 21.2953 24.9163 22.5645 23.6471C23.8337 22.3779 23.8337 20.3352 23.8337 16.2497V11.9163C23.8337 7.83083 23.8337 5.78808 22.5645 4.51888C21.2953 3.24967 19.2525 3.24967 15.167 3.24967H10.8337C6.74815 3.24967 4.7054 3.24967 3.4362 4.51888C2.16699 5.78808 2.16699 7.83084 2.16699 11.9163V16.2497C2.16699 20.3352 2.16699 22.3779 3.4362 23.6471C4.7054 24.9163 6.74815 24.9163 10.8337 24.9163Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
    </div>
    <button type="button" aria-expanded="false" class="flex items-center justify-center text-white bg-indigo-600 rounded-full w-16 h-16 hover:bg-indigo-700 focus:ring-4 focus:outline-none ">
        <svg class="w-5 h-5 transition-transform group-hover:rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
        </svg>
        <span class="sr-only">Open actions menu</span>
    </button>
</div>
</div>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now
image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More