Luxury Tag Cloud 구성 요소

<div class="font-sans bg-amber-50 dark:bg-gray-900 py-16 px-4 sm:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto">
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-amber-900 dark:text-amber-200 mb-4 tracking-tight leading-tight">
        Our Expertise: A World of Insights
      </h2>
      <p class="text-xl text-amber-700 dark:text-amber-300 max-w-2xl mx-auto">
        Discover the breadth of our consulting services and the diverse areas where we bring unparalleled value and strategic guidance.
      </p>
    </div>

    <div class="flex flex-wrap justify-center gap-4 sm:gap-6 lg:gap-8 p-6 sm:p-8 lg:p-10 bg-gradient-to-br from-amber-100 to-red-100 dark:from-red-900 dark:to-orange-950 rounded-3xl shadow-xl border border-amber-200 dark:border-red-800">

      <span class="tag-item">
        Strategic Planning
      </span>
      <span class="tag-item">
        Digital Transformation
      </span>
      <span class="tag-item">
        Organizational Change
      </span>
      <span class="tag-item">
        Market Entry
      </span>
      <span class="tag-item">
        Financial Advisory
      </span>
      <span class="tag-item">
        Operational Efficiency
      </span>
      <span class="tag-item">
        Sustainability Consulting
      </span>
      <span class="tag-item">
        Leadership Development
      </span>
      <span class="tag-item">
        Risk Management
      </span>
      <span class="tag-item">
        Technology Integration
      </span>
      <span class="tag-item">
        Customer Experience
      </span>
      <span class="tag-item">
        Crisis Management
      </span>
      <span class="tag-item">
        Innovation Strategy
      </span>
      <span class="tag-item">
        Supply Chain Optimization
      </span>
      <span class="tag-item">
        Data Analytics
      </span>
      <span class="tag-item">
        Talent Management
      </span>
      <span class="tag-item">
        Mergers & Acquisitions
      </span>
      <span class="tag-item">
        Brand Development
      </span>
      <span class="tag-item">
        Cybersecurity
      </span>
      <span class="tag-item">
        Regulatory Compliance
      </span>
      <span class="tag-item">
        Performance Improvement
      </span>
      <span class="tag-item">
        Global Business
      </span>
      <span class="tag-item">
        Executive Coaching
      </span>
    </div>

    <div class="text-center mt-12">
      <a href="#" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-full shadow-lg text-white bg-gradient-to-r from-red-600 to-orange-500 hover:from-red-700 hover:to-orange-600 dark:from-red-700 dark:to-orange-600 dark:hover:from-red-800 dark:hover:to-orange-700 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900">
        Explore Our Full Services
        <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</div>

<style>
  /* Base styles for the tag item */
  .tag-item {
    @apply inline-flex items-center justify-center
    px-5 py-2.5 sm:px-6 sm:py-3 lg:px-7 lg:py-3.5
    text-base sm:text-lg lg:text-xl font-semibold
    rounded-full
    transition-all duration-300 ease-in-out
    transform hover:-translate-y-0.5 hover:scale-105
    shadow-md
  }
  
  /* Light mode specific styles */
  .tag-item {
    @apply bg-amber-500 text-white
    border border-amber-600
    hover:bg-amber-600 hover:text-white
    hover:shadow-lg
  }

  /* Dark mode specific styles */
  .dark .tag-item {
    @apply bg-red-700 text-amber-100
    border border-red-800
    hover:bg-red-800 hover:text-white
    hover:shadow-lg
  }

  /* Responsive font sizes and padding for tags */
  @media (min-width: 640px) {
    .tag-item:nth-child(2n) { /* Example: Slightly larger for some tags */
      @apply text-lg sm:text-xl lg:text-2xl px-6 py-3 sm:px-7 sm:py-3.5 lg:px-8 lg:py-4;
      @apply bg-orange-500 border-orange-600 hover:bg-orange-600;
      @apply dark:bg-orange-700 dark:border-orange-800 dark:hover:bg-orange-800;
    }
  }

  @media (min-width: 1024px) {
    .tag-item:nth-child(3n) { /* Example: Even larger and different hue for others */
      @apply text-xl sm:text-2xl lg:text-3xl px-7 py-3.5 sm:px-8 sm:py-4 lg:px-9 lg:py-4.5;
      @apply bg-red-500 border-red-600 hover:bg-red-600;
      @apply dark:bg-red-700 dark:border-red-800 dark:hover:bg-red-800;
    }
  }

  /* Add more specific sizing for tags for visual variety if needed */
  .tag-item:nth-child(4n+1) { @apply text-base; }
  .tag-item:nth-child(4n+2) { @apply text-lg; }
  .tag-item:nth-child(4n+3) { @apply text-xl; }
  .tag-item:nth-child(4n) { @apply text-2xl; }

  /* Adjust font sizes responsively */
  @media (max-width: 639px) {
    .tag-item:nth-child(4n+1) { @apply text-sm; }
    .tag-item:nth-child(4n+2) { @apply text-base; }
    .tag-item:nth-child(4n+3) { @apply text-base; }
    .tag-item:nth-child(4n) { @apply text-lg; }
  }
</style>