function MainComponent() { const [rows, setRows] = React.useState([ [ 'Row 1 Cell 1', 'Row 1 Cell 2', 'Row 1 Cell 3', 'Row 1 Cell 4' ], [ 'Row 2 Cell 1', 'Row 2 Cell 2', 'Row 2 Cell 3', 'Row 2 Cell 4' ] ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full max-w-4xl bg-white shadow-lg rounded", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-5 py-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-semibold text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Excel Data")), /*#__PURE__*/ React.createElement("div", { className: "p-5", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-left border-collapse", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border-b border-gray-200 font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this }, "Column 1"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border-b border-gray-200 font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 17 }, __self: this }, "Column 2"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border-b border-gray-200 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 17 }, __self: this }, "Column 3"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 border-b border-gray-200 font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 17 }, __self: this }, "Column 4"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, rows.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("tr", { key: rowIndex, className: "hover:bg-gray-50", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, row.map((cell, cellIndex)=>/*#__PURE__*/ React.createElement("td", { key: cellIndex, className: "px-4 py-2 border-b border-gray-200 font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 21 }, __self: this }, cell))))))))); }

Column 1	Column 2	Column 3	Column 4
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3	Row 1 Cell 4
Row 2 Cell 1	Row 2 Cell 2	Row 2 Cell 3	Row 2 Cell 4