import React from 'react';

const TableComponent = () => {
  return (
    <div className="table-container p-4">
      <table className="table-auto w-full border-collapse">
        <thead>
          <tr>
            <th className="border px-4 py-2">Header 1</th>
            <th className="border px-4 py-2">Header 2</th>
            <th className="border px-4 py-2" colSpan="2">Header 3 (Colspan 2)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border px-4 py-2">Row 1, Col 1</td>
            <td className="border px-4 py-2">Row 1, Col 2</td>
            <td className="border px-4 py-2" rowSpan="2">Row 1-2, Col 3 (Rowspan 2)</td>
            <td className="border px-4 py-2" colSpan="2">Row 1, Col 4 and 5 (Colspan 2)</td>
          </tr>
          <tr>
            <td className="border px-4 py-2">Row 2, Col 1</td>
            <td className="border px-4 py-2">Row 2, Col 2</td>
            <td className="border px-4 py-2">Row 2, Col 4</td>
          </tr>
          <tr>
            <td className="border px-4 py-2">Row 3, Col 1</td>
            <td className="border px-4 py-2">Row 3, Col 2</td>
            <td className="border px-4 py-2">Row 3, Col 3</td>
            <td className="border px-4 py-2" colSpan="2">Row 3, Col 4 and 5 (Colspan 2)</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default TableComponent;