Component Wizard v1

<div class="bg-blue-900 text-white py-20">
    <div class="container mx-auto text-center">
        <h1 class="text-5xl font-bold mb-4">Trade Smarter, Not Harder</h1>
        <p class="text-lg mb-8">Join us to unlock the potential of global markets with cutting-edge tools and insights.</p>
        <a href="#" class="bg-yellow-500 text-blue-900 py-3 px-6 rounded-full text-lg font-semibold hover:bg-yellow-400">Get Started</a>
    </div>
</div>

<div class="relative">
  <div class="overflow-hidden bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-lg shadow-lg">
    <div class="flex space-x-4 p-4 bg-white bg-opacity-30 backdrop-blur-md rounded-lg">
      <button class="tab-button py-2 px-4 rounded-lg font-semibold focus:outline-none transition-transform transform hover:scale-105 active:scale-95">Tab 1</button>
      <button class="tab-button py-2 px-4 rounded-lg font-semibold focus:outline-none transition-transform transform hover:scale-105 active:scale-95">Tab 2</button>
      <button class="tab-button py-2 px-4 rounded-lg font-semibold focus:outline-none transition-transform transform hover:scale-105 active:scale-95">Tab 3</button>
    </div>
  </div>
  <div class="absolute inset-0 border-2 border-transparent rounded-lg pointer-events-none bg-[length:100%_100%] bg-[conic-gradient(from_var(--tw-gradient-stops))]">
    <div class="gradient-border"></div>
  </div>
</div>

<style>
.gradient-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(white, white),
                    linear-gradient(90deg, #4f46e5, #9333ea, #ec4899, #ec4899);
  background-clip: padding-box, border-box;
  border: 8px solid transparent;
}
</style>

<div class="bg-white shadow-md rounded-lg p-6">
    <h2 class="text-xl font-semibold mb-4">Activity Geomap</h2>
    <div class="relative h-60">
        <img src="your-geomap-image-url.jpg" alt="Activity Geomap" class="w-full h-full object-cover rounded-lg">
        <div class="absolute bottom-0 left-0 p-4">
            <span class="bg-gray-800 text-white text-sm px-2 py-1 rounded">Active Areas</span>
        </div>
    </div>
    <div class="mt-4">
        <p class="text-gray-700">Explore the regions where activities are taking place. Hover over the map for more details.</p>
    </div>
</div>