function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "relative w-[500px] h-[500px] flex justify-center items-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "absolute inset-0 border-2 transition-all ease-linear duration-[0.5s]", style: { borderTopLeftRadius: "38% 62%", borderTopRightRadius: "63% 37%", borderBottomRightRadius: "56% 59%", borderBottomLeftRadius: "41% 44%", animation: "animate 6s linear infinite", "--clr": "#00ff0a", borderColor: "var(--clr)" }, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "absolute inset-0 border-2 transition-all ease-linear duration-[0.5s]", style: { borderTopLeftRadius: "41% 44%", borderTopRightRadius: "56% 59%", borderBottomRightRadius: "63% 37%", borderBottomLeftRadius: "38% 62%", animation: "animate 4s linear infinite", "--clr": "#ff0057", borderColor: "var(--clr)" }, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "absolute inset-0 border-2 transition-all ease-linear duration-[0.5s]", style: { borderTopLeftRadius: "41% 44%", borderTopRightRadius: "56% 59%", borderBottomRightRadius: "63% 37%", borderBottomLeftRadius: "38% 62%", animation: "animate2 10s linear infinite", "--clr": "#fffd44", borderColor: "var(--clr)" }, __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute w-[300px] h-full flex flex-col items-center justify-center gap-5", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-white font-quicksand", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", placeholder: "Username", className: "relative w-full p-[12px_20px] bg-transparent border-2 border-white rounded-[40px] text-1.2xl text-white outline-none", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative w-full", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "Password", className: "relative w-full p-[12px_20px] bg-transparent border-2 border-white rounded-[40px] text-1.2xl text-white outline-none", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative w-full", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "submit", value: "Sign in", className: "relative w-full p-[12px_20px] bg-[#ffff00] cursor-pointer rounded-[40px] text-1.2xl text-white border-none", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative w-full flex items-center justify-between p-[0_20px]", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Forget Password"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Signup")))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-screen bg-[#1a202c]", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this })); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 35, columnNumber: 1 }, __self: this }, ` @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate2 { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .ring:hover i { border-width: 6px; filter: drop-shadow(0 0 20px var(--clr)); } `);