<button type="button" class="btn bg-primary-600 hover:bg-primary-700 text-white rounded-lg px-5 py-[11px]">Primary</button>
  <button type="button" class="btn bg-purple-600 hover:bg-purple-700 text-white rounded-lg px-5 py-[11px]">Secondary</button>
  <button type="button" class="btn bg-success-600 hover:bg-success-700 text-white rounded-lg px-5 py-[11px]">Success</button>
  <button type="button" class="btn bg-info-600 hover:bg-info-700 text-white rounded-lg px-5 py-[11px]">Info</button>
  <button type="button" class="btn bg-warning-600 hover:bg-warning-700 text-white rounded-lg px-5 py-[11px]">Warning</button>
  <button type="button" class="btn bg-danger-600 hover:bg-danger-700 text-white rounded-lg px-5 py-[11px]">Danger</button>
  <button type="button" class="btn bg-neutral-900 hover:bg-neutral-700 text-white text-base rounded-lg px-5 py-[11px]">Dark</button>
  <button type="button" class="btn hover:text-primary-600 text-secondary-light text-decoration-none rounded-lg px-5 py-[11px]">Link</button>
  <button type="button" class="btn bg-light-100 hover:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-500 text-dark rounded-lg px-5 py-[11px]">Light</button>
                

  <!-- Dropdown Start -->
  <div class="">
    <button data-dropdown-toggle="defaultActionPill" data-dropdown-placement="bottom" class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">Default Action
      <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
      </svg>
    </button>
    <!-- Dropdown menu -->
    <div id="defaultActionPill" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
      <ul class="py-2 text-base text-gray-700 dark:text-gray-200">
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Dropdown End -->

  <!-- Dropdown Start -->
  <div class="">
    <button data-dropdown-toggle="outlineActionPill" data-dropdown-placement="bottom" class="text-primary-600 focus:bg-primary-600 hover:bg-primary-700 border border-primary-600 hover:text-white focus:text-white focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:text-primary-400 dark:hover:text-white dark:focus:text-white dark:focus:ring-primary-800" type="button">Outline Action
      <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
      </svg>
    </button>
    <!-- Dropdown menu -->
    <div id="outlineActionPill" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
      <ul class="py-2 text-base text-gray-700 dark:text-gray-200">
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Dropdown End -->

  <!-- Dropdown Start -->
  <div class="">
    <button data-dropdown-toggle="focusActionPill" data-dropdown-placement="bottom" class="bg-primary-50 hover:bg-primary-600 focus:ring-4 focus:outline-none hover:text-white text-primary-600 focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-primary-600/25 dark:text-primary-400 dark:hover:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">Focus Action
      <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
      </svg>
    </button>
    <!-- Dropdown menu -->
    <div id="focusActionPill" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
      <ul class="py-2 text-base text-gray-700 dark:text-gray-200">
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Dropdown End -->

  <!-- Dropdown Start -->
  <div class="">
    <button data-dropdown-toggle="focusActionPillTwo" data-dropdown-placement="bottom" class="hover:bg-primary-600 focus:ring-4 focus:outline-none hover:text-white text-primary-600 focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:text-primary-400 dark:hover:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">Focus Action
      <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
      </svg>
    </button>
    <!-- Dropdown menu -->
    <div id="focusActionPillTwo" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
      <ul class="py-2 text-base text-gray-700 dark:text-gray-200">
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Dropdown End -->
                

    <div class="alert alert-primary bg-primary-50 dark:bg-primary-600/25 text-primary-600 dark:text-primary-400 border-primary-50 px-6 py-[11px] mb-0 font-semibold text-lg rounded-lg flex items-center justify-between" role="alert">
      This is a Primary alert 
      <button class="remove-button text-primary-600 text-2xl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
  </div>
  <div class="alert alert-purple bg-purple-100 dark:bg-purple-600/25 text-purple-600 dark:text-purple-400 border-purple-100 px-6 py-[11px] mb-0 font-semibold text-lg rounded-lg flex items-center justify-between" role="alert">
      This is a Secondary alert 
      <button class="remove-button dark:text-purple-400 text-2xl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
  </div>
  <div class="alert alert-warning bg-warning-100 dark:bg-warning-600/25 text-warning-600 dark:text-warning-400 border-warning-100 px-6 py-[11px] mb-0 font-semibold text-lg rounded-lg flex items-center justify-between" role="alert">
      This is a Warning alert 
      <button class="remove-button text-warning-600 text-2xl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
  </div>
  <div class="alert alert-info bg-info-100 dark:bg-info-600/25 text-info-600 dark:text-info-400 border-info-100 px-6 py-[11px] mb-0 font-semibold text-lg rounded-lg flex items-center justify-between" role="alert">
      This is a Info alert 
      <button class="remove-button text-info-600 text-2xl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
  </div>
  <div class="alert alert-danger bg-danger-100 dark:bg-danger-600/25 text-danger-600 dark:text-danger-400 border-danger-100 px-6 py-[11px] mb-0 font-semibold text-lg rounded-lg flex items-center justify-between" role="alert">
      This is a Danger alert 
      <button class="remove-button text-danger-600 text-2xl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
  </div>
                

    <span class="badge text-sm font-semibold bg-primary-600 px-5 py-1.5 rounded text-white">Primary</span>
    <span class="badge text-sm font-semibold bg-purple-600 px-5 py-1.5 rounded text-white">Secondary</span>
    <span class="badge text-sm font-semibold bg-success-600 px-5 py-1.5 rounded text-white">Success</span>
    <span class="badge text-sm font-semibold bg-info-600 px-5 py-1.5 rounded text-white">Info</span>
    <span class="badge text-sm font-semibold bg-warning-600 px-5 py-1.5 rounded text-white">Warning</span>
    <span class="badge text-sm font-semibold bg-danger-600 px-5 py-1.5 rounded text-white">Danger</span>
    <span class="badge text-sm font-semibold bg-neutral-800 px-5 py-1.5 rounded text-white">Dark</span>
    <span class="badge text-sm font-semibold bg-transparent px-5 py-1.5 rounded text-primary-600">Link</span>
    <span class="badge text-sm font-semibold bg-light-600 dark:bg-neutral-600 px-5 py-1.5 rounded text-dark">Light</span>
                

    <button data-tooltip-target="tooltip-Secondary" data-tooltip-placement="top" type="button" class="btn bg-purple-600/10 hover:bg-purple-600/25 text-purple-600 dark:text-purple-400 rounded-lg px-8 py-[11px]">
        Secondary
    </button>
      <div id="tooltip-Secondary" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-800">
        Tooltip Secondary
        <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-Success" data-tooltip-placement="top" type="button" class="btn bg-success-600/10 hover:bg-success-600/25 text-success-600 dark:text-success-400 rounded-lg px-8 py-[11px]">
        Success
    </button>
      <div id="tooltip-Success" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-800">
        Tooltip Success
        <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-Info" data-tooltip-placement="top" type="button" class="btn bg-info-600/10 hover:bg-info-600/25 text-info-600 dark:text-info-400 rounded-lg px-8 py-[11px]">
        Info
    </button>
      <div id="tooltip-Info" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-800">
        Tooltip Info
        <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-Warning" data-tooltip-placement="top" type="button" class="btn bg-warning-600/10 hover:bg-warning-600/25 text-warning-600 dark:text-warning-400 rounded-lg px-8 py-[11px]">
        Warning
    </button>
      <div id="tooltip-Warning" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-800">
        Tooltip Warning
        <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-Danger" data-tooltip-placement="top" type="button" class="btn bg-danger-600/10 hover:bg-danger-600/25 text-danger-600 dark:text-danger-400 rounded-lg px-8 py-[11px]">
        Danger
    </button>
      <div id="tooltip-Danger" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-800">
        Tooltip Danger
        <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-Dark" data-tooltip-placement="top" type="button" class="btn bg-neutral-600/10 hover:bg-neutral-600/25 text-neutral-600 dark:text-neutral-400 rounded-lg px-8 py-[11px]">
        Dark
    </button>
      <div id="tooltip-Dark" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-800">
        Tooltip Dark
        <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
                

        // Boxed Tooltip
        $(document).ready(function() {
          $('.tooltip-button').each(function () {
              var tooltipButton = $(this);
              var tooltipContent = $(this).siblings('.my-tooltip').html(); 
      
              // Initialize the tooltip
              tooltipButton.tooltip({
                  title: tooltipContent,
                  trigger: 'hover',
                  html: true
              });
      
              // Optionally, reinitialize the tooltip if the content might change dynamically
              tooltipButton.on('mouseenter', function() {
                  tooltipButton.tooltip('dispose').tooltip({
                      title: tooltipContent,
                      trigger: 'hover',
                      html: true
                  }).tooltip('show');
              });
          });
      });
                

    <ul class="flex flex-wrap text-sm font-medium text-center" id="button-icon-tab" data-tabs-toggle="#button-icon-tab-content" role="tablist">
    <li role="presentation">
        <button class="px-4 py-2.5 font-semibold rounded-md flex items-center gap-2" id="button-icon-home-tab" data-tabs-target="#button-icon-home" type="button" role="tab" aria-controls="button-icon-home" aria-selected="false">
            <iconify-icon icon="solar:home-smile-angle-outline" class="text-md"></iconify-icon>
            Home
        </button>
    </li>
    <li role="presentation">
        <button class="px-4 py-2.5 font-semibold rounded-md flex items-center gap-2 hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="button-icon-details-tab" data-tabs-target="#button-icon-details" type="button" role="tab" aria-controls="button-icon-details" aria-selected="false">
            <iconify-icon icon="solar:home-smile-angle-outline" class="text-md"></iconify-icon>
            Details
        </button>
    </li>
    <li role="presentation">
        <button class="px-4 py-2.5 font-semibold rounded-md flex items-center gap-2 hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="button-icon-profile-tab" data-tabs-target="#button-icon-profile" type="button" role="tab" aria-controls="button-icon-profile" aria-selected="false">
            <iconify-icon icon="solar:home-smile-angle-outline" class="text-md"></iconify-icon>
            Profile
        </button>
    </li>
    <li role="presentation">
        <button class="px-4 py-2.5 font-semibold rounded-md flex items-center gap-2 hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="button-icon-settings-tab" data-tabs-target="#button-icon-settings" type="button" role="tab" aria-controls="button-icon-settings" aria-selected="false">
            <iconify-icon icon="solar:home-smile-angle-outline" class="text-md"></iconify-icon>
            Settings
        </button>
    </li>
</ul>