Utility Bill Pay Later App

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

const App = () => {
  return (
    <div className="App">
      <header className="bg-blue-600 text-white p-4 flex justify-between items-center">
        <h1 className="text-xl font-bold">Utility Bill Payment</h1>
        <nav>
          <ul className="flex space-x-4">
            <li>Home</li>
            <li>Bills</li>
            <li>Pay Later</li>
            <li>Profile</li>
          </ul>
        </nav>
      </header>

      <main className="container mx-auto p-4">
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Welcome to Utility Bill Payment</h2>
          <p className="text-gray-700">Manage and pay your utility bills easily and securely.</p>
        </section>

        <section className="mb-8 grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <img src="https://placehold.co/300x200" alt="Electricity" className="mb-4 rounded-lg" />
            <h3 className="text-xl font-bold mb-2">Electricity Bill</h3>
            <p className="text-gray-700 mb-4">Pay your electricity bills online with ease.</p>
            <button className="bg-blue-600 text-white px-4 py-2 rounded-lg">Pay Now</button>
          </div>

          <div className="bg-white p-6 rounded-lg shadow-lg">
            <img src="https://placehold.co/300x200" alt="Water" className="mb-4 rounded-lg" />
            <h3 className="text-xl font-bold mb-2">Water Bill</h3>
            <p className="text-gray-700 mb-4">Pay your water bills online with ease.</p>
            <button className="bg-blue-600 text-white px-4 py-2 rounded-lg">Pay Now</button>
          </div>

          <div className="bg-white p-6 rounded-lg shadow-lg">
            <img src="https://placehold.co/300x200" alt="Gas" className="mb-4 rounded-lg" />
            <h3 className="text-xl font-bold mb-2">Gas Bill</h3>
            <p className="text-gray-700 mb-4">Pay your gas bills online with ease.</p>
            <button className="bg-blue-600 text-white px-4 py-2 rounded-lg">Pay Now</button>
          </div>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Pay Later Limit: 600 Rs</h2>
          <p className="text-gray-700">You can pay your bills later with a limit of 600 Rs.</p>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Recent Transactions</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <ul>
              <li className="flex justify-between items-center mb-2">
                <span>Electricity Bill</span>
                <span>500 Rs</span>
              </li>
              <li className="flex justify-between items-center mb-2">
                <span>Water Bill</span>
                <span>300 Rs</span>
              </li>
              <li className="flex justify-between items-center mb-2">
                <span>Gas Bill</span>
                <span>200 Rs</span>
              </li>
            </ul>
          </div>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Payment Methods</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <ul>
              <li className="mb-2">Credit Card</li>
              <li className="mb-2">Debit Card</li>
              <li className="mb-2">Net Banking</li>
              <li className="mb-2">UPI</li>
            </ul>
          </div>
        </section>

        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Contact Us</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <p className="text-gray-700 mb-4">If you have any questions, feel free to contact us.</p>
            <button className="bg-blue-600 text-white px-4 py-2 rounded-lg">Contact</button>
          </div>
        </section>
      </main>

      <footer className="bg-gray-800 text-white p-4 text-center">
        <p>&copy; 2025 Utility Bill Payment. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;