生成应用工具

import React from 'react';

const App = () => {
  return (
    <div className="min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 text-white">
      <header className="p-6 bg-black bg-opacity-20">
        <h1 className="text-4xl font-bold">Welcome to My React App</h1>
      </header>
      <main className="p-6">
        <section className="mb-8">
          <h2 className="text-3xl font-semibold mb-4">About Us</h2>
          <p className="text-lg">We are a team of passionate developers creating amazing web applications.</p>
        </section>
        <section className="mb-8">
          <h2 className="text-3xl font-semibold mb-4">Our Services</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white bg-opacity-10 p-6 rounded-lg">
              <h3 className="text-2xl font-semibold mb-2">Web Development</h3>
              <p className="text-lg">We build responsive and user-friendly websites.</p>
            </div>
            <div className="bg-white bg-opacity-10 p-6 rounded-lg">
              <h3 className="text-2xl font-semibold mb-2">Mobile Apps</h3>
              <p className="text-lg">We create cross-platform mobile applications.</p>
            </div>
            <div className="bg-white bg-opacity-10 p-6 rounded-lg">
              <h3 className="text-2xl font-semibold mb-2">UI/UX Design</h3>
              <p className="text-lg">We design beautiful and intuitive user interfaces.</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-3xl font-semibold mb-4">Our Portfolio</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white bg-opacity-10 p-6 rounded-lg">
              <img src="https://placehold.co/300x200" alt="Project 1" className="mb-4 rounded-lg" />
              <h3 className="text-2xl font-semibold mb-2">Project 1</h3>
              <p className="text-lg">A modern e-commerce platform.</p>
            </div>
            <div className="bg-white bg-opacity-10 p-6 rounded-lg">
              <img src="https://placehold.co/300x200" alt="Project 2" className="mb-4 rounded-lg" />
              <h3 className="text-2xl font-semibold mb-2">Project 2</h3>
              <p className="text-lg">A social media app for creatives.</p>
            </div>
            <div className="bg-white bg-opacity-10 p-6 rounded-lg">
              <img src="https://placehold.co/300x200" alt="Project 3" className="mb-4 rounded-lg" />
              <h3 className="text-2xl font-semibold mb-2">Project 3</h3>
              <p className="text-lg">A fitness tracking application.</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-3xl font-semibold mb-4">Our Team</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white bg-opacity-10 p-6 rounded-lg">
              <img src="https://placehold.co/200x200" alt="Team Member 1" className="mb-4 rounded-full" />
              <h3 className="text-2xl font-semibold mb-2">John Doe</h3>
              <p className="text-lg">Lead Developer</p>
            </div>
            <div className="bg-white bg-opacity-10 p-6 rounded-lg">
              <img src="https://placehold.co/200x200" alt="Team Member 2" className="mb-4 rounded-full" />
              <h3 className="text-2xl font-semibold mb-2">Jane Smith</h3>
              <p className="text-lg">UI/UX Designer</p>
            </div>
            <div className="bg-white bg-opacity-10 p-6 rounded-lg">
              <img src="https://placehold.co/200x200" alt="Team Member 3" className="mb-4 rounded-full" />
              <h3 className="text-2xl font-semibold mb-2">Mike Johnson</h3>
              <p className="text-lg">Mobile Developer</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-3xl font-semibold mb-4">Contact Us</h2>
          <form className="bg-white bg-opacity-10 p-6 rounded-lg">
            <div className="mb-4">
              <label className="block text-lg mb-2">Name</label>
              <input type="text" className="w-full p-2 rounded-lg text-black" />
            </div>
            <div className="mb-4">
              <label className="block text-lg mb-2">Email</label>
              <input type="email" className="w-full p-2 rounded-lg text-black" />
            </div>
            <div className="mb-4">
              <label className="block text-lg mb-2">Message</label>
              <textarea className="w-full p-2 rounded-lg text-black" rows="4"></textarea>
            </div>
            <button type="submit" className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">Send</button>
          </form>
        </section>
      </main>
      <footer className="p-6 bg-black bg-opacity-20">
        <p className="text-center text-lg">© 2025 My React App. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;