Component Wizard v1

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

Currently HTML and TailwindCSS code is generated.

Created by Berkay

F.A.Q.

Recent generations

"sidebar "

<div class="flex h-screen bg-gray-100">
    <div class="w-64 bg-white shadow-md">
        <div class="p-4 border-b">
            <h1 class="text-xl font-semibold">Sidebar Title</h1>
        </div>
        <ul class="mt-4">
            <li class="px-4 py-2 hover:bg-gray-200"><a href="#" class="text-gray-700">Dashboard</a></li>
            <li class="px-4 py-2 hover:bg-gray-200"><a href="#" class="text-gray-700">Profile</a></li>
            <li class="px-4 py-2 hover:bg-gray-200"><a href="#" class="text-gray-700">Settings</a></li>
            <li class="px-4 py-2 hover:bg-gray-200"><a href="#" class="text-gray-700">Messages</a></li>
            <li class="px-4 py-2 hover:bg-gray-200"><a href="#" class="text-gray-700">Logout</a></li>
        </ul>
    </div>
    <div class="flex-1 p-6">
        <h2 class="text-2xl font-semibold">Main Content Area</h2>
        <p class="mt-4 text-gray-600">This is the content area where you can display your information.</p>
    </div>
</div>

"a set of sliders with values 0 to 100 where change of any of them proportionally decreases and increases the value of the others so that the total sum is always 100. Use 1 as step. The component will take an array of objects with keys name and value and a function to change the array as props"

<div class="flex flex-col space-y-4">
  <template x-for="(slider, index) in sliders" :key="index">
    <div class="flex items-center">
      <label :for="'slider-' + index" class="mr-2 w-1/3 font-medium" x-text="slider.name"></label>
      <input type="range" :id="'slider-' + index" min="0" max="100" step="1" x-model="slider.value" @input="updateSliders(index)" class="flex-grow" />
      <span class="ml-2 font-bold" x-text="slider.value"></span>
    </div>
  </template>
</div>

<script>
  function slidersComponent() {
    return {
      sliders: [
        { name: 'Slider 1', value: 33 },
        { name: 'Slider 2', value: 33 },
        { name: 'Slider 3', value: 34 },
      ],
      updateSliders(changedIndex) {
        const total = this.sliders.reduce((sum, slider) => sum + slider.value, 0);
        if (total !== 100) {
          const difference = total - 100;

          this.sliders.forEach((slider, index) => {
            if (index !== changedIndex) {
              const newValue = Math.max(0, Math.min(100, slider.value - Math.floor(difference / (this.sliders.length - 1))));
              this.sliders[index].value = newValue;
            }
          });

          this.sliders[changedIndex].value = Math.max(0, Math.min(100, this.sliders[changedIndex].value + difference));
        }
      }
    }
  }
</script>

"Built a fully functional product management tool with a canban board"

<div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <div class="bg-white shadow-md rounded-lg w-full max-w-5xl">
        <div class="p-6 border-b border-gray-200">
            <h1 class="text-2xl font-bold">Product Management Tool</h1>
        </div>
        <div class="flex">
            <div class="w-1/4 p-4 border-r border-gray-200">
                <h2 class="text-lg font-semibold mb-4">To Do</h2>
                <div class="bg-gray-50 rounded-lg p-4 space-y-4">
                    <div class="bg-white p-4 rounded-lg shadow hover:shadow-md">
                        <h3 class="font-semibold">Task 1</h3>
                        <p>Brief description of Task 1</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow hover:shadow-md">
                        <h3 class="font-semibold">Task 2</h3>
                        <p>Brief description of Task 2</p>
                    </div>
                </div>
            </div>
            <div class="w-1/4 p-4 border-r border-gray-200">
                <h2 class="text-lg font-semibold mb-4">In Progress</h2>
                <div class="bg-gray-50 rounded-lg p-4 space-y-4">
                    <div class="bg-white p-4 rounded-lg shadow hover:shadow-md">
                        <h3 class="font-semibold">Task 3</h3>
                        <p>Brief description of Task 3</p>
                    </div>
                </div>
            </div>
            <div class="w-1/4 p-4 border-r border-gray-200">
                <h2 class="text-lg font-semibold mb-4">Review</h2>
                <div class="bg-gray-50 rounded-lg p-4 space-y-4">
                    <div class="bg-white p-4 rounded-lg shadow hover:shadow-md">
                        <h3 class="font-semibold">Task 4</h3>
                        <p>Brief description of Task 4</p>
                    </div>
                </div>
            </div>
            <div class="w-1/4 p-4">
                <h2 class="text-lg font-semibold mb-4">Done</h2>
                <div class="bg-gray-50 rounded-lg p-4 space-y-4">
                    <div class="bg-white p-4 rounded-lg shadow hover:shadow-md">
                        <h3 class="font-semibold">Task 5</h3>
                        <p>Brief description of Task 5</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>