创建Web应用指南

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

const App = () => {
  return (
    <div className="App bg-gray-100 min-h-screen">
      <header className="bg-blue-600 text-white p-6">
        <h1 className="text-4xl font-bold">Histoire de l'Informatique</h1>
      </header>
      <nav className="bg-gray-800 text-white p-4">
        <ul className="flex space-x-4">
          <li><a href="#introduction" className="hover:text-blue-400">Introduction</a></li>
          <li><a href="#origins" className="hover:text-blue-400">Origines</a></li>
          <li><a href="#evolution" className="hover:text-blue-400">Évolution</a></li>
          <li><a href="#modern-era" className="hover:text-blue-400">Ère Moderne</a></li>
          <li><a href="#future" className="hover:text-blue-400">Avenir</a></li>
          <li><a href="#references" className="hover:text-blue-400">Références</a></li>
          <li><a href="#contact" className="hover:text-blue-400">Contact</a></li>
        </ul>
      </nav>
      <main className="p-8">
        <section id="introduction" className="mb-8">
          <h2 className="text-3xl font-bold mb-4">Introduction</h2>
          <p className="text-lg">L'histoire de l'informatique est fascinante et riche en innovations. Des premiers calculateurs mécaniques aux ordinateurs quantiques, cette discipline a transformé le monde.</p>
        </section>
        <section id="origins" className="mb-8">
          <h2 className="text-3xl font-bold mb-4">Origines</h2>
          <p className="text-lg">Les origines de l'informatique remontent à l'antiquité avec des inventions comme l'abaque. Cependant, c'est au XXe siècle que l'informatique moderne a vu le jour.</p>
        </section>
        <section id="evolution" className="mb-8">
          <h2 className="text-3xl font-bold mb-4">Évolution</h2>
          <p className="text-lg">L'évolution de l'informatique a été marquée par des avancées majeures comme le transistor, les circuits intégrés et la miniaturisation des composants.</p>
        </section>
        <section id="modern-era" className="mb-8">
          <h2 className="text-3xl font-bold mb-4">Ère Moderne</h2>
          <p className="text-lg">L'ère moderne de l'informatique est caractérisée par l'essor des ordinateurs personnels, d'Internet et des technologies mobiles.</p>
        </section>
        <section id="future" className="mb-8">
          <h2 className="text-3xl font-bold mb-4">Avenir</h2>
          <p className="text-lg">L'avenir de l'informatique promet des innovations révolutionnaires comme l'intelligence artificielle, l'informatique quantique et la réalité augmentée.</p>
        </section>
        <section id="references" className="mb-8">
          <h2 className="text-3xl font-bold mb-4">Références</h2>
          <ul className="list-disc list-inside text-lg">
            <li>Histoire de l'informatique - Wikipédia</li>
            <li>Les grandes dates de l'informatique - Le Monde</li>
            <li>L'évolution des ordinateurs - Science et Vie</li>
          </ul>
        </section>
        <section id="contact" className="mb-8">
          <h2 className="text-3xl font-bold mb-4">Contact</h2>
          <form className="space-y-4">
            <div>
              <label htmlFor="name" className="block text-lg">Nom:</label>
              <input type="text" id="name" className="w-full p-2 border border-gray-300 rounded" />
            </div>
            <div>
              <label htmlFor="email" className="block text-lg">Email:</label>
              <input type="email" id="email" className="w-full p-2 border border-gray-300 rounded" />
            </div>
            <div>
              <label htmlFor="message" className="block text-lg">Message:</label>
              <textarea id="message" className="w-full p-2 border border-gray-300 rounded" rows="4"></textarea>
            </div>
            <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Envoyer</button>
          </form>
        </section>
      </main>
      <footer className="bg-gray-800 text-white p-6 text-center">
        <p>&copy; 2025 Histoire de l'Informatique. Tous droits réservés.</p>
      </footer>
    </div>
  );
};

export default App;