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

"hello world "

<div class="flex items-center justify-center h-screen bg-gray-100">
    <h1 class="text-4xl font-bold text-gray-800">Hello, World!</h1>
</div>

""Form email template for title: '', headerText: '', footerText: '', type: "", otherType: '', sendDate: new Date(), ""

<div class="bg-white shadow-md rounded-lg p-6">
    <h1 class="text-2xl font-bold text-center mb-4">Email Title</h1>
    <div class="mb-4">
        <h2 class="text-xl font-semibold">Header Text</h2>
        <p class="text-gray-700">This is the section for your header text that provides context to the email.</p>
    </div>
    <div class="mb-4">
        <h3 class="text-lg font-medium">Email Content</h3>
        <p class="text-gray-700">This area is designated for the main content of the email. Feel free to elaborate on the purpose and details of the message.</p>
    </div>
    <div class="mb-4">
        <h4 class="text-lg font-medium">Other Type Information</h4>
        <p class="text-gray-700">Any additional information related to the email can be included here.</p>
    </div>
    <div class="text-gray-500 text-sm text-center mt-4">
        <p>Sent on: <span id="sendDate">Send Date Placeholder</span></p>
    </div>
    <footer class="mt-6 border-t pt-4">
        <p class="text-gray-600 text-center">Footer Text</p>
    </footer>
</div>

"build a bottom navigation as like the awwards page "

<div class="fixed bottom-0 left-0 right-0 bg-white shadow-md">
    <nav class="flex justify-around p-4">
        <a href="#" class="flex flex-col items-center text-gray-600 hover:text-blue-500">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 15H7v-2h2v2zm0-3H7V7h2v5zm6 3h-2v-2h2v2zM15 7h-2v5h2V7z"/></svg>
            <span class="text-sm">Home</span>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-600 hover:text-blue-500">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 15H7v-2h2v2zm0-3H7V7h2v5zm6 3h-2v-2h2v2zM15 7h-2v5h2V7z"/></svg>
            <span class="text-sm">Projects</span>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-600 hover:text-blue-500">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 15H7v-2h2v2zm0-3H7V7h2v5zm6 3h-2v-2h2v2zM15 7h-2v5h2V7z"/></svg>
            <span class="text-sm">About</span>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-600 hover:text-blue-500">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 15H7v-2h2v2zm0-3H7V7h2v5zm6 3h-2v-2h2v2zM15 7h-2v5h2V7z"/></svg>
            <span class="text-sm">Contact</span>
        </a>
    </nav>
</div>