바닥글 구성 요소

<footer class="bg-gradient-to-r from-gray-50 via-white to-gray-50 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900 transition-colors duration-300 border-t-4 border-l-4 border-r-4 border-b-4 border-image-slice-1 border-image-source-rainbow py-8 sm:py-12 lg:py-16 mt-8 sm:mt-12 lg:mt-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row justify-between items-center md:items-start text-center md:text-left gap-8">
      
      <!-- Company Info / Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="inline-flex items-center justify-center font-bold text-2xl tracking-tight text-gray-900 dark:text-white group">
          <svg class="h-8 w-8 mr-2 text-indigo-600 dark:text-indigo-400 group-hover:animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M6.343 17.657l-.707.707M18.907 9.207L12 2m0 20c-3.737 0-6.86-2.585-7.747-6L2 12l2.253-4.747C5.14 3.585 8.263 1 12 1s6.86 2.585 7.747 6L22 12l-2.253 4.747C18.86 19.415 15.737 22 12 22zM12 19a7 7 0 100-14 7 7 0 000 14z"></path>
          </svg>
          <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-indigo-600 to-blue-600 dark:from-purple-400 dark:via-indigo-400 dark:to-blue-400">BookFlow</span>
        </a>
        <p class="mt-3 text-sm text-gray-600 dark:text-gray-400 leading-relaxed max-w-xs">
          Your seamless journey from selection to confirmation. Book your next experience today.
        </p>
      </div>

      <!-- Navigation Links -->
      <div class="flex-grow grid grid-cols-2 md:grid-cols-3 gap-8 justify-items-center md:justify-items-start max-w-xl">
        <div>
          <h3 class="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-3">
            Company
          </h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">About Us</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Services</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Careers</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-3">
            Support
          </h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Help Center</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Contact Us</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">FAQ</a></li>
          </ul>
        </div>
        <div class="col-span-2 md:col-span-1">
          <h3 class="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-3">
            Legal
          </h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Privacy Policy</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Terms of Service</a></li>
          </ul>
        </div>
      </div>

    </div>

    <div class="mt-10 pt-8 border-t border-gray-200 dark:border-gray-800 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        &copy; 2023 BookFlow Inc. All rights reserved.
      </p>
    </div>
  </div>
</footer>

<style>
  /* This is an example of applying the gradient rainbow border using custom CSS for demonstration.
     In a real Tailwind project, you might use a similar approach or a utility plugin for more complex gradients.
     For a simple rainbow, a linear-gradient for border-image-source is effective. */
  .border-image-source-rainbow {
    border-image-source: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  }
</style>