创建在线购物页面

import React from 'react';

const App = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
      <div className="max-w-4xl w-full bg-white rounded-lg shadow-lg overflow-hidden p-6">
        <div className="flex flex-col md:flex-row">
          <div className="md:w-1/2">
            <img src="https://placehold.co/600x400" alt="Product" className="w-full h-auto rounded-lg" />
          </div>
          <div className="md:w-1/2 md:pl-6">
            <h1 className="text-3xl font-bold text-gray-800 mb-4">Product Title</h1>
            <p className="text-gray-600 mb-4">
              This is a brief description of the product. It includes key features, benefits, and any other relevant information that might help the customer make a purchase decision.
            </p>
            <div className="flex items-center mb-6">
              <span className="text-2xl font-semibold text-gray-800">$99.99</span>
            </div>
            <div className="flex items-center mb-6">
              <button className="bg-gray-200 text-gray-700 px-4 py-2 rounded-l" onClick={() => {}}>-</button>
              <span className="bg-gray-100 text-gray-700 px-4 py-2">1</span>
              <button className="bg-gray-200 text-gray-700 px-4 py-2 rounded-r" onClick={() => {}}>+</button>
            </div>
            <button className="w-full bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;