Skip to main content

Discord-style button ↔ react-icons for svg. tailwindcss styles

export default function function DiscordButton({ icon, text = "Tooltip 💡" }) {
  return (
    <div className="sidebar-icon group"\>
      {icon}

      <span className="sidebar-tooltip group-hover:scale-100"\>{text}</span>
    </div\>
  )
} 

// refactor utility classes to tailwind input css via @apply
@layer components {
  .sidebar-icon {
    @apply relative flex items-center justify-center h-12 w-12 mt-2 mb-2 mx-auto shadow-lg bg-gray-800 text-green-500 hover:bg-green-600 hover:text-white rounded-3xl hover:rounded-xl transition-all duration-300 ease-linear;
  }
  .sidebar-tooltip {
    @apply absolute w-auto p-2 m-2 min-w-max left-14 rounded-md shadow-md text-white bg-gray-900 text-xs font-bold transition-all duration-100 scale-0 origin-left;
  }
}

References​