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

"Button with Rainbow effect "

<button class="relative inline-flex items-center justify-center p-4 overflow-hidden font-medium text-white transition-all bg-transparent border-2 border-white rounded-md group">
    <span class="absolute inset-0 w-full h-full transition-transform transform scale-110 bg-gradient-to-r from-red-400 to-purple-500 group-hover:scale-125"></span>
    <span class="relative z-10">Click Me</span>
</button>

"A horizontal step indicator that makes progress by clicking a button"

<div class="flex flex-col items-center">
    <div class="flex space-x-4 mb-4">
        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white">
            1
        </div>
        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 text-gray-700">
            2
        </div>
        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 text-gray-700">
            3
        </div>
    </div>
    <button id="nextButton" class="px-4 py-2 bg-blue-600 text-white rounded shadow hover:bg-blue-700">
        Next Step
    </button>
</div>

<script>
    let currentStep = 0;
    const steps = document.querySelectorAll('.flex .w-10');
    const nextButton = document.getElementById('nextButton');

    nextButton.addEventListener('click', () => {
        if (currentStep < steps.length - 1) {
            steps[currentStep].classList.remove('bg-blue-500', 'text-white');
            steps[currentStep].classList.add('bg-gray-300', 'text-gray-700');

            currentStep++;
            steps[currentStep].classList.remove('bg-gray-300', 'text-gray-700');
            steps[currentStep].classList.add('bg-blue-500', 'text-white');
        }
    });
</script>

"react component for calculator app "

<div class="max-w-sm mx-auto mt-10 p-6 bg-white rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-center">Calculator</h2>
    <div class="mt-4">
        <input type="text" class="w-full p-2 border rounded" placeholder="0" readonly />
    </div>
    <div class="grid grid-cols-4 gap-4 mt-4">
        <button class="p-4 bg-blue-500 text-white rounded">7</button>
        <button class="p-4 bg-blue-500 text-white rounded">8</button>
        <button class="p-4 bg-blue-500 text-white rounded">9</button>
        <button class="p-4 bg-orange-500 text-white rounded">/</button>
        <button class="p-4 bg-blue-500 text-white rounded">4</button>
        <button class="p-4 bg-blue-500 text-white rounded">5</button>
        <button class="p-4 bg-blue-500 text-white rounded">6</button>
        <button class="p-4 bg-orange-500 text-white rounded">*</button>
        <button class="p-4 bg-blue-500 text-white rounded">1</button>
        <button class="p-4 bg-blue-500 text-white rounded">2</button>
        <button class="p-4 bg-blue-500 text-white rounded">3</button>
        <button class="p-4 bg-orange-500 text-white rounded">-</button>
        <button class="p-4 bg-blue-500 text-white rounded col-span-2">0</button>
        <button class="p-4 bg-blue-500 text-white rounded">.</button>
        <button class="p-4 bg-orange-500 text-white rounded">+</button>
        <button class="p-4 bg-green-500 text-white rounded col-span-4">=</button>
    </div>
</div>