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

\n JR \n

Frontend developer

\n","css":".relative{position:relative}.z-10{z-index:10}.flex{display:flex}.h-56{height:14rem}.w-80{width:20rem}.origin-bottom-right{transform-origin:bottom right}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23 / var(--tw-bg-opacity))}.bg-sky-700{--tw-bg-opacity:1;background-color:rgb(3 105 161 / var(--tw-bg-opacity))}.text-6xl{font-size:3.75rem;line-height:1}.font-bold{font-weight:700}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-sky-500{--tw-shadow-color:#0ea5e9;--tw-shadow:var(--tw-shadow-colored)}.outline{outline-style:solid}.-outline-offset-8{outline-offset:-8px}.outline-slate-400{outline-color:#94a3b8}.duration-500{transition-duration:500ms}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:right-16::before{content:var(--tw-content);right:4rem}.before\\:top-20::before{content:var(--tw-content);top:5rem}.before\\:h-12::before{content:var(--tw-content);height:3rem}.before\\:h-20::before{content:var(--tw-content);height:5rem}.before\\:w-12::before{content:var(--tw-content);width:3rem}.before\\:w-20::before{content:var(--tw-content);width:5rem}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:bg-sky-400::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(56 189 248 / var(--tw-bg-opacity))}.before\\:blur-xl::before{content:var(--tw-content);--tw-blur:blur(24px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.before\\:duration-500::before{content:var(--tw-content);transition-duration:500ms}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:bottom-32::after{content:var(--tw-content);bottom:8rem}.after\\:right-16::after{content:var(--tw-content);right:4rem}.after\\:h-12::after{content:var(--tw-content);height:3rem}.after\\:h-24::after{content:var(--tw-content);height:6rem}.after\\:w-12::after{content:var(--tw-content);width:3rem}.after\\:w-24::after{content:var(--tw-content);width:6rem}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-sky-700::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(3 105 161 / var(--tw-bg-opacity))}.after\\:blur-xl::after{content:var(--tw-content);--tw-blur:blur(24px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.after\\:duration-500::after{content:var(--tw-content);transition-duration:500ms}.hover\\:rotate-12:hover{--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))}.hover\\:duration-500:hover{transition-duration:500ms}.hover\\:before\\:-translate-x-32:hover::before{content:var(--tw-content);--tw-translate-x:-8rem;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\\:before\\:translate-y-12:hover::before{content:var(--tw-content);--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\\:after\\:translate-x-24:hover::after{content:var(--tw-content);--tw-translate-x:6rem;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\\:after\\:duration-500:hover::after{content:var(--tw-content);transition-duration:500ms}"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"f738f0","snapshot":null,"tags":null,"title":"card by reshades","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":202,"cssLen":831,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n TITLE HERE\n

\n This is the description of this card.
You can enter anything here.\n

","css":".card {\n width: 290px;\n height: 404px;\n background: linear-gradient(10deg, rgba(38,146,255,1) 0%, rgba(0,63,255,1) 100%);\n border-radius: 16px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(10.5px);\n -webkit-backdrop-filter: blur(10.5px);\n border: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n.top {\n background: rgba(255, 255, 255, 0.2);\n border-radius: 16px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(10.5px);\n -webkit-backdrop-filter: blur(10.5px);\n border: 1px solid rgba(255, 255, 255, 0.3);\n width: 290px;\n height: 300px;\n}\n\n.top .title {\n color: #fff;\n font-weight: bolder;\n font-size: x-large;\n margin-left: 10px;\n margin-top: 90%\n}\n\n.card .desc {\n color: #fff;\n opacity: 75%;\n font-size: small;\n font-weight: lighter;\n margin-left: 10px;\n margin-top: 2%\n}"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"d1b66a","snapshot":null,"tags":null,"title":"card by TamaniPhiri","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3276,"cssLen":3018,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

hover over the card😁

\n \n

Tamani Phiri

@senior_developer

\n \n \n \n \n \n \n \n \n \n

","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-bottom-full {\n bottom: -100%\n}\n\n.top-8 {\n top: 2rem\n}\n\n.flex {\n display: flex\n}\n\n.h-16 {\n height: 4rem\n}\n\n.min-h-screen {\n min-height: 100vh\n}\n\n.w-16 {\n width: 4rem\n}\n\n.w-full {\n width: 100%\n}\n\n.max-w-sm {\n max-width: 24rem\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.justify-evenly {\n justify-content: space-evenly\n}\n\n.gap-2 {\n gap: 0.5rem\n}\n\n.gap-3 {\n gap: 0.75rem\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-xl {\n border-radius: 0.75rem\n}\n\n.bg-gray-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(55 65 81 / var(--tw-bg-opacity))\n}\n\n.p-1 {\n padding: 0.25rem\n}\n\n.p-4 {\n padding: 1rem\n}\n\n.text-center {\n text-align: center\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-semibold {\n font-weight: 600\n}\n\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity))\n}\n\n.text-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / 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.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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.delay-200 {\n transition-delay: 200ms\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.hover\\:scale-110:hover {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n 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))\n}\n\n.hover\\:p-2:hover {\n padding: 0.5rem\n}\n\n.hover\\:shadow-2xl:hover {\n --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --tw-shadow-colored: 0 25px 50px -12px 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.group:hover .group-hover\\:bottom-3 {\n bottom: 0.75rem\n}\n\n.group:hover .group-hover\\:scale-105 {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n 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))\n}\n\n.group:hover .group-hover\\:pb-10 {\n padding-bottom: 2.5rem\n}"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"b8b3e0","snapshot":null,"tags":null,"title":"card by joe-watson-sbf","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":230,"cssLen":622,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

SCROLL SNAP

","css":".container {\n display: flex;\n overflow: auto;\n scroll-snap-type: x mandatory;\n padding: 10px;\n gap: 10px;\n scroll-padding: 10px;\n width: 190px;\n height: 254px;\n background-color: white;\n border: 2px solid coral;\n}\n\n.container .item {\n scroll-snap-align: start;\n flex: 0 0 60%;\n background: linear-gradient(120deg, coral 30%, rgb(255, 187, 163) 88%, rgb(255, 185, 160) \n 40%, coral 48%);\n display: flex;\n justify-content: center;\n align-items: center;\n color: bisque;\n text-align: center;\n font-size: 1.3rem;\n line-height: 1.3em;\n font-weight: 400;\n font-family: sans-serif;\n border-radius: .2rem;\n}"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"cb0b17","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2117,"cssLen":5855,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

JOHN DOE
\n Fullstack dev & UX UI\n

\n \n \n \n

","css":"/* before adding the photo to the div with the \"card-photo\" class, in the css clear the styles for .card-photo and remove .card-photo::before and .card-photo::after, then set the desired styles for .card- photo. */\n\n.card {\n --font-color: #fefefe;\n --font-color-sub: #7e7e7e;\n --bg-color: #111;\n --main-color: #fefefe;\n width: 200px;\n height: 254px;\n background: var(--bg-color);\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n border-radius: 5px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.card-photo {\n/* clear and add new css */\n transform: scale(0.3) translate(220px, 230px);\n width: 250px;\n height: 250px;\n margin-left: -125px;\n margin-top: -125px;\n background: radial-gradient(circle,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0) 50.8%) 14% 30%/11% 11%,radial-gradient(circle,#ffdab9 50%,rgba(255,218,185,0) 50.8%) 10% 30%/16% 16%,radial-gradient(circle,#8b4513 50%,rgba(139,69,19,0) 50.8%) 7.5% 29%/20% 20%,radial-gradient(circle,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0) 50.8%) 86% 30%/11% 11%,radial-gradient(circle,#ffdab9 50%,rgba(255,218,185,0) 50.8%) 90% 30%/16% 16%,radial-gradient(circle,#8b4513 50%,rgba(139,69,19,0) 50.8%) 92.5% 29%/20% 20%,radial-gradient(circle at 50% 0,#ffdab9 29.5%,#8b4513 30%,#8b4513 35%,rgba(139,69,19,0) 35.5%) 50% 95%/40% 20%,radial-gradient(ellipse at 50% 100%,rgba(139,69,19,0) 49%,#8b4513 49.5%,#8b4513 52%,rgba(139,69,19,0) 52.5%) 50% 110%/120% 40%,radial-gradient(circle at 50% 0,rgba(255,255,255,0) 35%,white 35%,white 45%,rgba(255,255,255,0) 45.5%) 50% 89%/40% 13%,linear-gradient(#8b4513,#8b4513) 37% 100%/.25em 22%,linear-gradient(#8b4513,#8b4513) 63% 100%/.25em 22%,linear-gradient(80deg,rgba(0,0,0,0) 50%,#333 50.5%) 24% 100%/1em 18%,linear-gradient(-80deg,rgba(0,0,0,0) 50%,#333 50.5%) 76% 100%/1em 18%,linear-gradient(162deg,rgba(0,0,0,0) 10%,#333 10%) 30% 100%/1.5em 21%,linear-gradient(-162deg,rgba(0,0,0,0) 10%,#333 10%) 70% 100%/1.5em 21%,radial-gradient(ellipse at 100% 100%,#556b2f 50%,rgba(85,107,47,0) 50.5%) 0 100%/37% 29%,radial-gradient(ellipse at 0 100%,#556b2f 50%,rgba(85,107,47,0) 50.5%) 100% 100%/37% 29%,radial-gradient(ellipse at 50% 100%,#222 51%,rgba(0,0,0,0) 51.5%) 50% 110%/120% 40%,radial-gradient(circle at 50% 0,rgba(0,0,0,0.15) 40%,rgba(0,0,0,0) 40.5%) 50% 82%/20% 20%,linear-gradient(to right,#8b4513 4px,rgba(139,69,19,0) 4px) 50% 80%/20% 20%,linear-gradient(to left,#8b4513 4px,rgba(139,69,19,0) 4px) 50% 80%/20% 20%,linear-gradient(#ffdab9,#ffdab9) 50% 80%/20% 20%,linear-gradient(#48240a,#48240a) 50% 100%/65% 60%,radial-gradient(circle,white 30%,rgba(255,255,255,0) 62%) 50% 50%/100% 100%;\n background-color: #ccc;\n background-repeat: no-repeat;\n border-radius: 30%;\n}\n\n/* delete */\n.card-photo::before {\n display: block;\n content: '';\n position: absolute;\n box-sizing: border-box;\n width: 160px;\n height: 200px;\n left: 50%;\n top: -10%;\n margin-left: -80px;\n background: radial-gradient(circle at 50% 0,#ffdab9 30%,#8b4513 30.5%,#8b4513 41%,rgba(139,69,19,0) 41.5%) 50% 76%/2em 2em,radial-gradient(ellipse,rgba(139,69,19,0) 25%,#5e2f0d 25.5%,#5e2f0d 40%,rgba(139,69,19,0) 40.5%) 50% 100%/100% 40%,radial-gradient(ellipse at 50% 0,#8b4513 40%,#ffdab9 40.5%,#ffdab9 58%,rgba(255,218,185,0) 59%) 50% 83%/3em 1em,linear-gradient(#5e2f0d,#5e2f0d) 50% 86%/1em 1em,radial-gradient(circle,#5e2f0d 40%,rgba(139,69,19,0) 40.5%) 26% 56%/1em 1em,radial-gradient(circle,#5e2f0d 40%,rgba(139,69,19,0) 40.5%) 74% 56%/1em 1em,radial-gradient(ellipse,rgba(139,69,19,0) 52%,#8b4513 52.5%,#8b4513 55%,rgba(139,69,19,0) 55.5%) 50% 100%/150% 80%,radial-gradient(ellipse,rgba(0,0,0,0) 46%,rgba(0,0,0,0.15) 46.5%,rgba(0,0,0,0.15) 53%,rgba(0,0,0,0) 53%) 50% 100%/150% 80%,radial-gradient(ellipse,#ffdab9 53%,rgba(255,218,185,0) 53.5%) 50% 100%/150% 80%,radial-gradient(ellipse at 50% 100%,rgba(139,69,19,0) 35.5%,#8b4513 36%,#8b4513 38%,white 38.5%) 50% -45%/110% 60%,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 30% 26%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 40% 25%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 50% 24.5%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 60% 25%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 70% 26%/1em 1em,radial-gradient(ellipse,#666 63%,#8b4513 63.5%,#8b4513 66%,rgba(139,69,19,0) 66.5%) 50% 100%/150% 80%,radial-gradient(ellipse,rgba(139,69,19,0) 40%,#5e2f0d 40.5%) 50% 0/150% 80%,linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0.15)) 50% 50%/100% 100%;\n background-repeat: no-repeat;\n background-color: #ffdab9;\n border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;\n border: 4px solid #8b4513;\n box-shadow: inset 0 -.2em 0 .5em rgba(0,0,0,0.15),inset 0 -1.6em 0 #5e2f0d;\n}\n\n/* delete */\n.card-photo::after {\n display: block;\n content: '';\n position: absolute;\n width: 2.5em;\n height: .8em;\n left: 28.5%;\n top: 26%;\n background-color: #5e2f0d;\n border-radius: .3em;\n box-shadow: 4.2em 0 0 #5e2f0d;\n}\n\n.card-title {\n text-align: center;\n color: var(--font-color);\n font-size: 20px;\n font-weight: 400;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.card-title span {\n font-size: 15px;\n color: var(--font-color-sub);\n}\n\n.card-socials {\n display: flex;\n height: 0;\n opacity: 0;\n margin-top: 20px;\n gap: 20px;\n transition: 0.5s;\n}\n\n.card-socials-btn {\n width: 25px;\n height: 25px;\n border: none;\n background: transparent;\n cursor: pointer;\n}\n\n.card-socials-btn svg {\n width: 100%;\n height: 100%;\n fill: var(--main-color);\n}\n\n.card:hover > .card-socials {\n opacity: 1;\n height: 35px;\n}\n\n.card-socials-btn:hover {\n transform: translateY(-5px);\n transition: all 0.15s;\n}\n\n.card-photo:hover {\n transition: 0.3s;\n transform: scale(0.4) translate(160px, 150px);\n}"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"eb0ba7","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2614,"cssLen":2596,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Wed, Sep 19\n 12:58\n

\n 89\n

\n \n \n \n

\n","css":".relative {\n position: relative\n}\n\n.z-10 {\n z-index: 10\n}\n\n.flex {\n display: flex\n}\n\n.h-44 {\n height: 11rem\n}\n\n.h-5 {\n height: 1.25rem\n}\n\n.w-44 {\n width: 11rem\n}\n\n.w-48 {\n width: 12rem\n}\n\n.w-5 {\n width: 1.25rem\n}\n\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8,0,1,1)\n }\n\n 50% {\n transform: none;\n animation-timing-function: cubic-bezier(0,0,0.2,1)\n }\n}\n\n.animate-bounce {\n animation: bounce 1s infinite\n}\n\n.flex-row {\n flex-direction: row\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-around {\n justify-content: space-around\n}\n\n.justify-evenly {\n justify-content: space-evenly\n}\n\n.rounded-2xl {\n border-radius: 1rem\n}\n\n.bg-neutral-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity))\n}\n\n.fill-current {\n fill: currentColor\n}\n\n.fill-red-500 {\n fill: #ef4444\n}\n\n.text-6xl {\n font-size: 3.75rem;\n line-height: 1\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem\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-amber-600 {\n --tw-text-opacity: 1;\n color: rgb(217 119 6 / var(--tw-text-opacity))\n}\n\n.text-gray-50 {\n --tw-text-opacity: 1;\n color: rgb(249 250 251 / var(--tw-text-opacity))\n}\n\n.shadow-inner {\n --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: inset 0 2px 4px 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.shadow-gray-50 {\n --tw-shadow-color: #f9fafb;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.\\[text-shadow\\:_2px_2px_\\#fff\\2c _1px_2px_\\#fff\\] {\n text-shadow: 2px 2px #fff, 1px 2px #fff\n}\n\n.\\[text-shadow\\:none\\] {\n text-shadow: none\n}\n\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute\n}\n\n.before\\:top-16::before {\n content: var(--tw-content);\n top: 4rem\n}\n\n.before\\:h-12::before {\n content: var(--tw-content);\n height: 3rem\n}\n\n.before\\:w-12::before {\n content: var(--tw-content);\n width: 3rem\n}\n\n.before\\:rounded-full::before {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.before\\:bg-orange-800::before {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(154 52 18 / var(--tw-bg-opacity))\n}\n\n.before\\:blur-xl::before {\n content: var(--tw-content);\n --tw-blur: blur(24px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"d0a0dd","snapshot":null,"tags":null,"title":"card by PriyanshuGupta28","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":431,"cssLen":381,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n This is a toast message.\n

\n \n

","css":".toast {\n bottom: 20px;\n right: 20px;\n background-color: #333;\n color: #fff;\n padding: 10px;\n border-radius: 5px;\n box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.toast-icon svg {\n width: 30px;\n height: 20px;\n fill: #fff;\n}\n\n.toast-content {\n font-family: Arial, sans-serif;\n font-size: 14px;\n}\n"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"e66bbd","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":218,"cssLen":2815,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

34° 36' 30″ S; 58° 22' 16″ O

","css":".container {\n width: 280px;\n height: 380px;\n background-color: #151716;\n border-radius: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n filter: hue-rotate(10deg);\n color: #2fbb39;\n gap: 20px;\n}\n\n.data {\n margin-top: 25px;\n border: 2px solid;\n padding: 15px;\n border-radius: 5px;\n background: #000000;\n}\n\n.data::after {\n background: #000000;\n content: \"WIND - 54,3\";\n position: absolute;\n bottom: 5%;\n right: 5%;\n border: 2px solid;\n padding: 3px;\n border-radius: 5px;\n font-size: .7em;\n}\n\n.data::before {\n content: \"DEPT - 600\";\n position: absolute;\n bottom: 5%;\n left: 5%;\n border: 2px solid;\n padding: 3px;\n border-radius: 5px;\n font-size: .7em;\n background: #000000;\n}\n\n.card {\n width: 200px;\n height: 200px;\n background: #000000;\n border-radius: 50%;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #18D322;\n overflow: hidden;\n}\n\n.card::after {\n content: \"\";\n position: absolute;\n width: 2px;\n height: 200px;\n left: 49%;\n background-color: #18D322;\n animation: rotate 3s linear infinite;\n z-index: 6;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n width: 0px;\n height: 200px;\n left: 49%;\n transform: rotate(-4deg);\n background-color: #18D322;\n animation: rotate 3s linear infinite;\n box-shadow: 0 0 10px 10px #2fbb39;\n z-index: 6;\n}\n\n.circle {\n width: 100px;\n height: 100px;\n border: 2px solid #18D322;\n border-radius: 50%;\n}\n\n.circle::before {\n content: \"\";\n position: absolute;\n width: 50px;\n height: 50px;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n border: 2px solid #18D322;\n border-radius: 50%;\n}\n\n.circle::after {\n content: \"\";\n position: absolute;\n width: 150px;\n height: 150px;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n border: 2px solid #18D322;\n border-radius: 50%;\n}\n\n.dot {\n width: 4px;\n height: 4px;\n top: 30%;\n background-color: #18D322;\n border-radius: 50%;\n position: absolute;\n animation: doted 1.5s ease infinite;\n}\n\n.dot2 {\n width: 4px;\n height: 4px;\n top: 80%;\n right: 30%;\n background-color: #18D322;\n border-radius: 50%;\n position: absolute;\n animation: doted 1.5s 1.2s ease infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes doted {\n 0% {\n transform: scale(0.95);\n box-shadow: 0 0 10px 5px rgba(24, 211, 33, 0.3),0 0 10px 10px rgba(24, 211, 33, 0.3);\n }\n\n 60% {\n transform: scale(0.95);\n box-shadow: 0 0 10px 5px rgba(24, 211, 33, 0.3),0 0 10px 10px rgba(24, 211, 33, 0.3);\n }\n\n 100% {\n transform: scale(1);\n box-shadow: 0 0 0 0 rgba(24, 211, 33, 0.7),0 0 0 0 rgba(24, 211, 33, 0.5),0 0 0 0 rgba(24, 211, 33, 0.3);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"0877c6","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":480,"cssLen":708,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".inline-block {\n display: inline-block\n}\n\n.flex {\n display: flex\n}\n\n.h-3 {\n height: 0.75rem\n}\n\n.h-64 {\n height: 16rem\n}\n\n.w-3 {\n width: 0.75rem\n}\n\n.w-48 {\n width: 12rem\n}\n\n.gap-1 {\n gap: 0.25rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.bg-green-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(34 197 94 / var(--tw-bg-opacity))\n}\n\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / 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-yellow-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(234 179 8 / var(--tw-bg-opacity))\n}\n\n.p-2 {\n padding: 0.5rem\n}"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"66551f","snapshot":null,"tags":null,"title":"card by Sujitkavaiya","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":292,"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: rgb(255, 255, 255);\n border-radius: 0.4em;\n box-shadow: 0.3em 0.3em 0.7em #00000015;\n transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n border: rgb(250, 250, 250) 0.2em solid;\n}\n\n.card:hover {\n border: #006fff 0.2em solid;\n}"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"701076","snapshot":null,"tags":null,"title":"card by mRcOol7","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":230,"cssLen":1028,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Front

\n\n

Back

\n","css":".container {\n height: 100px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.card {\n width: 300px;\n height: 200px;\n transform-style: preserve-3d;\n transition: transform 0.5s;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n}\n\n.card:hover {\n transform: rotateY(180deg) scale(1.1);\n}\n\n.card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n transform: rotateY(0deg);\n}\n\n.card-front,\n.card-back {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n}\n\n.card-front {\n background: linear-gradient(to bottom right, #67b26f, #4ca2cd);\n transform: rotateY(0deg);\n box-shadow: 0 0 20px rgba(103, 178, 111, 0.5);\n}\n\n.card-back {\n background: linear-gradient(to bottom right, #fccb90, #d57eeb);\n transform: rotateY(180deg);\n box-shadow: 0 0 20px rgba(252, 203, 144, 0.5);\n}\n"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"ad97ca","snapshot":null,"tags":null,"title":"card by catraco","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1089,"cssLen":2359,"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 Card Title\n

Using Lorem ipsum to focus attention on graphic elements in a webpage design proposal ·

\n \n

","css":".card {\n --card-color: #0080ff;\n --blub-color: #52d4eb;\n position: relative;\n user-select: none;\n}\n\n@keyframes keyframes-rotate-blubs {\n 0% {\n transform: translate(10px) rotate(360deg);\n }\n\n 50% {\n transform: translate(-5px, 10px) rotate(180deg);\n }\n\n 100% {\n transform: translate(10px) rotate(0deg);\n }\n}\n\n.card span {\n width: 100px;\n height: 100px;\n position: absolute;\n background: linear-gradient(0deg, transparent, var(--blub-color));\n border-radius: 100%;\n opacity: 0.5;\n animation: keyframes-rotate-blubs 4s infinite linear;\n}\n\n.card span:nth-child(1) {\n top: -5%;\n left: -5%;\n width: 60px;\n height: 60px;\n animation-delay: .1s;\n opacity: 0.3;\n}\n\n.card span:nth-child(2) {\n top: 60%;\n left: -20%;\n width: 80px;\n height: 80px;\n animation-delay: .2s;\n opacity: 0.3;\n}\n\n.card span:nth-child(3) {\n top: 10%;\n left: 60%;\n animation-delay: .3s;\n opacity: 0.6;\n}\n\n.card span:nth-child(4) {\n top: 70%;\n left: 50%;\n width: 90px;\n height: 90px;\n animation-delay: .4s;\n opacity: 0.4;\n}\n\n.card div {\n backdrop-filter: blur(15px);\n outline: 1px solid var(--card-color);\n color: var(--card-color);\n width: 180px;\n height: 250px;\n border-radius: 5%;\n padding: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.card div .check {\n fill: var(--card-color);\n width: 25px;\n height: 25px;\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n}\n\n.card div strong {\n font-size: 1rem;\n font-weight: 900;\n text-transform: uppercase;\n}\n\n.card div p {\n font-size: 0.8rem;\n}\n\n.card div hr {\n border: none;\n border-top: 1px solid var(--card-color);\n opacity: .5;\n}\n\n.card div button {\n background-color: transparent;\n color: var(--card-color);\n border: none;\n outline: 1px solid var(--card-color);\n border-radius: 1rem;\n padding: .5rem 1rem;\n font-size: 0.8rem;\n font-weight: 900;\n transition: .3s;\n display: flex;\n align-items: center;\n justify-content: center;\n text-transform: uppercase;\n gap: .2em;\n}\n\n.card div button .arrow {\n width: 0px;\n height: 20px;\n fill: var(--blub-color);\n transform: scale(0);\n transition: .3s;\n}\n\n.card div button:hover .arrow {\n width: 20px;\n margin-left: 1em;\n transform: scale(1);\n}\n\n.card div button:hover {\n background-color: var(--card-color);\n color: var(--blub-color);\n cursor: pointer;\n}"}]}},"actionData":null,"errors":null}