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-white shadow-md">
    <div class="flex justify-between items-center max-w-6xl mx-auto p-4">
        <div class="flex items-center">
            <img src="logo.png" alt="Logo" class="h-10">
        </div>
        <nav class="space-x-4">
            <a href="#services" class="text-gray-700 hover:text-blue-500">Services</a>
            <a href="#about" class="text-gray-700 hover:text-blue-500">About</a>
            <a href="#contact" class="text-gray-700 hover:text-blue-500">Contact</a>
        </nav>
    </div>
</div>

"reusable card component with image and text the alignment should be left and dynamic class "

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full h-48 object-cover" src="your-image-url.jpg" alt="Image Description">
  <div class="p-4">
    <h2 class="font-bold text-xl mb-2">Card Title</h2>
    <p class="text-gray-700 text-base">This is some dynamic text that describes the content of the card. Feel free to customize it based on your needs.</p>
  </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>