类似Facebook

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

const App = () => {
  return (
    <div className="App">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-3xl font-bold">Social Network</h1>
      </header>
      <nav className="bg-gray-800 text-white p-2">
        <ul className="flex space-x-4">
          <li>Home</li>
          <li>Profile</li>
          <li>Messages</li>
          <li>Friends</li>
        </ul>
      </nav>
      <main className="p-4">
        <section className="mb-4">
          <h2 className="text-2xl font-semibold">News Feed</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="Placeholder" className="w-full h-auto rounded-md" />
              <p className="mt-2 text-gray-700">This is a sample post.</p>
            </div>
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/300x200" alt="Placeholder" className="w-full h-auto rounded-md" />
              <p className="mt-2 text-gray-700">This is another sample post.</p>
            </div>
          </div>
        </section>
        <section className="mb-4">
          <h2 className="text-2xl font-semibold">Friends</h2>
          <div className="flex space-x-4">
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/100x100" alt="Friend" className="w-24 h-24 rounded-full" />
              <p className="mt-2 text-center text-gray-700">Friend 1</p>
            </div>
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <img src="https://placehold.co/100x100" alt="Friend" className="w-24 h-24 rounded-full" />
              <p className="mt-2 text-center text-gray-700">Friend 2</p>
            </div>
          </div>
        </section>
      </main>
      <footer className="bg-gray-800 text-white p-4">
        <p>© 2025 Social Network. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;