<style type="text/tailwindcss">
@layer components {
  body {
    @apply bg-white text-black p-3;
  }
  .myTooltip {
    @apply inline-block relative text-black after:hidden hover:after:block after:absolute after:bg-black after:left-0 after:top-7 after:w-max after:h-auto after:text-white after:p-2 after:px-2.5 after:rounded-md after:text-xs;
  }
}

</style>
<span class="myTooltip after:content-['Harvey'] after:!bg-red-600">Harvey</span>
<span class="myTooltip after:content-['Arboleda'] after:!bg-orange-600">Arboleda</span>
<span class="myTooltip after:content-['Hello'] after:!bg-yellow-600">Hello</span>
<span class="myTooltip after:content-['World'] after:!bg-green-600">World</span>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#202225',
        secondary: '#5865f2',
        gray: {
          900: '#202225',
          800: '#2f3136',
          700: '#36393f',
          600: '#4f545c',
          400: '#d4d7dc',
          300: '#e3e5e8',
          200: '#ebedef',
          100: '#f2f3f5',
        },
        clifford: "#da373d"
      }
    }
  }
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tailwindcss.com