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 "
<div class="fixed bottom-0 left-1/2 transform -translate-x-1/2 w-2/5 bg-white shadow-lg rounded-t-lg p-2 flex justify-around items-center">
    <div class="flex flex-col items-center">
        <svg class="w-6 h-6 mb-1 text-gray-600" 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 3h18M3 12h18m-7 9h7M3 12l4-4m0 4l4 4" /></svg>
        <span class="text-sm text-gray-600">Home</span>
    </div>
    <div class="flex flex-col items-center">
        <svg class="w-6 h-6 mb-1 text-gray-600" 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 8v4l3 3m5-12h-2a2 2 0 00-2 2v2a2 2 0 002 2h2m-6 10H8a2 2 0 01-2-2v-2a2 2 0 012-2h2m6 0h2m-2 0V8m0 4h-2" /></svg>
        <span class="text-sm text-gray-600">Search</span>
    </div>
    <div class="flex flex-col items-center">
        <svg class="w-6 h-6 mb-1 text-gray-600" 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-sm text-gray-600">Profile</span>
    </div>
</div>
"i need a dashboard card component that shows a numeric statistic, title and icon "
<div class="bg-white shadow-md rounded-lg p-6 flex items-center">
    <div class="flex-shrink-0">
        <svg class="h-10 w-10 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2a8 8 0 1 0 8 8A8.001 8.001 0 0 0 10 2zm0 14a6 6 0 1 1 6-6 6.007 6.007 0 0 1-6 6z"/>
        </svg>
    </div>
    <div class="ml-4">
        <h2 class="text-2xl font-semibold text-gray-800">Statistic Title</h2>
        <p class="text-3xl font-bold text-gray-900">123</p>
    </div>
</div>
"button"
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700">
  Click Me
</button>