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

"Create unique cards creatively and professional which has the information with the title and github and live link at the bottom of the cards with the proper hover effects and impressive colors. It is responsive for all smaller screens. "

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
    <div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
        <div class="p-6">
            <h2 class="text-2xl font-bold mb-2 text-gray-800">Project Title 1</h2>
            <p class="text-gray-600 mb-4">A brief description of the project showcasing its main features and technologies used.</p>
        </div>
        <div class="flex justify-between p-4 bg-gray-100">
            <a href="https://github.com/your-repo-1" class="text-blue-500 hover:text-blue-700 font-semibold">GitHub</a>
            <a href="https://live-link-1.com" class="text-blue-500 hover:text-blue-700 font-semibold">Live Demo</a>
        </div>
    </div>
  
    <div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
        <div class="p-6">
            <h2 class="text-2xl font-bold mb-2 text-gray-800">Project Title 2</h2>
            <p class="text-gray-600 mb-4">A brief description of the project showcasing its main features and technologies used.</p>
        </div>
        <div class="flex justify-between p-4 bg-gray-100">
            <a href="https://github.com/your-repo-2" class="text-blue-500 hover:text-blue-700 font-semibold">GitHub</a>
            <a href="https://live-link-2.com" class="text-blue-500 hover:text-blue-700 font-semibold">Live Demo</a>
        </div>
    </div>
  
    <div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
        <div class="p-6">
            <h2 class="text-2xl font-bold mb-2 text-gray-800">Project Title 3</h2>
            <p class="text-gray-600 mb-4">A brief description of the project showcasing its main features and technologies used.</p>
        </div>
        <div class="flex justify-between p-4 bg-gray-100">
            <a href="https://github.com/your-repo-3" class="text-blue-500 hover:text-blue-700 font-semibold">GitHub</a>
            <a href="https://live-link-3.com" class="text-blue-500 hover:text-blue-700 font-semibold">Live Demo</a>
        </div>
    </div>
</div>

"list of food for restaurant order "

<div class="max-w-md mx-auto bg-white shadow-md rounded-lg overflow-hidden">
    <div class="p-5">
        <h2 class="text-xl font-bold mb-4">Restaurant Menu</h2>
        <ul class="space-y-3">
            <li class="flex justify-between p-2 border-b">
                <span class="font-semibold">Margherita Pizza</span>
                <span class="text-gray-600">$12.99</span>
            </li>
            <li class="flex justify-between p-2 border-b">
                <span class="font-semibold">Caesar Salad</span>
                <span class="text-gray-600">$9.99</span>
            </li>
            <li class="flex justify-between p-2 border-b">
                <span class="font-semibold">Grilled Salmon</span>
                <span class="text-gray-600">$18.99</span>
            </li>
            <li class="flex justify-between p-2 border-b">
                <span class="font-semibold">Spaghetti Carbonara</span>
                <span class="text-gray-600">$14.99</span>
            </li>
            <li class="flex justify-between p-2 border-b">
                <span class="font-semibold">Chocolate Cake</span>
                <span class="text-gray-600">$6.99</span>
            </li>
            <li class="flex justify-between p-2 border-b">
                <span class="font-semibold">Lemonade</span>
                <span class="text-gray-600">$3.99</span>
            </li>
        </ul>
    </div>
</div>

"geomap indicating activities "

<div class="bg-white shadow-md rounded-lg p-6">
    <h2 class="text-xl font-semibold mb-4">Activity Geomap</h2>
    <div class="relative h-60">
        <img src="your-geomap-image-url.jpg" alt="Activity Geomap" class="w-full h-full object-cover rounded-lg">
        <div class="absolute bottom-0 left-0 p-4">
            <span class="bg-gray-800 text-white text-sm px-2 py-1 rounded">Active Areas</span>
        </div>
    </div>
    <div class="mt-4">
        <p class="text-gray-700">Explore the regions where activities are taking place. Hover over the map for more details.</p>
    </div>
</div>