Popovers

<div class="flex justify-center">
          <div class="popover" tabindex="0">
                <button  class="badge-color-slate-500 badge-pill aspect-ratio-square w-7">
                    <i class="fa-light fa-chevron-up text-xs items-center"></i>
                </button>
                <div class="popover-content direction-up" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">This is amazing</p>
                </div>
            </div>
          </div>

<div class="flex justify-center">
          <div class="popover" tabindex="0">
                <button  class="badge-color-slate-500 badge-pill aspect-ratio-square w-7">
                    <i class="fa-light fa-chevron-down text-xs items-center"></i>
                </button>
                <div class="popover-content direction-down" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">This is amazing</p>
                </div>
            </div>
          </div>

<div class="flex justify-center">
          <div class="popover" tabindex="0">
                <button  class="badge-color-slate-500 badge-pill aspect-ratio-square w-7">
                    <i class="fa-light fa-chevron-left text-xs items-center"></i>
                </button>
                <div class="popover-content direction-left" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">This is amazing</p>
                </div>
            </div>
          </div>

<div class="flex justify-center">
          <div class="popover" tabindex="0">
                <button  class="badge-color-slate-500 badge-pill aspect-ratio-square w-7">
                    <i class="fa-light fa-chevron-right text-xs items-center"></i>
                </button>
                <div class="popover-content direction-right" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">This is amazing</p>
                </div>
            </div>
          </div>

<div class="flex justify-center">
          <div class="popover" tabindex="0">
                <button  class="badge-color-slate-500 badge-pill aspect-ratio-square w-7">
                    <i class="fa-light fa-arrows-up-down-left-right text-xs items-center"></i>
                </button>
                <div class="popover-content direction-left" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">Left</p>
                </div>
                <div class="popover-content direction-right" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">Right</p>
                </div>
                <div class="popover-content direction-up" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">Up</p>
                </div>
                <div class="popover-content direction-down" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">Down</p>
                </div>
            </div>
          </div>

<div class="flex justify-center">
          <div class="popover" tabindex="0">
                <button  class="badge-color-slate-500 badge-pill aspect-ratio-square w-7">
                    <i class="fa-light fa-cog text-xs items-center"></i>
                </button>
                <div class="popover-content direction-left" tabindex="-1">
                    <div class="notification  w-xs">
                    <div class="p-4">
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <i class="fa-light fa-spider text-md items-center text-blue-400"></i>
                            </div>
                            <div class="ml-3 w-0 flex-1 pt-0.5">
                                <p class="text-sm font-medium text-header">Update Crawl Settingss!</p>
                                <p class="mt-1 text-sm text-body">Your crawl has errored.</p>
                                <div class="button-group inline-flex mt-4">
                                    <button class="btn-default text-xs"><i class="fa-solid fa-repeat text-xs items-center opacity-40"></i> Restart</button>
                                    <button class="btn-default whitespace-nowrap  text-xs"><i class="fa-solid fa-gear text-xs items-center opacity-40"></i>Change Settings</button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                </div>
            </div>
          </div>