产品信息与支付数据表单

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

function App() {
  return (
    <div className="App container mx-auto p-4">
      <header className="text-center py-6">
        <h1 className="text-4xl font-bold text-blue-600">Product Information</h1>
      </header>

      <section className="product-info bg-white p-6 rounded-lg shadow-lg mt-6">
        <h2 className="text-2xl font-semibold text-gray-800">Product Details</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
          <div>
            <img src="https://placehold.co/300X300" alt="Product" className="rounded-md" />
          </div>
          <div>
            <h3 className="text-xl font-bold text-gray-700">Product Name</h3>
            <p className="text-gray-600 mt-2">Description of the product goes here. It includes features, specifications, and benefits.</p>
            <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-300">Buy Now</button>
          </div>
        </div>
      </section>

      <section className="payer-data-form bg-white p-6 rounded-lg shadow-lg mt-6">
        <h2 className="text-2xl font-semibold text-gray-800">Payer Information</h2>
        <form className="mt-4 space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700">Full Name</label>
            <input type="text" className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="John Doe" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">Email Address</label>
            <input type="email" className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="johndoe@example.com" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">Payment Method</label>
            <select className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
              <option>Credit Card</option>
              <option>PayPal</option>
              <option>Bank Transfer</option>
            </select>
          </div>
          <button type="submit" className="w-full px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition duration-300">Submit Payment</button>
        </form>
      </section>

      <footer className="text-center py-6 mt-6 text-gray-500">
        <p>© 2025 Your Company. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;