Currently HTML and TailwindCSS code is generated.
<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>