بريد إلكتروني مؤقت

import React from 'react';

const App = () => {
  return (
    <div className="App bg-gray-100 min-h-screen">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-2xl font-bold">Temporary Email</h1>
      </header>
      <main className="p-4">
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Create a Temporary Email</h2>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <input type="text" placeholder="Enter your name" className="w-full p-2 mb-4 border rounded" />
            <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Generate Email</button>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Recent Emails</h2>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <div className="flex justify-between items-center mb-4">
              <p className="text-gray-700">[email protected]</p>
              <button className="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600">Delete</button>
            </div>
            <div className="flex justify-between items-center">
              <p className="text-gray-700">[email protected]</p>
              <button className="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600">Delete</button>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Features</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-lg font-semibold mb-2">Secure</h3>
              <p className="text-gray-700">Your data is safe with us.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-lg font-semibold mb-2">Fast</h3>
              <p className="text-gray-700">Quick email generation.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-lg font-semibold mb-2">Easy</h3>
              <p className="text-gray-700">Simple and user-friendly.</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Testimonials</h2>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <p className="text-gray-700 italic">"Great service! Very easy to use."</p>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Pricing</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-lg font-semibold mb-2">Free</h3>
              <p className="text-gray-700">Basic features.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-lg font-semibold mb-2">Pro</h3>
              <p className="text-gray-700">$10/month</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-lg font-semibold mb-2">Enterprise</h3>
              <p className="text-gray-700">Custom pricing.</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Contact Us</h2>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <form>
              <input type="text" placeholder="Your Name" className="w-full p-2 mb-4 border rounded" />
              <input type="email" placeholder="Your Email" className="w-full p-2 mb-4 border rounded" />
              <textarea placeholder="Your Message" className="w-full p-2 mb-4 border rounded"></textarea>
              <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Send</button>
            </form>
          </div>
        </section>
      </main>
      <footer className="bg-blue-600 text-white p-4 text-center">
        <p>&copy; 2025 Temporary Email. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;