{"loaderData":{"0":null,"0-2":{"total":7182,"projects":[{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"e06870","snapshot":null,"tags":null,"title":"card by satyamchaudharydev","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1344,"cssLen":3183,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Rick And Morty

\n \n

46Ep

Fantasy

\n \n \n

","css":".card {\n --width: 190px;\n --height: 210px;\n --primary: #00b9ae;\n --text: #f9f9f9b2;\n --secondary: #f9f9f933;\n --radius: 20px;\n color: #fff;\n font-family: Arial, Helvetica, sans-serif;\n width: var(--width);\n height: var(--height);\n background: linear-gradient(\n 180deg,\n rgba(22, 24, 30, 0) 0%,\n rgba(22, 24, 30, 0.7) 65.28%\n ),\n linear-gradient(0deg, rgba(22, 24, 30, 0.4), rgba(22, 24, 30, 0.4));\n background-size: cover;\n border-radius: var(--radius);\n display: flex;\n flex-direction: column;\n gap: 0.7rem;\n padding: 1em;\n padding-top: 1.4em;\n}\n\n\n/* */\n\n.card .card__title {\n margin: 0;\n font-size: 1.2rem;\n font-weight: bold;\n margin-top: 0.2rem;\n}\n\n.rating {\n margin-top: 0.5em;\n width: 85px;\n height: 16px;\n background-image: url(\"data:image/svg+xml,%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20%20%20%20%20%20width%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20height%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20viewBox%3D%220%200%2017%2017%22%0A%20%20%20%20%20%20%20%20%20%20fill%3D%22none%22%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20%20%20%20d%3D%22M8.51948%201.625C9.1214%201.625%2010.0427%204.16625%2010.4636%205.43013C10.6014%205.8437%2010.9837%206.13054%2011.4192%206.14904C12.7373%206.20505%2015.375%206.39722%2015.375%207.0384C15.375%207.66696%2013.5161%209.17543%2012.5322%209.92976C12.1816%2010.1986%2012.0365%2010.6604%2012.1687%2011.082C12.5631%2012.34%2013.2755%2014.8755%2012.7573%2015.3009C12.2506%2015.717%2010.2147%2014.2326%209.15246%2013.4009C8.77021%2013.1016%208.22949%2013.1012%207.84719%2013.4004C6.78473%2014.2321%204.75246%2015.717%204.28166%2015.3009C3.79912%2014.8745%204.47615%2012.3275%204.84741%2011.0727C4.97086%2010.6555%204.82425%2010.2029%204.47885%209.93826C3.49798%209.18681%201.625%207.66933%201.625%207.0384C1.625%206.3962%204.2711%206.20444%205.5871%206.14878C6.0197%206.13048%206.3998%205.84769%206.53973%205.43793C6.97041%204.17673%207.91633%201.625%208.51948%201.625Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3D%222%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E\");\n background-repeat: space;\n}\n\n.card .card__info {\n display: flex;\n margin-top: auto;\n font-size: 0.8rem;\n color: var(--text);\n font-weight: 400;\n justify-content: space-between;\n}\n\n.card .card__btns {\n display: flex;\n gap: 0.6rem;\n}\n\n.card button {\n border: none;\n background: none;\n cursor: pointer;\n background: var(--primary);\n color: #fff;\n border-radius: var(--radius);\n padding: 0.5rem 1rem;\n font-size: 1rem;\n font-weight: bold;\n transition: 0.2s;\n}\n\n.card button:hover {\n opacity: 0.8;\n transform: scale(0.9);\n}\n\n.card .add-btn {\n color: #fff;\n padding: 0.5em 0.8em;\n background: rgba(249, 249, 249, 0.2);\n border-radius: 14px;\n}\n\n.card .watch-btn {\n flex: 1;\n}\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"aa975d","snapshot":null,"tags":null,"title":"card by brunoguyy12","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":107,"cssLen":1099,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Popular this month

Uiverse

\n","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background-color: #000;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 12px;\n gap: 12px;\n border-radius: 8px;\n cursor: pointer;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n inset: 0;\n left: -5px;\n margin: auto;\n width: 200px;\n height: 264px;\n border-radius: 10px;\n background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%);\n z-index: -10;\n pointer-events: none;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n inset: 0;\n background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100%);\n transform: translate3d(0, 0, 0) scale(0.95);\n filter: blur(20px);\n}\n\n.heading {\n font-size: 20px;\n text-transform: capitalize;\n font-weight: 700;\n}\n\n.card p:not(.heading) {\n font-size: 14px;\n}\n\n.card p:last-child {\n color: #e81cff;\n font-weight: 600;\n}\n\n.card:hover::after {\n filter: blur(30px);\n}\n\n.card:hover::before {\n transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);\n z-index: 1;\n}\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"2ccfe4","snapshot":null,"tags":null,"title":"card by marwam112010","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1985,"cssLen":1795,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n \n \n \n
\n 2 team members\n
\n
\n \n \n \n
\n 1000+ components\n
\n
\n \n \n \n
\n 1 month free updates\n
\n
\n \n \n \n
\n Life time technical support\n
\n

\n \n

","css":".pack-container {\n position: relative;\n display: flex;\n max-width: 350px;\n flex-direction: column;\n border-radius: 12px;\n background-color: #212121;\n border: 1px solid #fff;\n padding: 1.6rem;\n color: #fff;\n box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n}\n\n.header {\n position: relative;\n margin: 0;\n margin-bottom: 2rem;\n overflow: hidden;\n border-radius: 0;\n border-bottom: 1px solid #fff;\n background: transparent;\n padding-bottom: 1rem;\n text-align: center;\n}\n\n.title {\n display: block;\n font-family: sans-serif;\n font-size: 0.875rem;\n line-height: 1.25rem;\n text-transform: uppercase;\n color: #fff\n}\n\n.price-container {\n margin-top: 10px;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n font-family: sans-serif;\n font-size: 4.5rem;\n line-height: 1;\n}\n\n.price-container span:first-child {\n margin-top: 10px;\n font-size: 2.25rem;\n line-height: 2.5rem;\n}\n\n.price-container span:last-child {\n align-self: flex-end;\n font-size: 2.25rem;\n line-height: 2.5rem;\n}\n\n.lists {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.list {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.list span {\n border-radius: 50%;\n border: 1px solid rgba(255, 255, 255, 0.24);\n background-color: rgba(255, 255, 255, 0.185);\n height: 30px;\n width: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.list span svg {\n height: 12px;\n width: 12px;\n}\n\n.list p {\n display: block;\n font-family: sans-serif;\n}\n\n.button-container {\n margin-top: 20px;\n padding: 0;\n}\n\n.button-container button {\n display: block;\n width: 100%;\n background-color: #fff;\n padding: 10px 20px;\n text-transform: uppercase;\n color: #000;\n outline: 0;\n border: 0;\n border-radius: 10px;\n}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"e7c461","snapshot":null,"tags":null,"title":"card by themrsami","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":949,"cssLen":2494,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Your Message Sent Successfully

\n \n

Lorem Ipsum is simply dummy text of the printing and\n typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

\n \n \n

\n","css":".mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.h-1{height:0.25rem}.w-\\[90px\\]{width:90px}.w-full{width:100%}.max-w-\\[570px\\]{max-width:570px}.flex-wrap{flex-wrap:wrap}.gap-3{gap:0.75rem}.rounded{border-radius:0.25rem}.rounded-\\[20px\\]{border-radius:20px}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}.border-indigo-500{--tw-border-opacity:1;border-color:rgb(99 102 241 / var(--tw-border-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.p-3{padding:0.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-12{padding-top:3rem;padding-bottom:3rem}.pb-2{padding-bottom:0.5rem}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.leading-relaxed{line-height:1.625}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;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;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\\:border-red-600:hover{--tw-border-opacity:1;border-color:rgb(220 38 38 / var(--tw-border-opacity))}.hover\\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38 / var(--tw-bg-opacity))}.hover\\:bg-opacity-90:hover{--tw-bg-opacity:0.9}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}@media (min-width: 640px){.sm\\:text-2xl{font-size:1.5rem;line-height:2rem}}@media (min-width: 768px){.md\\:px-\\[70px\\]{padding-left:70px;padding-right:70px}.md\\:py-\\[60px\\]{padding-top:60px;padding-bottom:60px}}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"cca857","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2353,"cssLen":560,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".navigation-card {\n width: fit-content;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 30px;\n background-color: rgb(255, 255, 255);\n padding: 15px 20px;\n border-radius: 50px;\n}\n.tab {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 50px;\n height: 50px;\n overflow: hidden;\n background-color: rgb(252, 252, 252);\n padding: 15px;\n border-radius: 50%;\n cursor: pointer;\n text-decoration: none;\n transition: all 0.3s;\n}\n.tab:hover {\n background-color: rgb(223, 223, 223);\n}\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"abc1a2","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":941,"cssLen":1379,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n

\n Card title\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua.\n

\n\n","css":".line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.flex{display:flex}.h-40{height:10rem}.w-72{width:18rem}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-evenly{justify-content:space-evenly}.gap-4{gap:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.stroke-purple-300{stroke:#d8b4fe}.px-4{padding-left:1rem;padding-right:1rem}.font-bold{font-weight:700}.text-purple-300{--tw-text-opacity:1;color:rgb(216 180 254 / var(--tw-text-opacity))}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-500{transition-duration:500ms}.hover\\:translate-y-2:hover{--tw-translate-y:0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"070ed2","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":428,"cssLen":1421,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover me

Card Hover

\n Lorem ipsum dolor sit amet, consectetur adipii\n voluptas ten mollitia pariatur odit, ab\n minus ratione adipisci accusamus vel est excepturi laboriosam magnam\n necessitatibus dignissimos molestias.\n

","css":".card-container {\n width: 300px;\n height: 300px;\n position: relative;\n border-radius: 10px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n}\n\n.card {\n width: 100%;\n height: 100%;\n border-radius: inherit;\n}\n\n.card .front-content {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)\n}\n\n.card .front-content p {\n font-size: 32px;\n font-weight: 700;\n opacity: 1;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)\n}\n\n.card .content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 10px;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n color: #e8e8e8;\n padding: 20px;\n line-height: 1.5;\n border-radius: 5px;\n pointer-events: none;\n transform: translateX(-96%);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.card .content .heading {\n font-size: 32px;\n font-weight: 700;\n}\n\n.card:hover .content {\n transform: translateY(0);\n}\n\n.card:hover .front-content {\n transform: translateX(-30%);\n}\n\n.card:hover .front-content p {\n opacity: 0;\n}\n\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"08cb48","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":548,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Go!\n

","css":".card {\n width: 150px;\n height: 150px;\n background: #a53c3c;\n border-radius: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n font-size: 3em;\n font-weight: 900;\n color: aliceblue;\n transition: all .5s ease-in-out;\n}\n\n.text {\n transition: all 0.3s ease-in-out;\n}\n\n.card:hover {\n box-shadow: 75px 75px 5px -20px #bf5e37, -75px 75px 5px -20px #d08432, -75px -75px 5px -20px #bf5e37 , 75px -75px 5px -20px #d08432;\n transform: rotate(-45deg);\n}\n\n.card:hover .text {\n transform: rotate(45deg);\n}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"08c695","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":700,"cssLen":3437,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Jr\n

- Frontend Developer -

","css":".relative{position:relative}.flex{display:flex}.h-36{height:9rem}.w-64{width:16rem}.origin-bottom-right{transform-origin:bottom right}.-rotate-12{--tw-rotate:-12deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.skew-x-0{--tw-skew-x:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:0.25rem}.rounded-2xl{border-radius:1rem}.bg-zinc-800{--tw-bg-opacity:1;background-color:rgb(39 39 42 / var(--tw-bg-opacity))}.text-5xl{font-size:3rem;line-height:1}.font-bold{font-weight:700}.font-thin{font-weight:100}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77 / var(--tw-text-opacity))}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.duration-500{transition-duration:500ms}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:right-3::before{content:var(--tw-content);right:0.75rem}.before\\:top-0::before{content:var(--tw-content);top:0px}.before\\:-z-10::before{content:var(--tw-content);z-index:-10}.before\\:h-32::before{content:var(--tw-content);height:8rem}.before\\:w-64::before{content:var(--tw-content);width:16rem}.before\\:-skew-x-12::before{content:var(--tw-content);--tw-skew-x:-12deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\\:rounded-2xl::before{content:var(--tw-content);border-radius:1rem}.before\\:bg-neutral-700::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(64 64 64 / var(--tw-bg-opacity))}.before\\:duration-500::before{content:var(--tw-content);transition-duration:500ms}.hover\\:-translate-x-6:hover{--tw-translate-x:-1.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:translate-y-12:hover{--tw-translate-y:3rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:-rotate-0:hover{--tw-rotate:-0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:-skew-x-12:hover{--tw-skew-x:-12deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:duration-500{transition-duration:500ms}.group:hover .group-hover\\:before\\:-right-3::before{content:var(--tw-content);right:-0.75rem}.group:hover .group-hover\\:before\\:skew-x-12::before{content:var(--tw-content);--tw-skew-x:12deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"8473ec","snapshot":null,"tags":null,"title":"card by adamgiebl","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":198,"cssLen":2154,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background: lightgrey;\n box-shadow: 12px 12px 20px -12px rgba(0,0,0,0.75);\n z-index: 1;\n border-radius: 21px;\n overflow: hidden;\n transform: rotate(-2deg);\n}\n\n.card__content {\n background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25));\n z-index: 1;\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border-radius: 21px;\n}\n\n.blob {\n position: absolute;\n z-index: -1;\n border-radius: 50%;\n width: 150px;\n height: 150px;\n filter: blur(15px);\n opacity: 0.5;\n}\n\n.blob-1 {\n left: -65px;\n top: -45px;\n background: #59C173;\n /* fallback for old browsers */\n background: -webkit-linear-gradient(to bottom, #5D26C1, #a17fe0, #59C173);\n /* Chrome 10-25, Safari 5.1-6 */\n background: linear-gradient(to bottom, #5D26C1, #a17fe0, #59C173);\n /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */\n transform: rotate(12deg);\n}\n\n.blob-2 {\n left: -30px;\n top: 120px;\n background: #A8EB12;\n /* fallback for old browsers */\n background: -webkit-linear-gradient(to bottom, #54C0EC, #A8EB12);\n /* Chrome 10-25, Safari 5.1-6 */\n background: linear-gradient(to bottom, #54C0EC, #A8EB12);\n /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */\n transform: rotate(20deg);\n}\n\n.blob-3 {\n right: -60px;\n bottom: -10px;\n background: #CC2E5C;\n /* fallback for old browsers */\n background: -webkit-linear-gradient(to bottom, #753a88, #CC2E5C);\n /* Chrome 10-25, Safari 5.1-6 */\n background: linear-gradient(to bottom, #753a88, #CC2E5C);\n /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */\n transform: rotate(-10deg);\n}\n\n.blob-4 {\n right: -70px;\n top: 20px;\n background: #FFA17F;\n /* fallback for old browsers */\n background: -webkit-linear-gradient(to bottom right, #B993D6, #8CA6DB, #FFA17F);\n /* Chrome 10-25, Safari 5.1-6 */\n background: linear-gradient(to bottom right, #B993D6, #8CA6DB, #FFA17F);\n /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */\n transform: rotate(-25deg);\n}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"c9512f","snapshot":null,"tags":null,"title":"card by zanina-yassine","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4615,"cssLen":3109,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\"I've been using this product for a few days now and I'm really impressed! The interface is intuitive and easy to use.\"

\n Yassine Zanina\n Creative Designer & Developer\n

","css":".container {\n height: fit-content;\n display: flex;\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 border-radius: 9px;\n}\n\n.login-form {\n width: 350px;\n height: auto;\n display: flex;\n flex-direction: column;\n gap: 15px;\n padding: 20px;\n border-radius: 9px 0 0 9px;\n background-color: #fff;\n}\n\n.header {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 15px 0;\n}\n\n.title {\n font-weight: 700;\n font-size: 15px;\n line-height: 21px;\n text-align: center;\n color: #2B2B2F;\n margin-bottom: 10px;\n}\n\n.description {\n max-width: 80%;\n margin: auto;\n font-weight: 600;\n font-size: 10px;\n line-height: 14px;\n text-align: center;\n color: #5F5D6B;\n}\n\n.input_container {\n width: 100%;\n height: fit-content;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.icon {\n width: 20px;\n position: absolute;\n z-index: 99;\n left: 12px;\n bottom: 9px;\n}\n\n.input_field {\n width: auto;\n height: 40px;\n padding: 0 0 0 40px;\n border-radius: 7px;\n outline: none;\n border: 1px solid #e5e5e5;\n filter: drop-shadow(0px 1px 0px #efefef)\n drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));\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 #115DFC;\n background-color: transparent;\n}\n\n.sign-in_btn {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 36px;\n background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);\n box-shadow: 0px 0.5px 0.5px #EFEFEF, 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: #ffffff;\n transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);\n}\n\n.sign-in_btn:hover {\n transform: scale(1.01) translateY(-2px);\n box-shadow: 0 10px 20px 0#054eed6b;\n}\n\n.testimonial {\n width: 250px;\n height: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n padding: 20px;\n background: linear-gradient(358.31deg,#fff -24.13%,hsla(0,0%,100%,0) 338.58%),linear-gradient(89.84deg,rgba(230,36,174,.15) .34%,rgba(94,58,255,.15) 16.96%,rgba(10,136,255,.15) 34.66%,rgba(75,191,80,.15) 50.12%,rgba(137,206,0,.15) 66.22%,rgba(239,183,0,.15) 82%,rgba(246,73,0,.15) 99.9%);\n border-radius: 0 9px 9px 0;\n}\n\n.testimonial p {\n color: #4d4c6d;\n font-size: 11px;\n text-align: center;\n font-weight: 600;\n}\n\n.user-profile-picture {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #00000011;\n}\n\n.user {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 3px;\n}\n\n.username {\n color: #4d4c6d;\n font-size: 11px;\n text-align: center;\n font-weight: 600;\n}\n\n.occupation {\n color: rgb(141, 140, 161);\n font-size: 10px;\n text-align: center;\n font-weight: 600;\n}"},{"created":"2024-01-22T17:11:18.000Z","isPrivate":0,"projectId":"7154e1","snapshot":null,"tags":null,"title":"card by e-coders","updated":"2024-01-22T17:11:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":283,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".card {\n width: 190px;\n height: 254px;\n background: linear-gradient(135deg, #ff85ec 0%, #84ff98 100%);\n border-radius: 16px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.3);\n}"}]}},"actionData":null,"errors":null}