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

"agenda with multiple days x axis. Listed by hours y axis. the entries should be displayd as cards "

<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">Agenda</h1>
    <div class="grid grid-cols-7 gap-4">
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Monday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">9:00 AM - Meeting</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">11:00 AM - Conference Call</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">1:00 PM - Lunch Break</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">3:00 PM - Project Update</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Tuesday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">10:00 AM - Team Meeting</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">12:00 PM - Client Review</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">2:00 PM - Training Session</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Wednesday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">9:30 AM - Workshop</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">1:30 PM - Strategy Planning</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Thursday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">11:00 AM - Design Review</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">3:00 PM - Development Sync</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Friday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">10:30 AM - Code Review</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">2:00 PM - End of Week Wrap-Up</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Saturday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">No Events</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Sunday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">No Events</div>
            </div>
        </div>
    </div>
</div>

"Download button "

<button class="px-4 py-2 bg-blue-500 text-white font-semibold rounded hover:bg-blue-600">
    Download
</button>

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