Component Wizard v1

Write your component requirements, and I'll give you the code.

Currently HTML and TailwindCSS code is generated.

Created by Berkay

Recent generations
"A hero section for trading website "
<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>
"create tabs menu with soft movement when the menu is clicked, with a gradient border and background with glassefect "
<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>
"geomap indicating activities "
<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>