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

"create a card including title, sub title, rating, description beautify for blockchain web3"

<div class="max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
    <div class="p-5">
        <h2 class="text-xl font-semibold text-gray-800">Blockchain Innovator</h2>
        <h3 class="text-gray-600">Empowering Decentralized Solutions</h3>
        <div class="flex items-center mt-2">
            <span class="text-yellow-500">★★★★☆</span>
            <span class="text-gray-500 ml-2">(4.0)</span>
        </div>
        <p class="mt-4 text-gray-700">
            Discover cutting-edge blockchain solutions that revolutionize industries. Join us and be a part of the Web3 revolution, where transparency and security are key.
        </p>
    </div>
    <div class="p-5 border-t">
        <a href="#" class="text-blue-500 hover:underline">Learn More</a>
    </div>
</div>

"i need a checkbox for react native"

<div className="flex items-center">
  <input type="checkbox" id="checkbox" className="form-checkbox h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" />
  <label htmlFor="checkbox" className="ml-2 text-sm text-gray-700">Accept Terms and Conditions</label>
</div>

"code"

<div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <div class="bg-white rounded-lg shadow-lg p-6 w-96">
        <h2 class="text-2xl font-bold mb-4">Welcome to Our Service</h2>
        <p class="text-gray-600 mb-4">Experience the best solutions tailored for your needs.</p>
        <a href="#" class="block bg-blue-500 text-white text-center py-2 rounded hover:bg-blue-600 transition">Get Started</a>
    </div>
</div>