{"loaderData":{"0":null,"0-3":{"total":7397,"projects":[{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"d0762a","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":945,"cssLen":4855,"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 {\n position: relative\n}\n\n.z-10 {\n z-index: 10\n}\n\n.flex {\n display: flex\n}\n\n.h-56 {\n height: 14rem\n}\n\n.w-80 {\n width: 20rem\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.gap-2 {\n gap: 0.5rem\n}\n\n.overflow-hidden {\n overflow: hidden\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.bg-sky-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(3 105 161 / var(--tw-bg-opacity))\n}\n\n.text-6xl {\n font-size: 3.75rem;\n line-height: 1\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-gray-50 {\n --tw-text-opacity: 1;\n color: rgb(249 250 251 / var(--tw-text-opacity))\n}\n\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / 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-sky-500 {\n --tw-shadow-color: #0ea5e9;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.outline {\n outline-style: solid\n}\n\n.-outline-offset-8 {\n outline-offset: -8px\n}\n\n.outline-slate-400 {\n outline-color: #94a3b8\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute\n}\n\n.before\\:right-16::before {\n content: var(--tw-content);\n right: 4rem\n}\n\n.before\\:top-20::before {\n content: var(--tw-content);\n top: 5rem\n}\n\n.before\\:h-12::before {\n content: var(--tw-content);\n height: 3rem\n}\n\n.before\\:h-20::before {\n content: var(--tw-content);\n height: 5rem\n}\n\n.before\\:w-12::before {\n content: var(--tw-content);\n width: 3rem\n}\n\n.before\\:w-20::before {\n content: var(--tw-content);\n width: 5rem\n}\n\n.before\\:rounded-full::before {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.before\\:bg-sky-400::before {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(56 189 248 / 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}\n\n.before\\:duration-500::before {\n content: var(--tw-content);\n transition-duration: 500ms\n}\n\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute\n}\n\n.after\\:bottom-32::after {\n content: var(--tw-content);\n bottom: 8rem\n}\n\n.after\\:right-16::after {\n content: var(--tw-content);\n right: 4rem\n}\n\n.after\\:h-12::after {\n content: var(--tw-content);\n height: 3rem\n}\n\n.after\\:h-24::after {\n content: var(--tw-content);\n height: 6rem\n}\n\n.after\\:w-12::after {\n content: var(--tw-content);\n width: 3rem\n}\n\n.after\\:w-24::after {\n content: var(--tw-content);\n width: 6rem\n}\n\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.after\\:bg-sky-700::after {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(3 105 161 / var(--tw-bg-opacity))\n}\n\n.after\\:blur-xl::after {\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}\n\n.after\\:duration-500::after {\n content: var(--tw-content);\n transition-duration: 500ms\n}\n\n.hover\\:rotate-12:hover {\n --tw-rotate: 12deg;\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\\:duration-500:hover {\n transition-duration: 500ms\n}\n\n.hover\\:before\\:-translate-x-32:hover::before {\n content: var(--tw-content);\n --tw-translate-x: -8rem;\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\\:before\\:translate-y-12:hover::before {\n content: var(--tw-content);\n --tw-translate-y: 3rem;\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\\:after\\:translate-x-24:hover::after {\n content: var(--tw-content);\n --tw-translate-x: 6rem;\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\\:after\\:duration-500:hover::after {\n content: var(--tw-content);\n transition-duration: 500ms\n}"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"9c4e14","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6669,"cssLen":1906,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Web Design templates\n Selection

Lorem ipsum dolor sit amet, consectetur adipiscing elitsed do eiusmod.

135 Projects / 75%

","css":".card {\n --main-color: #000;\n --bg-color: #8DD4EB;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 300px;\n padding: 25px;\n background: var(--bg-color);\n border-radius: 20px;\n}\n\n.card__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.card___wrapper-acounts {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n z-index: 1;\n cursor: pointer;\n}\n\n.card___wrapper-acounts > div:nth-child(2) {\n position: absolute;\n left: 25px;\n z-index: -1;\n}\n\n.card___wrapper-acounts > div:nth-child(3) {\n position: absolute;\n left: 50px;\n z-index: -2;\n}\n\n.card__score {\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n font-size: 16px;\n color: #fff;\n width: 40px;\n height: 40px;\n border-radius: 100%;\n background: var(--main-color);\n}\n\n.card__acounts {\n width: 42px;\n height: 42px;\n}\n\n.card__acounts svg {\n width: 100%;\n height: 100%;\n}\n\n.card__menu {\n width: 40px;\n height: 40px;\n background: var(--bg-color);\n border-radius: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.card__title {\n margin-top: 50px;\n font-weight: 900;\n font-size: 25px;\n color: var(--main-color);\n}\n\n.card__subtitle {\n margin-top: 15px;\n font-weight: 400;\n font-size: 15px;\n color: var(--main-color);\n}\n\n.card__indicator {\n margin-top: 50px;\n font-weight: 500;\n font-size: 14px;\n color: var(--main-color);\n}\n\n.card__progress progress {\n width: 100%;\n height: 4px;\n border-radius: 100px;\n}\n\n.card__progress progress::-webkit-progress-bar {\n background-color: #00000030;\n border-radius: 100px;\n}\n\n.card__progress progress::-webkit-progress-value {\n background-color: var(--main-color);\n border-radius: 100px;\n}\n\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"057cdb","snapshot":null,"tags":null,"title":"card by escannord","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":789,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".card {\n width: 200px;\n height: 200px;\n background-color: transparent;\n box-shadow: inset 10px 10px 10px 10px rgba(0, 0, 0, 0.158),\n 10px 10px 20px rgba(0, 0, 0, 0.466),\n inset -10px -10px 10px 10px rgba(255, 255, 255, 0.897);\n border-radius: 51% 49% 62% 38% / 25% 57% 43% 75%;\n position: relative;\n}\n\n.card::after {\n content: \"\";\n display: inline-block;\n width: 10px;\n height: 10px;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.842);\n border-radius: 80% 20% 91% 9% / 48% 67% 33% 52%;\n top: 40px;\n left: 40px;\n}\n\n.card::before {\n content: \"\";\n display: inline-block;\n width: 20px;\n height: 20px;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.842);\n border-radius: 48% 52% 45% 55% / 48% 67% 33% 52%;\n top: 35px;\n left: 60px;\n}\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"5e69a1","snapshot":null,"tags":null,"title":"card by Vikikos","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":635,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".card {\n width: 190px;\n height: 254px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.212);\n background: #fff;\n display: flex;\n border-radius: 20px;\n justify-content: center;\n position: relative;\n transition: all .4s;\n}\n\n.card::before {\n content: '---content---';\n letter-spacing: 0.2em;\n position: absolute;\n bottom: 8px;\n left: 20px;\n color: rgb(51, 51, 51);\n font-size: 0.8em;\n font-weight: 700;\n}\n\n.card div {\n width: 100%;\n height: 100%;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.212);\n cursor: pointer;\n z-index: 10;\n transition: all .4s;\n background-color: #fff;\n}\n\n.card:hover div {\n transform: translateY(-30px);\n}"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"545a71","snapshot":null,"tags":null,"title":"card by themrsami","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1335,"cssLen":2608,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hello!

Hover Me (Love You Guys)

You're a monster. I can swallow a bottle of alcohol and I'll feel like Godzilla. Better hit the deck like the card dealer.

\n \n

\n","css":".m-5 {\n margin: 1.25rem\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto\n}\n\n.mt-1 {\n margin-top: 0.25rem\n}\n\n.mt-2 {\n margin-top: 0.5rem\n}\n\n.mt-4 {\n margin-top: 1rem\n}\n\n.block {\n display: block\n}\n\n.flex {\n display: flex\n}\n\n.max-w-md {\n max-width: 28rem\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-between {\n justify-content: space-between\n}\n\n.space-x-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1rem * var(--tw-space-x-reverse));\n margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-xl {\n border-radius: 0.75rem\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.p-8 {\n padding: 2rem\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.font-semibold {\n font-weight: 600\n}\n\n.uppercase {\n text-transform: uppercase\n}\n\n.leading-tight {\n line-height: 1.25\n}\n\n.tracking-wide {\n letter-spacing: 0.025em\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity))\n}\n\n.text-indigo-500 {\n --tw-text-opacity: 1;\n color: rgb(99 102 241 / var(--tw-text-opacity))\n}\n\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / 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-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-500 {\n transition-duration: 500ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.hover\\:bg-black:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / 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}\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@media (min-width: 768px) {\n .md\\:flex {\n display: flex\n }\n\n .md\\:max-w-2xl {\n max-width: 42rem\n }\n}"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"f8f2b3","snapshot":null,"tags":null,"title":"card by faxriddin20","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4075,"cssLen":1278,"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 \n\n \n \n \n\n \n \n \n

\n","css":".card {\n width: fit-content;\n height: fit-content;\n background-color: rgb(238, 238, 238);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 25px 25px;\n gap: 20px;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);\n}\n\n/* for all social containers*/\n.socialContainer {\n width: 52px;\n height: 52px;\n border-radius: 5px;\n background-color: rgb(44, 44, 44);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n transition-duration: 0.3s;\n}\n/* instagram*/\n.containerOne:hover {\n background-color: #d62976;\n transition-duration: 0.3s;\n}\n/* twitter*/\n.containerTwo:hover {\n background-color: #00acee;\n transition-duration: 0.3s;\n}\n/* linkdin*/\n.containerThree:hover {\n background-color: #0072b1;\n transition-duration: 0.3s;\n}\n/* Whatsapp*/\n.containerFour:hover {\n background-color: green;\n transition-duration: 0.3s;\n}\n\n.socialContainer:active {\n transform: scale(0.9);\n transition-duration: 0.3s;\n}\n\n.socialSvg {\n width: 17px;\n}\n\n.socialSvg path {\n fill: rgb(255, 255, 255);\n}\n\n.socialContainer:hover .socialSvg {\n animation: slide-in-top 0.3s both;\n}\n\n@keyframes slide-in-top {\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"004859","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":981,"cssLen":2681,"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 90\n \n

\n","css":".relative{position:relative}.z-10{z-index:10}.flex{display:flex}.h-44{height:11rem}.h-5{height:1.25rem}.w-24{width:6rem}.w-5{width:1.25rem}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-evenly{justify-content:space-evenly}.gap-1{gap:0.25rem}.rounded-2xl{border-radius:1rem}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23 / var(--tw-bg-opacity))}.fill-red-500{fill:#ef4444}.text-6xl{font-size:3.75rem;line-height:1}.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)}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:right-6::before{content:var(--tw-content);right:1.5rem}.before\\:top-20::before{content:var(--tw-content);top:5rem}.before\\:h-12::before{content:var(--tw-content);height:3rem}.before\\:h-8::before{content:var(--tw-content);height:2rem}.before\\:w-12::before{content:var(--tw-content);width:3rem}.before\\:w-8::before{content:var(--tw-content);width:2rem}.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)}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:-z-10::after{content:var(--tw-content);z-index:-10}.after\\:h-80::after{content:var(--tw-content);height:20rem}.after\\:w-20::after{content:var(--tw-content);width:5rem}.after\\:rounded-2xl::after{content:var(--tw-content);border-radius:1rem}.after\\:bg-sky-700::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(3 105 161 / var(--tw-bg-opacity))}.after\\:shadow-inner::after{content:var(--tw-content);--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)}.after\\:shadow-slate-900::after{content:var(--tw-content);--tw-shadow-color:#0f172a;--tw-shadow:var(--tw-shadow-colored)}"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"2584ab","snapshot":null,"tags":null,"title":"card by pedertanberg","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":378,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

Good morning

","css":".card {\n width: 150px;\n height: 200px;\n background: #ffffff;\n transform: rotate(20deg) skew(-10deg, -5deg);\n transition: box_shadow .25s ease-in;\n display: flex;\n justify-content: center;\n text-align: center;\n font-size: 20px;\n line-height: 200px;\n}\n\n.card:hover {\n box-shadow: rgba(255,255,255,0.5) 5px 3px,\n rgba(255,255,255,0.4) 10px 6px,\n rgba(255,255,255,0.3) 15px 9px;\n}"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"17ad4e","snapshot":null,"tags":null,"title":"card by Li-Deheng","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4596,"cssLen":9903,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t

\n\t\t\n\t

\n\t

What did you think
of this post?

\t\t\t\t\n\t

\n\t\t

\n\t\t\t\n\t\t\t\t123\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\n\t\t

\n\t\t

\n\t\t\t\n\t\t\t\t\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t4\n\t\t\t\n\t\t

\n\t

","css":".like-dislike-container {\n --dark-grey: #e9e9e9;\n --middle-grey: #e0e0e0;\n --lightest-grey: linear-gradient(#3b3b3b,#313131);\n --shadow: 0 5px 15px 0 #00000026;\n --shadow-active: 0 5px 5px 0 #00000026;\n --border-radius-main: 10px;\n --border-radius-icon: 50px;\n position: relative;\n display: flex;\n text-align: center;\n flex-direction: column;\n align-items: center;\n cursor: default;\n color: var(--dark-grey);\n opacity: .9;\n margin: auto;\n padding: 1.5rem;\n font-weight: 600;\n background: var(--lightest-grey);\n max-width: max-content;\n border-radius: var(--border-radius-main);\n box-shadow: var(--shadow);\n transition: .2s ease all;\n}\n\n.like-dislike-container:hover {\n box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .tool-box {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n top: 0;\n right: 0;\n border-radius: var(--border-radius-main);\n}\n\n.like-dislike-container .btn-close {\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n width: .8rem;\n height: .8rem;\n color: transparent;\n font-size: 0;\n cursor: pointer;\n background-color: #ff5f5f80;\n border: none;\n border-radius: var(--border-radius-main);\n transition: .2s ease all;\n}\n\n.like-dislike-container .btn-close:hover {\n width: 1rem;\n height: 1rem;\n font-size: 1rem;\n color: #ffffff;\n background-color: #ff5f5fcc;\n box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .btn-close:active {\n width: .9rem;\n height: .9rem;\n font-size: .9rem;\n color: #ffffffde;\n --shadow-btn-close: 0 3px 3px 0 #00000026;\n box-shadow: var(--shadow-btn-close);\n}\n\n.like-dislike-container .text-content {\n margin-bottom: 1rem;\n font-size: 18px;\n line-height: 1.6;\n cursor: default;\n}\n\n.like-dislike-container .icons-box {\n display: flex;\n}\n\n.like-dislike-container .icons {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: .6;\n margin: 0 0.5rem;\n cursor: pointer;\n user-select: none;\n border: 1px solid var(--middle-grey);\n border-radius: var(--border-radius-icon);\n transition: .2s ease all;\n}\n\n.like-dislike-container .icons:hover {\n opacity: .9;\n box-shadow: var(--shadow);\n}\n\n.like-dislike-container .icons:active {\n opacity: .9;\n box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .icons .btn-label {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0 0.5rem;\n cursor: pointer;\n position: relative;\n}\n\n.like-dislike-container .like-text-content {\n border-right: 0.1rem solid var(--dark-grey);\n padding: 0 0.6rem 0 0.5rem;\n pointer-events: none;\n}\n\n.like-dislike-container .dislike-text-content {\n border-left: 0.1rem solid var(--dark-grey);\n padding: 0 0.5rem 0 0.6rem;\n pointer-events: none;\n}\n\n.like-dislike-container .icons .svgs {\n width: 1.3rem;\n fill: #fff;\n box-sizing: content-box;\n padding: 10px 10px;\n transition: .2s ease all;\n}\n\n/* Hide the default checkbox */\n.like-dislike-container .icons .input-box {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.like-dislike-container .icons #icon-like-regular {\n display: block;\n}\n\n.like-dislike-container .icons #icon-like-solid {\n display: none;\n}\n\n.like-dislike-container .icons:hover :is(#icon-like-solid, #icon-like-regular) {\n animation: rotate-icon-like 0.7s ease-in-out both;\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-regular {\n display: none;\n animation: checked-icon-like 0.5s;\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-solid {\n display: block;\n animation: checked-icon-like 0.5s;\n}\n\n.like-dislike-container .icons #icon-dislike-regular {\n display: block;\n transform: rotate(180deg);\n}\n\n.like-dislike-container .icons #icon-dislike-solid {\n display: none;\n transform: rotate(180deg);\n}\n\n.like-dislike-container .icons:hover :is(#icon-dislike-solid, #icon-dislike-regular) {\n animation: rotate-icon-dislike 0.7s ease-in-out both;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-regular {\n display: none;\n animation: checked-icon-dislike 0.5s;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-solid {\n display: block;\n animation: checked-icon-dislike 0.5s;\n}\n\n.like-dislike-container .icons .fireworks {\n transform: scale(0.4);\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ .fireworks > .checked-like-fx {\n position: absolute;\n width: 10px;\n height: 10px;\n right: 40px;\n border-radius: 50%;\n box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;\n animation-duration: 1.25s, 1.25s, 6.25s;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ .fireworks > .checked-dislike-fx {\n position: absolute;\n width: 10px;\n height: 10px;\n left: 40px;\n border-radius: 50%;\n box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;\n animation-duration: 1.25s, 1.25s, 6.25s;\n}\n\n/* Shake Animation */\n@keyframes rotate-icon-like {\n 0% {\n transform: rotate(0deg) translate3d(0, 0, 0);\n }\n\n 25% {\n transform: rotate(3deg) translate3d(0, 0, 0);\n }\n\n 50% {\n transform: rotate(-3deg) translate3d(0, 0, 0);\n }\n\n 75% {\n transform: rotate(1deg) translate3d(0, 0, 0);\n }\n\n 100% {\n transform: rotate(0deg) translate3d(0, 0, 0);\n }\n}\n\n@keyframes rotate-icon-dislike {\n 0% {\n transform: rotate(180deg) translate3d(0, 0, 0);\n }\n\n 25% {\n transform: rotate(183deg) translate3d(0, 0, 0);\n }\n\n 50% {\n transform: rotate(177deg) translate3d(0, 0, 0);\n }\n\n 75% {\n transform: rotate(181deg) translate3d(0, 0, 0);\n }\n\n 100% {\n transform: rotate(180deg) translate3d(0, 0, 0);\n }\n}\n\n/* Checked Animation */\n@keyframes checked-icon-like {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: scale(1.2) rotate(-10deg);\n }\n}\n\n@keyframes checked-icon-dislike {\n 0% {\n transform: scale(0) rotate(180deg);\n opacity: 0;\n }\n\n 50% {\n transform: scale(1.2) rotate(170deg);\n }\n}\n\n/* Fireworks Animation */\n@keyframes fireworks-position {\n 0%, 19.9% {\n margin-top: 10%;\n margin-left: 40%;\n }\n\n 20%, 39.9% {\n margin-top: 40%;\n margin-left: 30%;\n }\n\n 40%, 59.9% {\n margin-top: 20%;\n margin-left: 70%;\n }\n\n 60%, 79.9% {\n margin-top: 30%;\n margin-left: 20%;\n }\n\n 80%, 99.9% {\n margin-top: 30%;\n margin-left: 80%;\n }\n}\n\n@keyframes fireworks-gravity {\n to {\n transform: translateY(200px);\n opacity: 0;\n }\n}\n\n@keyframes fireworks-bang {\n to {\n box-shadow: 114px -107.3333333333px #8800ff, 212px -166.3333333333px #a600ff, 197px -6.3333333333px #ff006a, 179px -329.3333333333px #3300ff, -167px -262.3333333333px #ff0062, 233px 65.6666666667px #ff008c, 81px 42.6666666667px #0051ff, -13px 54.6666666667px #00ff2b, -60px -183.3333333333px #0900ff, 127px -259.3333333333px #ff00e6, 117px -122.3333333333px #00b7ff, 95px 20.6666666667px #ff8000, 115px 1.6666666667px #0004ff, -160px -328.3333333333px #00ff40, 69px -242.3333333333px #000dff, -208px -230.3333333333px #ff0400, 30px -15.3333333333px #e6ff00, 235px -15.3333333333px #fb00ff, 80px -232.3333333333px #d5ff00, 175px -173.3333333333px #00ff3c, -187px -176.3333333333px #aaff00, 4px 26.6666666667px #ff6f00, 227px -106.3333333333px #ff0099, 119px 17.6666666667px #00ffd5, -102px 4.6666666667px #ff0088, -16px -4.3333333333px #00fff7, -201px -310.3333333333px #00ffdd, 64px -181.3333333333px #f700ff, -234px -15.3333333333px #00fffb, -184px -263.3333333333px #aa00ff, 96px -303.3333333333px #0037ff, -139px 10.6666666667px #0026ff, 25px -205.3333333333px #00ff2b, -129px -322.3333333333px #40ff00, -235px -187.3333333333px #26ff00, -136px -237.3333333333px #0091ff, -82px -321.3333333333px #6a00ff, 7px -267.3333333333px #ff00c8, -155px 30.6666666667px #0059ff, -85px -73.3333333333px #6a00ff, 60px -199.3333333333px #55ff00, -9px -289.3333333333px #00ffaa, -208px -167.3333333333px #00ff80, -13px -299.3333333333px #ff0004, 179px -164.3333333333px #ff0044, -112px 12.6666666667px #0051ff, -209px -125.3333333333px #ff00bb, 14px -101.3333333333px #00ff95, -184px -292.3333333333px #ff0099, -26px -168.3333333333px #09ff00, 129px -67.3333333333px #0084ff, -17px -23.3333333333px #0059ff, 129px 34.6666666667px #7300ff, 35px -24.3333333333px #ffd900, -12px -297.3333333333px #ff8400, 129px -156.3333333333px #0dff00, 157px -29.3333333333px #1a00ff, -221px 6.6666666667px #ff0062, 0px -311.3333333333px #ff006a, 155px 50.6666666667px #00ffaa, -71px -318.3333333333px #0073ff;\n }\n}"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"93ad94","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":562,"cssLen":2851,"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}.-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))}.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))}"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"8d03b3","snapshot":null,"tags":null,"title":"card by EcheverriaJesus","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1602,"cssLen":1688,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

$300.00

Product Name

Product Description

last update:

14/08/2023

\n \n \n

","css":".flex{display:flex}.h-48{height:12rem}.w-6{width:1.5rem}.w-72{width:18rem}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-around{justify-content:space-around}.gap-2{gap:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.stroke-green-700{stroke:#15803d}.stroke-red-700{stroke:#b91c1c}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-2{padding-bottom:0.5rem}.pb-3{padding-bottom:0.75rem}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.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-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61 / var(--tw-text-opacity))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28 / var(--tw-text-opacity))}.duration-200{transition-duration:200ms}.hover\\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.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))}.hover\\:cursor-pointer:hover{cursor:pointer}"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"51cb3c","snapshot":null,"tags":null,"title":"card by Muhammad-Abdullah-Zeeshan","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":103,"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(50, 126, 224);\n border-radius: 40px 0 40px 0;\n}"}]}},"actionData":null,"errors":null}