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

"I want to make button components with microinteractions "

<button class="bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-200 ease-in-out transform hover:bg-blue-700 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 active:scale-95">
    Click Me
</button>

"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>

"generate an animated switch"

<div class="flex items-center">
    <label for="toggle" class="inline-flex relative items-center cursor-pointer">
        <input type="checkbox" id="toggle" class="sr-only">
        <div class="toggle-bg w-14 h-8 bg-gray-300 rounded-full shadow-inner"></div>
        <div class="dot absolute w-6 h-6 bg-white rounded-full shadow transition-transform duration-200 transform" style="left: 2px;"></div>
    </label>
</div>

<style>
    input:checked + .toggle-bg {
        background-color: #4CAF50;
    }
    input:checked + .toggle-bg .dot {
        transform: translateX(100%);
    }
</style>