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

"make it hero section with amazing desain for SaaS project "

<div class="bg-blue-600 py-20">
    <div class="container mx-auto text-center">
        <h1 class="text-5xl font-bold text-white mb-4">Elevate Your Business</h1>
        <p class="text-xl text-blue-200 mb-8">Transform your workflow with our powerful SaaS solutions designed for efficiency and growth.</p>
        <a href="#pricing" class="bg-white text-blue-600 hover:bg-blue-200 transition duration-300 font-semibold py-3 px-6 rounded-full">Get Started</a>
    </div>
</div>

"button with gradient and wavy form"

<button class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-white font-bold py-2 px-4 rounded-lg transform transition-all duration-300 hover:scale-105 hover:shadow-lg">
    Click Me
</button>

"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 id="app" class="p-6">
  <div class="grid grid-cols-1 gap-4">
    <template v-for="(slider, index) in sliders">
      <div class="flex items-center">
        <label :for="`slider-${index}`" class="mr-4 font-medium">{{ slider.name }} ({{ slider.value }})</label>
        <input type="range" 
               :id="`slider-${index}`" 
               v-model="slider.value" 
               @input="updateSliders(index)" 
               min="0" 
               max="100" 
               step="1" 
               class="w-full" />
      </div>
    </template>
  </div>
</div>

<script>
export default {
  props: {
    sliders: {
      type: Array,
      required: true
    },
    updateArray: {
      type: Function,
      required: true
    }
  },
  methods: {
    updateSliders(changedIndex) {
      const total = this.sliders.reduce((sum, slider) => sum + slider.value, 0);
      const diff = total - 100;

      if (diff > 0) {
        let adjustment = diff / (this.sliders.length - 1);
        this.sliders.forEach((slider, index) => {
          if (index !== changedIndex) {
            slider.value = Math.max(0, slider.value - adjustment);
          }
        });
      }

      this.updateArray(this.sliders);
    }
  }
}
</script>