{"loaderData":{"0":null,"0-2":{"total":7177,"projects":[{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"63895a","snapshot":null,"tags":null,"title":"form by Yaya12085","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":217,"cssLen":969,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n position: relative;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n gap: 10px;\n width: 300px;\n background-color: white;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 30px 30px -30px rgba(27, 26, 26, 0.315);\n}\n\n.form .title {\n color: royalblue;\n font-size: 30px;\n font-weight: 600;\n letter-spacing: -1px;\n line-height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.form input {\n outline: 0;\n border: 1px solid rgb(219, 213, 213);\n padding: 8px 14px;\n border-radius: 8px;\n width: 100%;\n height: 50px;\n}\n\n.form textarea {\n border-radius: 8px;\n height: 100px;\n width: 100%;\n resize: none;\n outline: 0;\n padding: 8px 14px;\n border: 1px solid rgb(219, 213, 213);\n}\n\n.form button {\n align-self: flex-end;\n padding: 8px;\n outline: 0;\n border: 0;\n border-radius: 8px;\n font-size: 16px;\n font-weight: 500;\n background-color: royalblue;\n color: #fff;\n cursor: pointer;\n}\n "},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"1239c6","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2971,"cssLen":2018,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Shipping Label Address Form

\n\n

\n Name\n \n

\n\n

\n Address\n \n

\n\n

\n City\n \n

\n\n

\n State\n \n

\n\n

\n ZIP\n \n

\n\n

\n Country\n \n

\n \n

","css":".mt-4 {\n margin-top: 1rem\n}\n\n.flex {\n display: flex\n}\n\n.w-full {\n width: 100%\n}\n\n.flex-1 {\n flex: 1 1 0%\n}\n\n.flex-row {\n flex-direction: row\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.justify-end {\n justify-content: flex-end\n}\n\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border-gray-700 {\n --tw-border-opacity: 1;\n border-color: rgb(55 65 81 / var(--tw-border-opacity))\n}\n\n.bg-gray-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / var(--tw-bg-opacity))\n}\n\n.bg-gray-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(17 24 39 / var(--tw-bg-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.p-4 {\n padding: 1rem\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity))\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.duration-200 {\n transition-duration: 200ms\n}\n\n.hover\\:bg-blue-500:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"583a53","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2082,"cssLen":1932,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

Sign in to Twitter

\n \n \n \n

\n Don't have an account?\n Sign up\n

\n \n\n","css":".mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.h-12{height:3rem}.w-12{width:3rem}.w-full{width:100%}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-\\[4px\\]{border-width:4px}.border-blue-900{--tw-border-opacity:1;border-color:rgb(30 58 138 / var(--tw-border-opacity))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}.bg-blue-900{--tw-bg-opacity:1;background-color:rgb(30 58 138 / var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.px-12{padding-left:3rem;padding-right:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.hover\\:border-blue-500:hover{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.hover\\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}.focus\\:border-blue-700:focus{--tw-border-opacity:1;border-color:rgb(29 78 216 / var(--tw-border-opacity))}"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"2d0cb0","snapshot":null,"tags":null,"title":"form by ahmed150up","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2471,"cssLen":1572,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Song Title

Artist

\n \n \n \n \n

\n","css":".audio-player {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 300px;\n height: 80px;\n background-color: #f3f3f3;\n border-radius: 8px;\n padding: 8px;\n box-sizing: border-box;\n}\n\n.player-controls {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n}\n\n.song-info {\n margin-bottom: 4px;\n}\n\n.song-title {\n font-size: 16px;\n color: #333;\n margin: 0;\n}\n\n.artist {\n font-size: 12px;\n color: #666;\n margin: 0;\n}\n\n.progress-bar {\n width: 100%;\n height: 4px;\n background-color: #ddd;\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress {\n width: 0;\n height: 100%;\n background-color: #ff5500;\n animation: progress-animation 10s linear infinite;\n}\n\n.buttons {\n display: flex;\n align-items: center;\n margin-top: 4px;\n}\n\nbutton {\n background: none;\n border: none;\n cursor: pointer;\n outline: none;\n}\n\n.play-btn,\n.pause-btn,\n.skip-btn,\n.volume-btn {\n font-size: 16px;\n color: #666;\n margin-right: 8px;\n transition: transform 0.2s ease-in-out;\n}\n\n.play-btn:hover,\n.pause-btn:hover,\n.skip-btn:hover,\n.volume-btn:hover {\n transform: scale(1.2);\n}\n\n.volume-slider {\n width: 100px;\n height: 5px;\n background-color: #ccc;\n position: relative;\n margin-left: 10px;\n}\n\n.volume-slider-bar {\n height: 100%;\n background-color: #666;\n}\n\n.volume-slider-handle {\n width: 16px;\n height: 16px;\n background-color: #666;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n cursor: pointer;\n}\n\n@keyframes progress-animation {\n 0% {\n width: 0;\n }\n\n 100% {\n width: 100%;\n }\n}\n"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"4e61dd","snapshot":null,"tags":null,"title":"form by Yaya12085","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":328,"cssLen":1545,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n background-color: #fff;\n box-shadow: 0 10px 60px rgb(218, 229, 255);\n border: 1px solid rgb(159, 159, 160);\n border-radius: 20px;\n padding: 2rem .7rem .7rem .7rem;\n text-align: center;\n font-size: 1.125rem;\n max-width: 320px;\n}\n\n.form-title {\n color: #000000;\n font-size: 1.8rem;\n font-weight: 500;\n}\n\n.form-paragraph {\n margin-top: 10px;\n font-size: 0.9375rem;\n color: rgb(105, 105, 105);\n}\n\n.drop-container {\n background-color: #fff;\n position: relative;\n display: flex;\n gap: 10px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 10px;\n margin-top: 2.1875rem;\n border-radius: 10px;\n border: 2px dashed rgb(171, 202, 255);\n color: #444;\n cursor: pointer;\n transition: background .2s ease-in-out, border .2s ease-in-out;\n}\n\n.drop-container:hover {\n background: rgba(0, 140, 255, 0.164);\n border-color: rgba(17, 17, 17, 0.616);\n}\n\n.drop-container:hover .drop-title {\n color: #222;\n}\n\n.drop-title {\n color: #444;\n font-size: 20px;\n font-weight: bold;\n text-align: center;\n transition: color .2s ease-in-out;\n}\n\n#file-input {\n width: 350px;\n max-width: 100%;\n color: #444;\n padding: 2px;\n background: #fff;\n border-radius: 10px;\n border: 1px solid rgba(8, 8, 8, 0.288);\n}\n\n#file-input::file-selector-button {\n margin-right: 20px;\n border: none;\n background: #084cdf;\n padding: 10px 20px;\n border-radius: 10px;\n color: #fff;\n cursor: pointer;\n transition: background .2s ease-in-out;\n}\n\n#file-input::file-selector-button:hover {\n background: #0d45a5;\n}"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"a60818","snapshot":null,"tags":null,"title":"form by mi-series","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1238,"cssLen":2934,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n CHECKOUT\n

\n SHIPPING\n

221B Baker Street, W1U 8ED

London, United Kingdom

\n PAYMENT METHOD\n

Visa

**** **** **** 4243

\n \n

\n PAYMENT\n

\n Subtotal:\n $240.00\n Shipping:\n $10.00\n Tax:\n $30.40\n

\n\n

\n \n

","css":"/* Body */\n.container {\n display: grid;\n grid-template-columns: auto;\n gap: 0px;\n}\n\nhr {\n height: 1px;\n background-color: #E5C7C5;\n border: none;\n}\n\n.card {\n width: 400px;\n background: #F4E2DE;\n box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);\n}\n\n.title {\n width: 100%;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n padding-left: 20px;\n border-bottom: 1px solid #E5C7C5;\n font-weight: 700;\n font-size: 11px;\n color: #000000;\n}\n\n/* Cart */\n.cart {\n border-radius: 19px 19px 0px 0px;\n}\n\n.cart .steps {\n display: flex;\n flex-direction: column;\n padding: 20px;\n}\n\n.cart .steps .step {\n display: grid;\n gap: 10px;\n}\n\n.cart .steps .step span {\n font-size: 13px;\n font-weight: 600;\n color: #000000;\n margin-bottom: 8px;\n display: block;\n}\n\n.cart .steps .step p {\n font-size: 11px;\n font-weight: 600;\n color: #000000;\n}\n\n/* Promo */\n.promo form {\n display: grid;\n grid-template-columns: 1fr 80px;\n gap: 10px;\n padding: 0px;\n}\n\n.input_field {\n width: auto;\n height: 36px;\n padding: 0 0 0 12px;\n border-radius: 5px;\n outline: none;\n border: 1px solid #E5C7C5;\n background-color: #F4E2DE;\n transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);\n}\n\n.input_field:focus {\n border: 1px solid transparent;\n box-shadow: 0px 0px 0px 2px #F3D2C9;\n background-color: #F4E2DE;\n}\n\n.promo form button {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 10px 18px;\n gap: 10px;\n width: 100%;\n height: 36px;\n background: #F3D2C9;\n box-shadow: 0px 0.5px 0.5px #F3D2C9, 0px 1px 0.5px rgba(239, 239, 239, 0.5);\n border-radius: 5px;\n border: 0;\n font-style: normal;\n font-weight: 600;\n font-size: 12px;\n line-height: 15px;\n color: #000000;\n}\n\n/* Checkout */\n.payments .details {\n display: grid;\n grid-template-columns: 10fr 1fr;\n padding: 0px;\n gap: 5px;\n}\n\n.payments .details span:nth-child(odd) {\n font-size: 12px;\n font-weight: 600;\n color: #000000;\n margin: auto auto auto 0;\n}\n\n.payments .details span:nth-child(even) {\n font-size: 13px;\n font-weight: 600;\n color: #000000;\n margin: auto 0 auto auto;\n}\n\n.checkout .footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 10px 10px 20px;\n background-color: #ECC2C0;\n}\n\n.price {\n position: relative;\n font-size: 22px;\n color: #2B2B2F;\n font-weight: 900;\n}\n\n.checkout .checkout-btn {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 36px;\n background: #F3D2C9;\n box-shadow: 0px 0.5px 0.5px #E5C7C5, 0px 1px 0.5px rgba(239, 239, 239, 0.5);\n border-radius: 7px;\n border: 1px solid #ECC2C0;\n color: #000000;\n font-size: 13px;\n font-weight: 600;\n transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);\n}"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"274332","snapshot":null,"tags":null,"title":"form by ahmed150up","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":515,"cssLen":854,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".login-card {\n width: 300px;\n margin: 0 auto;\n padding: 20px;\n border: 1px solid #ccc;\n border-radius: 10px;\n background-color: #e8e8e8;\n box-shadow: 2px 2px 10px #ccc;\n}\n\n.card-header {\n text-align: center;\n margin-bottom: 20px\n}\n\n.card-header .log {\n margin: 0;\n font-size: 24px;\n color: black;\n}\n\n.form-group {\n margin-bottom: 15px;\n}\n\nlabel {\n font-size: 18px;\n margin-bottom: 5px;\n}\n\ninput[type=\"text\"], input[type=\"password\"] {\n width: 100%;\n padding: 12px 20px;\n font-size: 16px;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-sizing: border-box;\n transition: 0.5s;\n}\n\ninput[type=\"submit\"] {\n width: 100%;\n background-color: #333;\n color: white;\n padding: 14px 20px;\n margin: 8px 0;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\ninput[type=\"submit\"]:hover {\n background-color: #ccc;\n color: black;\n}\n"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"824b05","snapshot":null,"tags":null,"title":"form by micaelgomestavares","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":982,"cssLen":1943,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n max-width: 350px;\n background-color: #fff;\n padding: 20px;\n border-radius: 20px;\n position: relative;\n}\n\n.title {\n font-size: 28px;\n color: royalblue;\n font-weight: 600;\n letter-spacing: -1px;\n position: relative;\n display: flex;\n align-items: center;\n padding-left: 30px;\n}\n\n.title::before,.title::after {\n position: absolute;\n content: \"\";\n height: 16px;\n width: 16px;\n border-radius: 50%;\n left: 0px;\n background-color: royalblue;\n}\n\n.title::before {\n width: 18px;\n height: 18px;\n background-color: royalblue;\n}\n\n.title::after {\n width: 18px;\n height: 18px;\n animation: pulse 1s linear infinite;\n}\n\n.message, .signin {\n color: rgba(88, 87, 87, 0.822);\n font-size: 14px;\n}\n\n.signin {\n text-align: center;\n}\n\n.signin a {\n color: royalblue;\n}\n\n.signin a:hover {\n text-decoration: underline royalblue;\n}\n\n.flex {\n display: flex;\n width: 100%;\n gap: 6px;\n}\n\n.form label {\n position: relative;\n}\n\n.form label .input {\n width: 100%;\n padding: 10px 10px 20px 10px;\n outline: 0;\n border: 1px solid rgba(105, 105, 105, 0.397);\n border-radius: 10px;\n}\n\n.form label .input + span {\n position: absolute;\n left: 10px;\n top: 15px;\n color: grey;\n font-size: 0.9em;\n cursor: text;\n transition: 0.3s ease;\n}\n\n.form label .input:placeholder-shown + span {\n top: 15px;\n font-size: 0.9em;\n}\n\n.form label .input:focus + span,.form label .input:valid + span {\n top: 0px;\n font-size: 0.7em;\n font-weight: 600;\n}\n\n.form label .input:valid + span {\n color: green;\n}\n\n.submit {\n border: none;\n outline: none;\n background-color: royalblue;\n padding: 10px;\n border-radius: 10px;\n color: #fff;\n font-size: 16px;\n transform: .3s ease;\n}\n\n.submit:hover {\n background-color: rgb(56, 90, 194);\n cursor: pointer;\n}\n\n@keyframes pulse {\n from {\n transform: scale(0.9);\n opacity: 1;\n }\n\n to {\n transform: scale(1.8);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"30bb31","snapshot":null,"tags":null,"title":"form by Javierrocadev","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1674,"cssLen":2595,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".mb-2 {\n margin-bottom: 0.5rem\n}\n\n.mb-4 {\n margin-bottom: 1rem\n}\n\n.mt-1 {\n margin-top: 0.25rem\n}\n\n.block {\n display: block\n}\n\n.flex {\n display: flex\n}\n\n.h-6 {\n height: 1.5rem\n}\n\n.h-80 {\n height: 20rem\n}\n\n.w-6 {\n width: 1.5rem\n}\n\n.w-64 {\n width: 16rem\n}\n\n.w-full {\n width: 100%\n}\n\n.flex-row {\n flex-direction: row\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.justify-center {\n justify-content: center\n}\n\n.justify-between {\n justify-content: space-between\n}\n\n.gap-3 {\n gap: 0.75rem\n}\n\n.rounded {\n border-radius: 0.25rem\n}\n\n.border {\n border-width: 1px\n}\n\n.border-pink-500 {\n --tw-border-opacity: 1;\n border-color: rgb(236 72 153 / var(--tw-border-opacity))\n}\n\n.bg-gray-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity))\n}\n\n.bg-pink-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(253 242 248 / var(--tw-bg-opacity))\n}\n\n.bg-pink-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(236 72 153 / var(--tw-bg-opacity))\n}\n\n.fill-current {\n fill: currentColor\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.p-3 {\n padding: 0.75rem\n}\n\n.text-center {\n text-align: center\n}\n\n.text-right {\n text-align: right\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-pink-50 {\n --tw-text-opacity: 1;\n color: rgb(253 242 248 / var(--tw-text-opacity))\n}\n\n.text-pink-500 {\n --tw-text-opacity: 1;\n color: rgb(236 72 153 / var(--tw-text-opacity))\n}\n\n.opacity-50 {\n opacity: 0.5\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.after\\:content-\\[\\'\\*\\'\\]::after{--tw-content:'*';content:var(--tw-content)}.hover\\:bg-pink-100:hover{--tw-bg-opacity:1;background-color:rgb(252 231 243 / var(--tw-bg-opacity))}.hover\\:bg-pink-400:hover{--tw-bg-opacity:1;background-color:rgb(244 114 182 / var(--tw-bg-opacity))}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\\:ring-pink-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(236 72 153 / var(--tw-ring-opacity))}"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"cf4339","snapshot":null,"tags":null,"title":"form by JkHuger","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":481,"cssLen":1670,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n \n Username\n

\n\n

\n \n Password\n

\n\n \n\n

","css":".login {\n color: #000;\n text-transform: uppercase;\n letter-spacing: 2px;\n display: block;\n font-weight: bold;\n font-size: x-large;\n}\n\n.card {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 350px;\n width: 300px;\n flex-direction: column;\n gap: 35px;\n background: #e3e3e3;\n box-shadow: 16px 16px 32px #c8c8c8,\n -16px -16px 32px #fefefe;\n border-radius: 8px;\n}\n\n.inputBox {\n position: relative;\n width: 250px;\n}\n\n.inputBox input {\n width: 100%;\n padding: 10px;\n outline: none;\n border: none;\n color: #000;\n font-size: 1em;\n background: transparent;\n border-left: 2px solid #000;\n border-bottom: 2px solid #000;\n transition: 0.1s;\n border-bottom-left-radius: 8px;\n}\n\n.inputBox span {\n margin-top: 5px;\n position: absolute;\n left: 0;\n transform: translateY(-4px);\n margin-left: 10px;\n padding: 10px;\n pointer-events: none;\n font-size: 12px;\n color: #000;\n text-transform: uppercase;\n transition: 0.5s;\n letter-spacing: 3px;\n border-radius: 8px;\n}\n\n.inputBox input:valid~span,\n.inputBox input:focus~span {\n transform: translateX(113px) translateY(-15px);\n font-size: 0.8em;\n padding: 5px 10px;\n background: #000;\n letter-spacing: 0.2em;\n color: #fff;\n border: 2px;\n}\n\n.inputBox input:valid,\n.inputBox input:focus {\n border: 2px solid #000;\n border-radius: 8px;\n}\n\n.enter {\n height: 45px;\n width: 100px;\n border-radius: 5px;\n border: 2px solid #000;\n cursor: pointer;\n background-color: transparent;\n transition: 0.5s;\n text-transform: uppercase;\n font-size: 10px;\n letter-spacing: 2px;\n margin-bottom: 1em;\n}\n\n.enter:hover {\n background-color: rgb(0, 0, 0);\n color: white;\n}\n\n"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"8bd029","snapshot":null,"tags":null,"title":"form by D3OXY","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2475,"cssLen":2326,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* DEOXY Was Here */\n.form {\n --background: #d3d3d3;\n --input-focus: #2d8cf0;\n --font-color: #323232;\n --font-color-sub: #666;\n --bg-color: #fff;\n --main-color: #323232;\n padding: 20px;\n background: var(--background);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n gap: 20px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n}\n\n.form > p {\n font-family: var(--font-DelaGothicOne);\n color: var(--font-color);\n font-weight: 700;\n font-size: 20px;\n margin-bottom: 15px;\n display: flex;\n flex-direction: column;\n}\n\n.form > p > span {\n font-family: var(--font-SpaceMono);\n color: var(--font-color-sub);\n font-weight: 600;\n font-size: 17px;\n}\n\n.separator {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n}\n\n.separator > div {\n width: 100px;\n height: 3px;\n border-radius: 5px;\n background-color: var(--font-color-sub);\n}\n\n.separator > span {\n color: var(--font-color);\n font-family: var(--font-SpaceMono);\n font-weight: 600;\n}\n\n.oauthButton {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 5px;\n /* margin: 50px auto 0 auto; */\n padding: auto 15px 15px auto;\n width: 250px;\n height: 40px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 16px;\n font-weight: 600;\n color: var(--font-color);\n cursor: pointer;\n transition: all 250ms;\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n\n.oauthButton::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 0;\n background-color: #212121;\n z-index: -1;\n -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);\n box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);\n transition: all 250ms;\n}\n\n.oauthButton:hover {\n color: #e8e8e8;\n}\n\n.oauthButton:hover::before {\n width: 100%;\n}\n\n.form > input {\n width: 250px;\n height: 40px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 15px;\n font-weight: 600;\n color: var(--font-color);\n padding: 5px 10px;\n outline: none;\n}\n\n.icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"5b7e5a","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2601,"cssLen":3740,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Sign Up

\n \n

\n","css":".mb-2 {\n margin-bottom: 0.5rem\n}\n\n.mb-4 {\n margin-bottom: 1rem\n}\n\n.mt-4 {\n margin-top: 1rem\n}\n\n.flex {\n display: flex\n}\n\n.h-screen {\n height: 100vh\n}\n\n.w-full {\n width: 100%\n}\n\n.max-w-md {\n max-width: 28rem\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border-0 {\n border-width: 0px\n}\n\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops))\n}\n\n.from-indigo-500 {\n --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.to-blue-500 {\n --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.p-6 {\n padding: 1.5rem\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity))\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.transition {\n transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.duration-150 {\n transition-duration: 150ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.hover\\:bg-indigo-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(79 70 229 / var(--tw-bg-opacity))\n}\n\n.hover\\:to-blue-600:hover {\n --tw-gradient-to: #2563eb var(--tw-gradient-to-position)\n}\n\n.hover\\:underline:hover {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline\n}\n\n.focus\\:bg-gray-200:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity))\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.focus\\:ring-1:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n\n.focus\\:ring-blue-500:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity))\n}"}]}},"actionData":null,"errors":null}