إنشاء تطبيق إزالة الخلفية

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div className="App bg-gray-100 min-h-screen">
        <header className="bg-blue-600 text-white p-6">
          <h1 className="text-3xl font-bold">Background Remover</h1>
        </header>
        <main className="p-6">
          <section className="mb-8">
            <h2 className="text-2xl font-semibold mb-4">Upload Image</h2>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <input type="file" className="mb-4" />
              <button className="bg-blue-600 text-white px-4 py-2 rounded">Upload</button>
            </div>
          </section>
          <section className="mb-8">
            <h2 className="text-2xl font-semibold mb-4">Preview</h2>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/600x400" alt="Preview" className="w-full h-auto rounded" />
            </div>
          </section>
          <section className="mb-8">
            <h2 className="text-2xl font-semibold mb-4">Remove Background</h2>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <button className="bg-blue-600 text-white px-4 py-2 rounded">Remove Background</button>
            </div>
          </section>
          <section className="mb-8">
            <h2 className="text-2xl font-semibold mb-4">Download</h2>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <button className="bg-blue-600 text-white px-4 py-2 rounded">Download</button>
            </div>
          </section>
          <section className="mb-8">
            <h2 className="text-2xl font-semibold mb-4">Share</h2>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <button className="bg-blue-600 text-white px-4 py-2 rounded">Share</button>
            </div>
          </section>
          <section className="mb-8">
            <h2 className="text-2xl font-semibold mb-4">Feedback</h2>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <textarea className="w-full p-2 border rounded mb-4" placeholder="Your feedback..."></textarea>
              <button className="bg-blue-600 text-white px-4 py-2 rounded">Submit</button>
            </div>
          </section>
          <section className="mb-8">
            <h2 className="text-2xl font-semibold mb-4">About</h2>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <p className="text-gray-700">This is a simple background remover application built with React and TailwindCSS.</p>
            </div>
          </section>
        </main>
        <footer className="bg-blue-600 text-white p-6 text-center">
          <p>&copy; 2025 Background Remover. All rights reserved.</p>
        </footer>
      </div>
    );
  }
}

export default App;