创建名片网站

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="flex flex-col min-h-screen bg-gray-100">
      <header className="bg-blue-600 text-white p-6 text-center">
        <h1 className="text-4xl font-bold">Your Name</h1>
        <p className="text-xl">Professional Title</p>
      </header>
      <main className="flex-1 container mx-auto p-6">
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">About Me</h2>
          <p className="text-gray-700">A brief introduction about yourself and your professional background.</p>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Portfolio</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300X200" alt="Project 1" className="w-full h-auto rounded-md"/>
              <h3 className="text-xl font-semibold mt-2">Project 1</h3>
              <p className="text-gray-600">Description of the project.</p>
            </div>
            {/* Repeat similar blocks for other projects */}
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Skills</h2>
          <div className="flex flex-wrap gap-2">
            <span className="bg-blue-200 text-blue-800 px-3 py-1 rounded-full">HTML</span>
            <span className="bg-blue-200 text-blue-800 px-3 py-1 rounded-full">CSS</span>
            <span className="bg-blue-200 text-blue-800 px-3 py-1 rounded-full">JavaScript</span>
            {/* Add more skills as needed */}
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Contact</h2>
          <form className="bg-white p-6 shadow-lg rounded-lg">
            <input type="text" placeholder="Your Name" className="w-full p-2 mb-4 border rounded-md"/>
            <input type="email" placeholder="Your Email" className="w-full p-2 mb-4 border rounded-md"/>
            <textarea placeholder="Your Message" className="w-full p-2 mb-4 border rounded-md h-32"></textarea>
            <button type="submit" className="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700">Send</button>
          </form>
        </section>
      </main>
      <footer className="bg-gray-800 text-white text-center p-4">
        <p>© 2025 Your Name. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;