Component Wizard v1

Write your component requirements, and I'll give you the code.

Currently HTML and TailwindCSS code is generated.

Created by Berkay

Recent generations
"a widget for windows computer that shows files lately used "
<div class="bg-white shadow-md rounded-lg p-6 max-w-md mx-auto">
    <h2 class="text-xl font-semibold mb-4">Recent Files</h2>
    <ul class="space-y-2">
        <li class="flex items-center justify-between p-3 bg-gray-100 rounded hover:bg-gray-200">
            <span class="text-gray-800">Document1.pdf</span>
            <span class="text-gray-600">12:45 PM</span>
        </li>
        <li class="flex items-center justify-between p-3 bg-gray-100 rounded hover:bg-gray-200">
            <span class="text-gray-800">Presentation.pptx</span>
            <span class="text-gray-600">11:30 AM</span>
        </li>
        <li class="flex items-center justify-between p-3 bg-gray-100 rounded hover:bg-gray-200">
            <span class="text-gray-800">Spreadsheet.xlsx</span>
            <span class="text-gray-600">10:15 AM</span>
        </li>
        <li class="flex items-center justify-between p-3 bg-gray-100 rounded hover:bg-gray-200">
            <span class="text-gray-800">Image1.png</span>
            <span class="text-gray-600">09:50 AM</span>
        </li>
        <li class="flex items-center justify-between p-3 bg-gray-100 rounded hover:bg-gray-200">
            <span class="text-gray-800">Notes.txt</span>
            <span class="text-gray-600">08:30 AM</span>
        </li>
    </ul>
</div>
"create a card including title, sub title, rating, description beautify for blockchain web3"
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
    <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">Blockchain Project Title</div>
        <div class="font-semibold text-gray-700 mb-2">Subtitle for the Project</div>
        <div class="flex items-center mb-4">
            <span class="text-yellow-500 mr-1"></span>
            <span class="text-yellow-500 mr-1"></span>
            <span class="text-yellow-500 mr-1"></span>
            <span class="text-yellow-500 mr-1"></span>
            <span class="text-gray-400"></span>
        </div>
        <p class="text-gray-700 text-base">
            This is an overview of the blockchain project, detailing its unique features, use cases, and the potential impact it aims to have in the Web3 ecosystem.
        </p>
    </div>
    <div class="px-6 pt-4 pb-2">
        <span class="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-blue-700 mr-2 mb-2">Blockchain</span>
        <span class="inline-block bg-green-200 rounded-full px-3 py-1 text-sm font-semibold text-green-700 mr-2 mb-2">Web3</span>
    </div>
</div>
"business website "
<div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <div class="max-w-4xl mx-auto p-8 bg-white shadow-lg rounded-lg">
        <h1 class="text-3xl font-bold text-center mb-4">Welcome to Our Business</h1>
        <p class="text-center text-gray-700 mb-6">Your success is our priority. We provide innovative solutions tailored to your needs.</p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="p-4 bg-gray-50 rounded-lg shadow">
                <h2 class="text-xl font-semibold">Our Services</h2>
                <ul class="list-disc list-inside mt-2">
                    <li>Consulting</li>
                    <li>Marketing Solutions</li>
                    <li>Financial Advice</li>
                </ul>
            </div>
            <div class="p-4 bg-gray-50 rounded-lg shadow">
                <h2 class="text-xl font-semibold">Contact Us</h2>
                <p class="mt-2">Email: info@business.com</p>
                <p>Phone: (123) 456-7890</p>
            </div>
        </div>
        <div class="text-center mt-6">
            <a href="#" class="inline-block px-6 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">Learn More</a>
        </div>
    </div>
</div>