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

"build a bottom navbar containing 3 icons with text at the bottom. the bottom navbar should be 40% of the width. the bottom navbar should be at the bottom of the page. when the mouse is over an icon or over a text, the icon and the text should change color. the active icon and text should be of diffe"

<div class="fixed bottom-0 left-1/2 transform -translate-x-1/2 w-2/5 bg-white shadow-lg rounded-t-lg">
    <div class="flex justify-around items-center p-4">
        <div class="flex flex-col items-center">
            <svg class="w-6 h-6 text-gray-500 hover:text-blue-500 transition duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            <span class="text-gray-500 hover:text-blue-500 transition duration-200">Item 1</span>
        </div>
        <div class="flex flex-col items-center">
            <svg class="w-6 h-6 text-gray-500 hover:text-blue-500 transition duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2a10 10 0 00-10 10h20A10 10 0 0012 2z" />
            </svg>
            <span class="text-gray-500 hover:text-blue-500 transition duration-200">Item 2</span>
        </div>
        <div class="flex flex-col items-center">
            <svg class="w-6 h-6 text-gray-500 hover:text-blue-500 transition duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h18v18H3V3z" />
            </svg>
            <span class="text-gray-500 hover:text-blue-500 transition duration-200">Item 3</span>
        </div>
    </div>
</div>

"Write a chat app"

<div class="flex flex-col h-screen bg-gray-100">
    <div class="flex items-center justify-between p-4 bg-blue-600 text-white">
        <h1 class="text-lg font-bold">Chat App</h1>
        <button class="bg-blue-800 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded">Logout</button>
    </div>
    <div class="flex-grow overflow-auto p-4">
        <div class="bg-white rounded-lg shadow-md p-4 mb-4">
            <div class="flex items-center mb-2">
                <img src="https://via.placeholder.com/40" alt="User" class="rounded-full mr-2"/>
                <span class="font-semibold">User 1</span>
            </div>
            <p class="text-gray-700">Hello! How are you today?</p>
        </div>
        <div class="bg-white rounded-lg shadow-md p-4 mb-4">
            <div class="flex items-center mb-2">
                <img src="https://via.placeholder.com/40" alt="User" class="rounded-full mr-2"/>
                <span class="font-semibold">User 2</span>
            </div>
            <p class="text-gray-700">I'm good, thanks! And you?</p>
        </div>
        <!-- More chat messages here -->
    </div>
    <div class="p-4 bg-gray-200">
        <input type="text" placeholder="Type your message..." class="w-full p-2 border border-gray-300 rounded"/>
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded mt-2">Send</button>
    </div>
</div>

"Header with, text, from and to gradient colors, size and weight props"

<div class="bg-gradient-to-r from-blue-500 to-purple-600 p-4">
    <h1 class="text-4xl font-bold text-white">Header Title</h1>
    <p class="text-lg font-medium text-white">Subtitle or additional text here</p>
</div>