Component Wizard v1

<div class="flex justify-between items-center p-4 border-b">
    <h1 class="text-2xl font-bold">Your Title Here</h1>
    <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Save</button>
</div>
<div class="p-4">
    <p class="text-gray-700">Your description goes here. It provides additional information about the content.</p>
</div>

<div class="bg-white p-8 md:p-16">
  <div class="max-w-5xl mx-auto text-center">
    <h1 class="text-4xl font-bold text-gray-800 mb-4">Introducing API Frenzy</h1>
    <p class="text-lg text-gray-600 mb-8">Revolutionize your development process with our powerful and efficient API solutions.</p>
    <a href="#get-started" class="bg-blue-600 text-white px-6 py-3 rounded-lg shadow-md hover:bg-blue-700 transition duration-300">Get Started</a>
  </div>
  <div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-12">
    <div class="bg-gray-100 p-6 rounded-lg shadow-lg">
      <h2 class="text-xl font-semibold text-gray-800 mb-2">Why Choose API Frenzy?</h2>
      <p class="text-gray-600 mb-4">Our APIs are designed to be intuitive and powerful, enabling you to build robust applications in record time. With seamless integration and excellent documentation, you can focus on innovation.</p>
      <ul class="list-disc list-inside text-gray-600">
        <li>High performance and reliability</li>
        <li>Comprehensive support and resources</li>
        <li>Flexible pricing plans</li>
      </ul>
    </div>
    <div class="bg-gray-100 p-6 rounded-lg shadow-lg">
      <h2 class="text-xl font-semibold text-gray-800 mb-2">Features</h2>
      <p class="text-gray-600 mb-4">Explore our rich feature set that empowers developers:</p>
      <ul class="list-disc list-inside text-gray-600">
        <li>Real-time data access</li>
        <li>Customizable endpoints</li>
        <li>Security and compliance</li>
      </ul>
    </div>
  </div>
  <div class="mt-12 text-center" id="get-started">
    <h2 class="text-3xl font-semibold text-gray-800 mb-4">Get Started Today!</h2>
    <p class="text-lg text-gray-600 mb-6">Join thousands of satisfied developers who trust API Frenzy for their applications. Sign up now and take your project to the next level!</p>
    <a href="#" class="bg-blue-600 text-white px-8 py-4 rounded-lg shadow-md hover:bg-blue-700 transition duration-300">Sign Up Now</a>
  </div>
</div>

<div class="flex">
    <div class="w-64 h-screen bg-gray-800 text-white">
        <div class="p-4">
            <h1 class="text-lg font-semibold">Sidebar Title</h1>
        </div>
        <ul class="mt-4">
            <li class="hover:bg-gray-700 p-3">
                <a href="#" class="block">Dashboard</a>
            </li>
            <li class="hover:bg-gray-700 p-3">
                <a href="#" class="block">Profile</a>
            </li>
            <li class="hover:bg-gray-700 p-3">
                <a href="#" class="block">Settings</a>
            </li>
            <li class="hover:bg-gray-700 p-3">
                <a href="#" class="block">Logout</a>
            </li>
        </ul>
    </div>
    <div class="flex-1 p-4">
        <h2 class="text-2xl font-semibold">Main Content Area</h2>
        <p>Your content goes here...</p>
    </div>
</div>