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