function MainComponent() { const [showPassword, setShowPassword] = React.useState(false); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-cover bg-[url('/images/f1-car-2021.jpg')]", style: { backgroundPosition: 'center' }, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-red-700/70 p-8 rounded", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-8", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "Formule 1 Fan Zone"), /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "Gebruikersnaam"), /*#__PURE__*/ React.createElement("input", { name: "username", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "username", type: "text", placeholder: "Gebruikersnaam", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "Wachtwoord"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "password", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "password", type: showPassword ? "text" : "password", placeholder: "******************", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", className: "ml-2 text-gray-500", onClick: ()=>setShowPassword(!showPassword), __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, showPassword ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-eye", __source: { fileName: "", lineNumber: 22, columnNumber: 33 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-eye-slash", __source: { fileName: "", lineNumber: 22, columnNumber: 66 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#d00c0f] hover:bg-[#a00a0c] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Inloggen"), /*#__PURE__*/ React.createElement("a", { className: "inline-block align-baseline font-bold text-sm text-[#d00c0f] hover:text-[#a00a0c]", href: "#", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Wachtwoord vergeten?"))), /*#__PURE__*/ React.createElement("div", { className: "text-white mt-8", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Laatste F1 Nieuws"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Bekijk de nieuwe auto-ontwerpen voor 2023."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Race-uitslagen en hoogtepunten van de laatste Grand Prix."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Interviews met coureurs en exclusieve achter-de-schermen."))))); }