Modern snail

<!-- From Uiverse.io by sahilxkhadka  - Tags: simple, tooltip, button, hover effect, tailwind, tailwindbutton -->
<button
  class="group relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800"
>
  <span
    class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0"
  >
    Hover For Tooltip
  </span>
  <div class="hidden group-hover:block">
    <div
      class="group absolute -top-12 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center rounded-sm text-center text-sm text-slate-300 before:-top-2"
    >
      <div class="rounded-sm bg-black py-1 px-2">
        <p class="whitespace-nowrap">This is a tooltip.</p>
      </div>
      <div
        class="h-0 w-fit border-l-8 border-r-8 border-t-8 border-transparent border-t-black"
      ></div>
    </div>
  </div>
</button>

.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.-top-12 {
  top: calc(0.25rem * -12);
}
.left-1\/2 {
  left: calc(1 / 2 * 100%);
}
.z-50 {
  z-index: 50;
}
.mr-2 {
  margin-right: calc(0.25rem * 2);
}
.mb-2 {
  margin-bottom: calc(0.25rem * 2);
}
.flex {
  display: flex;
}
.hidden {
  display: none;
}
.inline-flex {
  display: inline-flex;
}
.h-0 {
  height: 0px;
}
.w-fit {
  width: fit-content;
}
.-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-sm {
  border-radius: 0.25rem;
}
.border-t-8 {
  border-top-style: var(--tw-border-style);
  border-top-width: 8px;
}
.border-r-8 {
  border-right-style: var(--tw-border-style);
  border-right-width: 8px;
}
.border-l-8 {
  border-left-style: var(--tw-border-style);
  border-left-width: 8px;
}
.border-transparent {
  border-color: transparent;
}
.border-t-black {
  border-top-color: #000;
}
.bg-black {
  background-color: #000;
}
.bg-white {
  background-color: #fff;
}
.bg-gradient-to-br {
  --tw-gradient-position: to bottom right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-purple-500 {
  --tw-gradient-from: oklch(62.7% 0.265 303.9);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-pink-500 {
  --tw-gradient-to: oklch(65.6% 0.241 354.308);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.p-0\.5 {
  padding: calc(0.25rem * 0.5);
}
.px-2 {
  padding-inline: calc(0.25rem * 2);
}
.px-5 {
  padding-inline: calc(0.25rem * 5);
}
.py-1 {
  padding-block: 0.25rem;
}
.py-2\.5 {
  padding-block: calc(0.25rem * 2.5);
}
.text-center {
  text-align: center;
}
.text-sm {
  font-size: 0.875rem;
  line-height: var(--tw-leading, calc(1.25 / 0.875));
}
.font-medium {
  --tw-font-weight: 500;
  font-weight: 500;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-gray-900 {
  color: oklch(21% 0.034 264.665);
}
.text-slate-300 {
  color: oklch(86.9% 0.022 252.894);
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
  transition-duration: var(--tw-duration, 150ms);
}
.duration-75 {
  --tw-duration: 75ms;
  transition-duration: 75ms;
}
.ease-in {
  --tw-ease: cubic-bezier(0.4, 0, 1, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
@media (hover: hover) {
  .group-hover\:block:is(:where(.group):hover *) {
    display: block;
  }
  .group-hover\:from-purple-500:is(:where(.group):hover *) {
    --tw-gradient-from: oklch(62.7% 0.265 303.9);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .group-hover\:to-pink-500:is(:where(.group):hover *) {
    --tw-gradient-to: oklch(65.6% 0.241 354.308);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
}
.before\:-top-2::before {
  content: var(--tw-content);
  top: calc(0.25rem * -2);
}
@media (hover: hover) {
  .hover\:text-white:hover {
    color: #fff;
  }
}
.focus\:ring-4:focus {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus\:ring-purple-200:focus {
  --tw-ring-color: oklch(90.2% 0.063 306.703);
}
.focus\:outline-none:focus {
  --tw-outline-style: none;
  outline-style: none;
}
@media (prefers-color-scheme: dark) {
  .dark\:bg-gray-900 {
    background-color: oklch(21% 0.034 264.665);
  }
  .dark\:text-white {
    color: #fff;
  }
  .dark\:focus\:ring-purple-800:focus {
    --tw-ring-color: oklch(43.8% 0.218 303.724);
  }
}

<!-- From Uiverse.io by sahilxkhadka  - Tags: simple, tooltip, button, hover effect, tailwind, tailwindbutton -->
<button
  class="group relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800"
>
  <span
    class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0"
  >
    Hover For Tooltip
  </span>
  <div class="hidden group-hover:block">
    <div
      class="group absolute -top-12 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center rounded-sm text-center text-sm text-slate-300 before:-top-2"
    >
      <div class="rounded-sm bg-black py-1 px-2">
        <p class="whitespace-nowrap">This is a tooltip.</p>
      </div>
      <div
        class="h-0 w-fit border-l-8 border-r-8 border-t-8 border-transparent border-t-black"
      ></div>
    </div>
  </div>
</button>