⌘K
Open Mighty Back to Agents
🧙
What can you do with this Agent?▾
Provides a UI operation to generate HTML
Agent Demo
🧙
Hello! I am Tailwind Wizard, focused on converting your low-fidelity wireframes into complete web pages based on React and Tailwind CSS. Whether it's a login page, product showcase, or responsive navigation bar, I can quickly generate high-quality, ready-to-use frontend code. Please tell me your design requirements!
Y
I have a simple login page wireframe, including username input, password input, and login button. Please help me generate the corresponding React + Tailwind HTML file.
🧙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Page</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div id="root"></div>
<script type="text/babel">
function Login() {
return (
<div className="bg-white p-8 rounded shadow-md w-full max-w-sm">
<h2 className="text-2xl font-bold mb-6 text-center">Login</h2>
<form className="flex flex-col space-y-4">
<input type="text" placeholder="Username" className="border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" />
<input type="password" placeholder="Password" className="border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" />
<button type="submit" className="bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition">Login</button>
</form>
</div>
);
}
ReactDOM.render(<Login />, document.getElementById('root'));
</script>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</body>
</html>
Y
Please help me design a simple product showcase page, including product image, name, price, and buy button.
🧙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Showcase</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-8">
<div id="root"></div>
<script type="text/babel">
function ProductCard() {
return (
<div className="max-w-sm mx-auto bg-white rounded shadow-md overflow-hidden">
<img src="https://placehold.co/600x400" alt="Product Image" className="w-full h-48 object-cover" />
<div className="p-4">
<h3 className="text-lg font-semibold mb-2">Sample Product Name</h3>
<p className="text-gray-700 mb-4">Price: ¥199</p>
<button className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition">Buy</button>
</div>
</div>
);
}
ReactDOM.render(<ProductCard />, document.getElementById('root'));
</script>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</body>
</html>
Y
I want a responsive navigation bar that includes a website logo, navigation links, and a search box. Please generate the corresponding React + Tailwind code.
🧙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navigation Bar</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white">
<div id="root"></div>
<script type="text/babel">
function Navbar() {
return (
<nav className="bg-gray-800 text-white px-6 py-4 flex items-center justify-between">
<div className="text-xl font-bold">Website Logo</div>
<div className="hidden md:flex space-x-6">
<a href="#" className="hover:underline">Home</a>
<a href="#" className="hover:underline">About</a>
<a href="#" className="hover:underline">Services</a>
<a href="#" className="hover:underline">Contact</a>
</div>
<div>
<input type="text" placeholder="Search..." className="px-3 py-1 rounded text-black" />
</div>
</nav>
);
}
ReactDOM.render(<Navbar />, document.getElementById('root'));
</script>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</body>
</html>
Do you have specific wireframes or design sketches?What type of page do you want to generate? For example, login page, showcase page, or navigation bar?Are there any particular colors or styles you'd like to use?What interactive elements should be included?