Component Wizard

https://componentwizard.com/ • Aug 10, 2024 22:58

Extracto

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

Contenido

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

Currently HTML and TailwindCSS code is generated.

Recent generations

"Block of text with fancy design"

<div class="bg-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">Welcome to Our Service</h2>
    <p class="text-gray-700 mb-4">
        We are dedicated to providing you with the best experience possible. Our team is here to support you
        every step of the way. Join us as we explore innovative solutions tailored just for you.
    </p>
    <p class="text-gray-600">
        Learn more about what we offer and how we can help you achieve your goals!
    </p>
</div>

"I need a scrollable container that contains buttons. this section has a title called Datasets. Under this section there will be 2 buttons. One for creating dataset with title Create Dataset the other might be anything with green background"

<div class="p-4">
    <h2 class="text-2xl font-bold mb-4">Datasets</h2>
    <div class="overflow-y-auto h-32 border border-gray-300 rounded-lg p-4">
        <button class="bg-blue-500 text-white py-2 px-4 rounded mb-2">Create Dataset</button>
        <button class="bg-green-500 text-white py-2 px-4 rounded">Another Action</button>
    </div>
</div>

"a text edtior"

<div class="max-w-2xl mx-auto p-4 bg-white shadow-md rounded-lg">
    <h2 class="text-2xl font-bold mb-4">Text Editor</h2>
    <textarea class="w-full h-64 p-2 border border-gray-300 rounded-md" placeholder="Type your text here..."></textarea>
    <div class="mt-4">
        <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Save</button>
        <button class="ml-2 px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400">Clear</button>
    </div>
</div>