{"loaderData":{"0":null,"0-3":{"total":7397,"projects":[{"created":"2024-01-22T17:11:09.000Z","isPrivate":0,"projectId":"b440f1","snapshot":null,"tags":null,"title":"card by FrM-bot","updated":"2024-01-22T17:11:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":237,"cssLen":1064,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Card\n \n

","css":"/* From uiverse.io by @FrM-bot */\n.card {\n width: 200px;\n height: min-content;\n transition: all .3s;\n position: relative;\n border-radius: .5rem 2rem;\n box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.5);\n}\n\n.card:hover {\n transform: scale(1.03);\n}\n\n.img {\n transition: all .3s;\n background: #ff0084;\n background: -webkit-linear-gradient(to right, #33001b, #ff0084);\n background: linear-gradient(to right, #33001b, #ff0084);\n width: 100%;\n}\n\n.img:hover {\n transform: scale(1.3);\n}\n\n.img-container {\n display: grid;\n border-radius: .5rem 2rem;\n height: 270px;\n overflow: hidden;\n}\n\n.description {\n position: absolute;\n bottom: .5rem;\n left: .5rem;\n text-align: start;\n padding: .5rem 1em;\n width: 90%;\n transition: all 0.5s ease;\n text-overflow: ellipsis;\n white-space: nowrap;\n backdrop-filter: blur(.1rem);\n background-color: rgba(0, 0, 0, 0.2);\n border-radius: .5rem 2rem;\n}\n\n.description:hover {\n transform: perspective(100px) translateX(7px) rotateX(3deg) rotateY(3deg) scale(1);\n box-shadow: none;\n}\n\n.title {\n color: aliceblue;\n}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"bd2505","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":684,"cssLen":3658,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n Jr\n

- Frontend Developer -

\n","css":".relative{position:relative}.flex{display:flex}.h-36{height:9rem}.h-80{height:20rem}.w-64{width:16rem}.w-80{width:20rem}.-translate-y-24{--tw-translate-y:-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))}.-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))}.scale-125{--tw-scale-x:1.25;--tw-scale-y:1.25;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))}.hover\\:origin-top-left:hover{transform-origin:top left}.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-1:hover{--tw-skew-x:1deg;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\\:scale-100:hover{--tw-scale-x:1;--tw-scale-y:1;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:08.000Z","isPrivate":0,"projectId":"1c4fcd","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3217,"cssLen":2094,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n\t

\n\t\tTunica Formale\n\t

\n\t

\n\t\t$123.49\n\t

\n\t

\n \n \n S\n \n \n \n M\n \n \n \n \n L\n \n \n \n \n XL\n \n\n\t\n \n XXL\n \n

\n\t\n

","css":".card {\n width: 230px;\n height: 376px;\n background: #131313;\n border: 2px solid #C72464;\n border-radius: 40px;\n}\n\n.image {\n background-color: #21151a;\n border-radius: 2.5em 2.5em 0em 0em;\n width: 100%;\n height: 43%;\n padding: 2px;\n}\n\n.image svg {\n width: 75%;\n margin-top: -322px;\n margin-left: 30px;\n}\n\n.productTitle {\n text-align: center;\n font-size: 22px;\n font-weight: bold;\n color: #C72464;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n margin-top: 10px;\n}\n\n.cost {\n text-align: center;\n margin-top: 10px;\n font-weight: bold;\n color: #FF6D00;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.radio-inputs {\n position: relative;\n margin-top: 20px;\n margin-left: 8px;\n display: flex;\n flex-wrap: wrap;\n border-radius: 0.5rem;\n background-color: #21151a;\n box-sizing: border-box;\n box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);\n padding: 0.25rem;\n width: 210px;\n font-size: 14px;\n}\n\n.radio-inputs .radio {\n flex: 1 1 auto;\n text-align: center;\n}\n\n.radio-inputs .radio input {\n display: none;\n}\n\n.radio-inputs .radio .name {\n display: flex;\n font-weight: 600;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n border: none;\n padding: .5rem 0;\n color: #C72464;\n transition: all .15s ease-in-out;\n}\n\n.radio-inputs .radio input:checked + .name {\n background-color: #371800;\n color: #FF6D00;\n font-weight: 600;\n}\n\n.addtocart {\n width: 100%;\n margin-top: 19px;\n padding: 15px;\n border: none;\n border-top: 2px solid #C72464;\n background-color: #131313;\n color: #C72464;\n font-weight: bold;\n font-size: 15px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n border-radius: 0px 0px 38px 38px;\n transition: 0.2s;\n}\n\n.addtocart:hover {\n background-color: #C72464;\n border-top: 2px solid transparent;\n color: #111111;\n}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"dbf964","snapshot":null,"tags":null,"title":"card by SelfMadeSystem","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":699,"cssLen":1516,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Johnathon
F. Stag\n

\n Professional human\n

\n I do human things such as exist, eat foot, and work.\n

","css":".card {\n position: relative;\n width: 190px;\n color: white;\n height: 260px;\n background: #444;\n border-radius: 14px;\n}\n\n.bg {\n position: absolute;\n z-index: -1;\n inset: -4px;\n border-radius: 16px;\n overflow: hidden;\n}\n\n.uwu {\n filter: blur(8px);\n transition: filter 0.3s;\n}\n\n.bg::before {\n content: '';\n position: absolute;\n aspect-ratio: 1/1;\n top: 50%;\n left: 50%;\n min-width: 150%;\n min-height: 150%;\n background-image: conic-gradient(\n hsl(0, 100%, 50%),\n hsl(30, 100%, 50%),\n hsl(60, 100%, 50%),\n hsl(90, 100%, 50%),\n hsl(120, 100%, 50%),\n hsl(150, 100%, 50%),\n hsl(180, 100%, 50%),\n hsl(210, 100%, 50%),\n hsl(240, 100%, 60%),\n hsl(270, 100%, 50%),\n hsl(300, 100%, 50%),\n hsl(330, 100%, 50%),\n hsl(360, 100%, 50%)\n );\n animation: speeen 4s linear infinite;\n transform-origin: 0% 0%;\n transform: rotate(0deg) translate(-50%, -50%);\n}\n\n@keyframes speeen {\n from {\n transform: rotate(0deg) translate(-50%, -50%);\n }\n\n to {\n transform: rotate(360deg) translate(-50%, -50%);\n }\n}\n\n.content {\n position: relative;\n padding: 14px 16px;\n}\n\n.img {\n height: 5em;\n width: 5em;\n margin: auto;\n background-color: #fff3;\n border-radius: 1em;\n}\n\n.img svg {\n height: 100%;\n fill: white;\n}\n\n.content div {\n text-align: center;\n}\n\n.h1 {\n margin-top: 1em;\n margin-bottom: 0.5em;\n font-size: 1em;\n font-weight: 600;\n}\n\n.p {\n font-size: 0.75em;\n}\n\n.p p {\n margin-top: 0.5em;\n padding: 0.5em;\n background-color: #0003;\n border-radius: 1em;\n}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"f719d2","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":234,"cssLen":1053,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

John Doe

Web Dev

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

","css":".card {\n color: #1b1b1b;\n width: 190px;\n height: 254px;\n position: relative;\n outline: 6px solid #f5f5f5;\n border-radius: 8px;\n line-height: 150%;\n padding: 16px;\n background: #ff930f;\n background-blend-mode: multiply;\n background: linear-gradient(to top, #ff930f, #ffcc33);\n transition: background-color 1s ease-in-out;\n overflow: hidden;\n}\n\n.card-front {\n bottom: 16px;\n left: 0;\n position: absolute;\n width: 100%;\n text-align: center;\n transition: transform 1s cubic-bezier(0.785, 0.135, 0.150, 0.860);\n}\n\n.card-back {\n transform: translateX(120%);\n transition: transform 1s cubic-bezier(0.785, 0.135, 0.150, 0.860);\n}\n\n\n/*Text*/\n.title {\n font-size: 1.3rem;\n font-weight: bold;\n}\n/*Text divider*/\n.title::after {\n content: \"\";\n display: block;\n width: 50%;\n border-radius: 50%;\n height: 2px;\n margin: 2px auto;\n background-color: #1b1b1b;\n}\n\n\n/*Hover*/\n.card:hover {\n background-color: #1b1b1b25;\n}\n\n.card:hover .card-front {\n transform: translateX(-100%);\n}\n\n.card:hover .card-back {\n transform: translateX(0);\n}\n\n\n"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"e37180","snapshot":null,"tags":null,"title":"card by nanda248","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":371,"cssLen":1737,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n

","css":".card {\n width: 11em;\n height: 14.8em;\n position: relative;\n background: #28282B;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 6px solid #F5F5DC;\n border-radius: 5px;\n transition: 0.5s;\n overflow: hidden;\n}\n\n.card .circle {\n width: 8em;\n height: 14em;\n border-radius: 50%;\n transform: skew(-25deg);\n border: 4px solid white;\n display: grid;\n grid-template-columns: 1fr 1fr;\n}\n\n.card .circle.small {\n position: absolute;\n width: 1.5em;\n height: 3em;\n border: 1px solid white;\n}\n\n.card .circle.top-left {\n top: 0.3em;\n left: 0.6em;\n}\n\n.card .circle.bottom-right {\n bottom: 0.3em;\n right: 0.6em;\n}\n\n.card:hover {\n cursor: pointer;\n transform: translate(0, -5px);\n}\n\n.card:hover:after, .card:hover:before {\n visibility: hidden;\n}\n\n.card .circle span:nth-child(1) {\n background-color: #FF2400;\n border-top-left-radius: 100%;\n}\n\n.card .circle span:nth-child(2) {\n background-color: #1F51FF;\n border-top-right-radius: 100%;\n}\n\n.card .circle span:nth-child(3) {\n background-color: #FFEA00;\n border-bottom-left-radius: 100%;\n}\n\n.card .circle span:nth-child(4) {\n background-color: #50C878;\n border-bottom-right-radius: 100%;\n}\n\n/* glider animation */\n.card:before {\n content: '';\n position: absolute;\n height: 130%;\n width: 1em;\n background-color: aliceblue;\n opacity: 0.14;\n animation: glider 1.8s infinite linear;\n animation-delay: 0.05s;\n}\n\n.card:after {\n content: '';\n position: absolute;\n height: 120%;\n width: 0.8em;\n background-color: aliceblue;\n opacity: 0.1;\n animation: glider 1.8s infinite linear;\n}\n\n@keyframes glider {\n 0% {\n transform: rotate(45deg) translate(-12em, 1.2em);\n }\n\n 100% {\n transform: rotate(45deg) translate(18em, -2.8em);\n }\n}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"e54756","snapshot":null,"tags":null,"title":"card by samuelfcosta18","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":813,"cssLen":1287,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

Lorem Ipsum

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae\n justo vel lorem tincidunt ultrices at non nunc. Donec in sapien viverra,\n tincidunt augue id, efficitur massa.\n

\n","css":"section.card {\n position: relative;\n width: 250px;\n height: 250px;\n background-color: #f2f2f2;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n perspective: 1000px;\n transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n.card svg {\n fill: #000;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n border-radius: 3px;\n}\n.card:hover {\n transform: scale(1.05);\n box-shadow: 0 8px 16px #000000;\n background-color: #f2f2f2;\n color: #ffffff;\n}\n\n.card__content {\n color: #000000;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 20px;\n box-sizing: border-box;\n background-color: #f2f2f2;\n transform: rotateX(-90deg);\n transform-origin: bottom;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card:hover .card__content {\n transform: rotateX(0deg);\n}\n\n.card__title {\n margin: 0;\n padding-left: 5px;\n font-size: 24px;\n color: #000000;\n font-weight: 700;\n}\n\n.card:hover svg {\n scale: 0;\n}\n\n.card__description {\n margin: 10px 0 0;\n font-size: 14px;\n color: #000000;\n line-height: 1.4;\n}\n/* Commands to change the shadows in dark mode\n@media (prefers-color-scheme: dark) {\n .card:hover {\n box-shadow: 0 8px 16px #000000;\n }\n}*/\n"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"09f5b5","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1375,"cssLen":4312,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n 03\n 40\n

\n Touch to unlock\n

","css":".relative{position:relative}.z-10{z-index:10}.flex{display:flex}.h-4{height:1rem}.h-80{height:20rem}.w-4{width:1rem}.w-40{width:10rem}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-around{justify-content:space-around}.gap-1{gap:0.25rem}.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))}.stroke-current{stroke:currentColor}.text-6xl{font-size:3.75rem;line-height:1}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-extrabold{font-weight:800}.font-thin{font-weight:100}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 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-gray-50{--tw-shadow-color:#f9fafb;--tw-shadow:var(--tw-shadow-colored)}.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\\:-z-10::before{content:var(--tw-content);z-index:-10}.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\\:-z-10::after{content:var(--tw-content);z-index:-10}.after\\:h-12::after{content:var(--tw-content);height:3rem}.after\\:w-12::after{content:var(--tw-content);width:3rem}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-orange-400::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(251 146 60 / 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}.group:hover .group-hover\\:duration-500{transition-duration:500ms}.group:hover .group-hover\\:before\\:-translate-y-11::before{content:var(--tw-content);--tw-translate-y:-2.75rem;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\\:before\\:translate-x-11::before{content:var(--tw-content);--tw-translate-x:2.75rem;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\\:after\\:translate-x-11::after{content:var(--tw-content);--tw-translate-x:2.75rem;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\\:after\\:translate-y-16::after{content:var(--tw-content);--tw-translate-y:4rem;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:08.000Z","isPrivate":0,"projectId":"60646f","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2120,"cssLen":2317,"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 \n\n \n\n \n\n \n

","css":".absolute{position:absolute}.relative{position:relative}.-bottom-0{bottom:-0px}.-bottom-0\\.5{bottom:-0.125rem}.-right-20{right:-5rem}.z-10{z-index:10}.-my-2{margin-top:-0.5rem;margin-bottom:-0.5rem}.flex{display:flex}.h-48{height:12rem}.h-52{height:13rem}.h-6{height:1.5rem}.w-48{width:12rem}.w-6{width:1.5rem}.w-72{width:18rem}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.border{border-width:1px}.border-4{border-width:4px}.border-sky-900{--tw-border-opacity:1;border-color:rgb(12 74 110 / var(--tw-border-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-sky-800{--tw-bg-opacity:1;background-color:rgb(7 89 133 / var(--tw-bg-opacity))}.fill-current{fill:currentColor}.fill-gray-50{fill:#f9fafb}.stroke-sky-700{stroke:#0369a1}.stroke-sky-900{stroke:#0c4a6e}.p-5{padding:1.25rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-5xl{font-size:3rem;line-height:1}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.text-sky-800{--tw-text-opacity:1;color:rgb(7 89 133 / var(--tw-text-opacity))}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.\\[transform\\:rotate3d\$20_\\2c -10\\2c _1\\2c _60deg\$\\]{transform:rotate3d(20 ,-10, 1, 60deg)}.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\\:bg-sky-900:hover{--tw-bg-opacity:1;background-color:rgb(12 74 110 / var(--tw-bg-opacity))}.hover\\:text-gray-50:hover{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.group:hover .group-hover\\:scale-125{--tw-scale-x:1.25;--tw-scale-y:1.25;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:08.000Z","isPrivate":0,"projectId":"34f17c","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1770,"cssLen":890,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".card {\n background-color: #131c25;\n border: 3px solid #659AD2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 26px;\n font-weight: 700;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n padding: 30px 20px;\n color: #659AD2;\n border-radius: 45px;\n}\n\n.App-logo {\n pointer-events: none;\n width: 140px;\n margin-bottom: 20px;\n}\n\n.App-button {\n padding: 10px 20px;\n background-color: transparent;\n color: #659AD2;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n font-size: 15px;\n border: 3px solid #659AD2;\n border-radius: 5em;\n margin-top: 20px;\n transition: 0.2s;\n}\n\n.App-button:hover {\n color: #282c34;\n background-color: #659AD2;\n}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"66817a","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":402,"cssLen":1673,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t

\n\t\t

Free plan

\n\t\t

\n\t\t\t$\n\t\t\t0\n\t\t\t/month\n\t\t

\n\t\t

Benefits:

\n\t\t

Lorem ipsum, dolor sit amet
Lorem ipsum, dolor sit amet

\n\t

\n\t\n

","css":".card {\n --main-focus: #2d8cf0;\n --font-color: #323232;\n --font-color-sub: #666;\n --bg-color: #fff;\n --main-color: #323232;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 150px;\n height: 200px;\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 padding: 10px;\n display: flex;\n flex-direction: column;\n}\n\n.card-content-wrapper {\n transform: translateY(10px);\n display: flex;\n flex-direction: column;\n gap: 5px;\n transition: all 0.7s;\n}\n\n.card-title {\n letter-spacing: 3px;\n font-size: 20px;\n font-weight: 700;\n color: var(--font-color);\n}\n\n.card-price {\n letter-spacing: 2px;\n font-size: 20px;\n color: var(--font-color);\n font-weight: 700;\n}\n\n.card-price span {\n font-size: 15px;\n color: var(--font-color-sub);\n font-weight: 500;\n}\n\n.card-subtitle {\n letter-spacing: 2px;\n font-size: 17px;\n color: var(--main-focus);\n font-weight: 500;\n}\n\n.card-benefits {\n font-size: 15px;\n padding-left: 20px;\n color: var(--font-color);\n}\n\n.card-btn {\n cursor: pointer;\n width: 100px;\n padding: 5px;\n background: var(--main-focus);\n border: none;\n border-radius: 5px;\n margin: 0 auto;\n transform: translateY(30px);\n color: var(--bg-color);\n font-weight: 500;\n font-size: 12px;\n letter-spacing: 0.7px;\n opacity: 0;\n transition: all 0.7s;\n}\n\n.card:hover > .card-btn {\n opacity: 1;\n transform: translateY(17px);\n}\n\n.card-btn:hover {\n font-weight: 700;\n letter-spacing: 1px;\n}\n\n.card:hover > .card-content-wrapper {\n transform: translateY(5px);\n}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"927312","snapshot":null,"tags":null,"title":"card by adamgiebl","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":101,"cssLen":968,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

New Magic Card

\n","css":".card {\n --background: linear-gradient(to left, #a5c1e7 0%, #9b59b6 100%);\n width: 200px;\n height: 270px;\n padding: 10px;\n border-radius: 1rem;\n overflow: visible;\n background: #a5c1e7;\n background: var(--background);\n position: relative;\n z-index: 1;\n}\n\n.card::after {\n position: absolute;\n content: \"\";\n top: 40px;\n left: 0;\n right: 0;\n z-index: -1;\n height: 100%;\n width: 100%;\n transform: scale(0.85);\n filter: blur(30px);\n background: #a5c1e7;\n background: var(--background);\n transition: opacity 0.5s;\n}\n\n.card-info {\n --color: #ffffff;\n background: var(--color);\n color: var(--color);\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: visible;\n border-radius: 0.6rem;\n}\n\n.card .title {\n font-weight: bold;\n letter-spacing: 0.2em;\n text-align: center;\n}\n\n/*Hover*/\n.card:hover::after {\n opacity: 0;\n}\n\n.card:hover .card-info {\n color: #a5c1e7;\n transition: color 1s;\n}\n"}]}},"actionData":null,"errors":null}