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
"Generate css for a modern menu bar with centered logo and services, about, contact"
<div class="bg-gray-800 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="text-white text-2xl font-bold">Logo</div>
        <nav class="flex space-x-4">
            <a href="#services" class="text-white hover:text-gray-300">Services</a>
            <a href="#about" class="text-white hover:text-gray-300">About</a>
            <a href="#contact" class="text-white hover:text-gray-300">Contact</a>
        </nav>
    </div>
</div>
"shopping card "
<div class="max-w-lg mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
    <div class="p-6">
        <h2 class="text-2xl font-bold mb-4">Shopping Cart</h2>
        <ul>
            <li class="flex justify-between items-center py-2 border-b">
                <span>Product Name 1</span>
                <span>$25.00</span>
            </li>
            <li class="flex justify-between items-center py-2 border-b">
                <span>Product Name 2</span>
                <span>$15.00</span>
            </li>
            <li class="flex justify-between items-center py-2 border-b">
                <span>Product Name 3</span>
                <span>$10.00</span>
            </li>
        </ul>
        <div class="flex justify-between items-center mt-4">
            <span class="font-bold">Total:</span>
            <span class="font-bold">$50.00</span>
        </div>
        <button class="mt-4 w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition">Checkout</button>
    </div>
</div>
"create a card including title, sub title, rating, description, datetime beautify for blockchain web3"
<div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow-md overflow-hidden">
    <div class="p-5">
        <h2 class="text-lg font-semibold text-gray-800">Card Title</h2>
        <h3 class="text-md font-medium text-gray-600">Card Subtitle</h3>
        <div class="flex items-center mt-2">
            <span class="text-yellow-500">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
            <span class="text-gray-500 ml-2">(4.0)</span>
        </div>
        <p class="mt-3 text-gray-700">
            This is a brief description of the card content related to blockchain and web3 technology. It provides insights and information that adds value to the reader.
        </p>
        <p class="mt-2 text-gray-500 text-sm">Posted on: <time datetime="2023-10-01">October 1, 2023</time></p>
    </div>
</div>