브루탈리즘 단색 툴팁

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 transition-colors duration-300">
  <div class="relative group max-w-sm mx-auto">
    <a href="#" class="inline-block px-6 py-3 text-lg font-extrabold tracking-tight uppercase border-4 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-transparent transition-all duration-300 transform -skew-x-6 hover:translate-x-1 hover:-translate-y-1 hover:shadow-brutal dark:hover:shadow-brutal-dark focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600">
      Hover Me
    </a>

    <div class="absolute hidden group-hover:block transition-all duration-300 ease-out transform scale-0 origin-bottom-left group-hover:scale-100 mt-4 md:mt-6 left-1/2 -ml-24 w-60 sm:w-72 md:w-80 lg:w-96 p-4 md:p-6 bg-gray-200 dark:bg-gray-800 border-4 border-gray-800 dark:border-gray-200 shadow-brutal dark:shadow-brutal-dark z-50 overflow-hidden">
      <div class="absolute -top-4 left-6 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-800 dark:border-b-gray-200 transform rotate-[135deg]"></div>
      <div class="absolute -top-4 left-6 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-200 dark:border-b-gray-800 transform rotate-[135deg] -translate-x-0.5 -translate-y-0.5"></div>

      <h3 class="text-xl md:text-2xl font-extrabold uppercase mb-2 text-gray-900 dark:text-gray-100 border-b-2 border-dashed border-gray-500 dark:border-gray-500 pb-1">
        Brutal Tip Title
      </h3>
      <p class="text-sm md:text-base text-gray-700 dark:text-gray-300 mb-4 tracking-tight leading-snug">
        This is a raw and unpolished tooltip designed with a brutalist aesthetic. It's meant to convey information bluntly and directly. 
        Consider this a visual declaration, not a gentle suggestion.
      </p>
      
      <div class="mb-4 flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 border-t-2 border-dashed border-gray-500 dark:border-gray-500 pt-3">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author" class="w-10 h-10 rounded-full border-2 border-gray-800 dark:border-gray-200 object-cover flex-shrink-0">
        <div>
          <p class="text-xs md:text-sm font-bold uppercase text-gray-800 dark:text-gray-200">By John 'The Hammer' Doe</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">March 15, 2023</p>
        </div>
      </div>

      <div class="flex flex-wrap gap-2 mb-4">
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Brutalism</span>
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Monochromatic</span>
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Content</span>
      </div>

      <a href="#" class="inline-block w-full text-center px-4 py-2 text-sm md:text-base font-extrabold uppercase border-4 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-transparent transition-all duration-300 transform -skew-x-3 hover:translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-sm dark:hover:shadow-brutal-sm-dark focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600">
        Read More
      </a>

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

<style>
  /* Custom shadows for brutalism style */
  .shadow-brutal {
    box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 1);
  }
  .dark .shadow-brutal-dark {
    box-shadow: 10px 10px 0px 0px rgba(255, 255, 255, 1);
  }
  .shadow-brutal-sm {
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  }
  .dark .shadow-brutal-sm-dark {
    box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 1);
  }

  /* Triangle for tooltip */
  .group-hover\:block {
    left: 50%;
    transform: translateX(-50%) translateY(10px) rotate(0deg) scale(0);
    transform-origin: bottom center;
  }
  .group:hover .group-hover\:block {
    transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1);
  }
  @media (min-width: 768px) {
    .group-hover\:block {
      left: 50%;
      transform: translateX(-50%) translateY(20px) rotate(0deg) scale(0);
      transform-origin: bottom center;
    }
    .group:hover .group-hover\:block {
      transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1);
    }
  }
</style>