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

"gallery slider "

<div class="relative w-full max-w-xl mx-auto">
    <div class="flex overflow-hidden">
        <div class="min-w-full transition-transform duration-500 ease-in-out transform -translate-x-0">
            <img src="image1.jpg" alt="Image 1" class="w-full h-auto">
        </div>
        <div class="min-w-full transition-transform duration-500 ease-in-out transform -translate-x-0">
            <img src="image2.jpg" alt="Image 2" class="w-full h-auto">
        </div>
        <div class="min-w-full transition-transform duration-500 ease-in-out transform -translate-x-0">
            <img src="image3.jpg" alt="Image 3" class="w-full h-auto">
        </div>
    </div>
    <button class="absolute top-1/2 left-2 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2">
        &#10094;
    </button>
    <button class="absolute top-1/2 right-2 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2">
        &#10095;
    </button>
</div>

"a widget for windows computer that shows files lately used, I mean a application or something else that i can use truely, not a html code just for show "

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Recent Files</div>
      <ul class="mt-2 text-gray-500">
        <li class="py-2 border-b">File 1.txt</li>
        <li class="py-2 border-b">Presentation.pptx</li>
        <li class="py-2 border-b">Image.png</li>
        <li class="py-2 border-b">Document.docx</li>
        <li class="py-2">Spreadsheet.xlsx</li>
      </ul>
    </div>
  </div>
</div>

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