{"loaderData":{"0":null,"0-3":{"total":7397,"projects":[{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"f9705e","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":817,"cssLen":1388,"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","css":".cookies-card {\n width: 280px;\n height: fit-content;\n background-color: rgb(255, 250, 250);\n border-radius: 10px;\n border: 1px solid rgb(206, 206, 206);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: space-between;\n padding: 20px;\n gap: 15px;\n position: relative;\n font-family: Arial, Helvetica, sans-serif;\n box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.066);\n}\n\n.cookie-heading {\n color: rgb(34, 34, 34);\n font-weight: 800;\n}\n.cookie-para {\n font-size: 11px;\n font-weight: 400;\n color: rgb(51, 51, 51);\n}\n.button-wrapper {\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n}\n.cookie-button {\n width: 50%;\n padding: 8px 0;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n.accept {\n background-color: rgb(34, 34, 34);\n color: white;\n}\n.reject {\n background-color: #ececec;\n color: rgb(34, 34, 34);\n}\n.accept:hover {\n background-color: rgb(0, 0, 0);\n}\n.reject:hover {\n background-color: #ddd;\n}\n.exit-button {\n position: absolute;\n top: 17px;\n right: 17px;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n.exit-button:hover {\n background-color: #ddd;\n color: white;\n}\n.svgIconCross {\n height: 10px;\n}\n"},{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"8b192a","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2119,"cssLen":2313,"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-6{height:1.5rem}.h-96{height:24rem}.w-48{width:12rem}.w-6{width:1.5rem}.w-64{width:16rem}.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\$1_\\2c -1\\2c _1\\2c _60deg\$\\]{transform:rotate3d(1 ,-1, 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:04.000Z","isPrivate":0,"projectId":"ba10e5","snapshot":null,"tags":null,"title":"card by Sourcesketch","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":797,"cssLen":1880,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card 1

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

\n \n

\n\n

Card 2

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

\n \n

\n","css":".card {\n display: flex;\n height: 280px;\n width: 200px;\n background-color: #2b223f;\n border-radius: 10px;\n box-shadow: -1rem 0 3rem #00000044;\n margin-left: -80px;\n transition: 0.4s ease-out;\n position: relative;\n left: 0px;\n}\n\n.card:not(:first-child) {\n margin-left: -50px;\n}\n\n.card:hover {\n transform: translateY(-20px);\n transition: 0.4s ease-out;\n text-shadow: 2px 2px 8px #6e5b94;\n}\n\n.card:hover ~ .card {\n position: relative;\n left: 50px;\n transform: rotateX(-15deg) rotateY(10deg);\n transition: 0.4s ease-out;\n}\n\n.title-1 {\n color: #ffffff;\n font-size: 28px;\n font-weight: 800;\n position: absolute;\n left: 20px;\n top: 15px;\n}\n\n.btn {\n position: absolute;\n top: 195px;\n margin: 0 20px;\n width: 120px;\n height: 32px;\n border-radius: 8px;\n border: none;\n background-color: #4a2f7c;\n color: #fff;\n transition: 0.4s ease-out;\n}\n\n.btn:hover {\n transition: 0.4s ease-out;\n background-color: #8a4ff8;\n color: #ffffff;\n box-shadow: 0px 0px 20px rgba(157, 71, 255, 0.5),\n 0px 5px 5px -1px rgba(163, 58, 233, 0.25),\n inset 4px 4px 8px rgba(219, 175, 255, 0.5),\n inset -4px -4px 8px rgba(137, 19, 216, 0.35);\n}\n\n.bar {\n position: relative;\n top: 250px;\n\n height: 5px;\n width: 100%;\n}\n\n.emptybar {\n background-color: #201c29;\n width: 100%;\n height: 100%;\n}\n\n.filledbar {\n position: absolute;\n top: 0px;\n z-index: 3;\n width: 0px;\n height: 100%;\n background: #d059ff;\n background: linear-gradient(90deg, #6831cfab, #a777ff 100%);\n transition: 0.6s ease-out;\n}\n\n.card:hover .filledbar {\n width: 100%;\n transition: 0.4s ease-out;\n}\n\n.content {\n position: absolute;\n padding: 20px;\n top: 60px;\n color: #eae0fd;\n font-size: 0.7rem;\n}\n\n.stroke {\n stroke: white;\n stroke-dasharray: 360;\n stroke-dashoffset: 360;\n transition: 0.6s ease-out;\n}\n\n.card:hover .stroke {\n stroke-dashoffset: 100;\n transition: 0.6s ease-out;\n}\n"},{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"d5293d","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":198,"cssLen":664,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

How to make a simple ui card?

\n \n

\n","css":".card {\n width: 320px;\n height: 350px;\n padding: 20px;\n color: white;\n background: transparent;\n border: 2px solid #ff6b00;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n transform-origin: center center;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card .main-content {\n flex: 1;\n}\n\n.header {\n margin-bottom: 24px;\n}\n\n.card .heading {\n font-size: 32px;\n font-weight: 400;\n line-height: 1.2;\n}\n\n.card .footer {\n font-weight: 400;\n margin-right: 4px;\n}\n\n.card:hover {\n border-radius: 12px;\n background-color: #ff6b00;\n scale: 0.95;\n rotate: 8deg;\n box-shadow: 0px 3px 187.5px 7.5px rgba(255, 107, 0, 0.4);\n}\n"},{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"ef7e32","snapshot":null,"tags":null,"title":"card by JaydipPrajapati1910","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":941,"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 display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 0px 15px;\n background-color: red;\n border-radius: 10px;\n border: none;\n color: white;\n position: relative;\n cursor: pointer;\n font-weight: 900;\n transition-duration: .2s;\n background: linear-gradient(0deg, #000, #272727);\n}\n\n.card:before, .card:after {\n content: '';\n position: absolute;\n left: -2px;\n top: -2px;\n border-radius: 10px;\n background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, \n\t\t#0000ff, #00ff00,#ffff00, #ff0000);\n background-size: 400%;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n z-index: -1;\n animation: steam 20s linear infinite;\n}\n\n@keyframes steam {\n 0% {\n background-position: 0 0;\n }\n\n 50% {\n background-position: 400% 0;\n }\n\n 100% {\n background-position: 0 0;\n }\n}\n\n.card:after {\n filter: blur(100px);\n}\n\n"},{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"fb63be","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3248,"cssLen":4227,"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 fitbit\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-40 {\n height: 10rem\n}\n\n.h-5 {\n height: 1.25rem\n}\n\n.h-52 {\n height: 13rem\n}\n\n.h-56 {\n height: 14rem\n}\n\n.h-60 {\n height: 15rem\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.w-52 {\n width: 13rem\n}\n\n.w-56 {\n width: 14rem\n}\n\n.w-60 {\n width: 15rem\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-center {\n justify-content: 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.rounded-3xl {\n border-radius: 1.5rem\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-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(14 165 233 / 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-lg {\n font-size: 1.125rem;\n line-height: 1.75rem\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.font-light {\n font-weight: 300\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.text-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity))\n}\n\n.opacity-0 {\n opacity: 0\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\\:-right-2::before {\n content: var(--tw-content);\n right: -0.5rem\n}\n\n.before\\:top-16::before {\n content: var(--tw-content);\n top: 4rem\n}\n\n.before\\:top-24::before {\n content: var(--tw-content);\n top: 6rem\n}\n\n.before\\:-z-10::before {\n content: var(--tw-content);\n z-index: -10\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\\:w-3::before {\n content: var(--tw-content);\n width: 0.75rem\n}\n\n.before\\:rounded-2xl::before {\n content: var(--tw-content);\n border-radius: 1rem\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\\:bg-sky-500::before {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(14 165 233 / var(--tw-bg-opacity))\n}\n\n.before\\:shadow-inner::before {\n content: var(--tw-content);\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.before\\:shadow-gray-50::before {\n content: var(--tw-content);\n --tw-shadow-color: #f9fafb;\n --tw-shadow: var(--tw-shadow-colored)\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.hover\\:opacity-100:hover {\n opacity: 1\n}\n\n.group:hover .group-hover\\:duration-300 {\n transition-duration: 300ms\n}"},{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"615d4c","snapshot":null,"tags":null,"title":"card by ahmed150up2","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3112,"cssLen":1715,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Currently Playing

Time in a Bottle

Jim Corce

My Way

Frank Sinatra

Lemon Tree

Fools Garden

","css":".main {\n background-color: white;\n padding: 1em;\n padding-bottom: 1.1em;\n border-radius: 15px;\n margin: 1em;\n}\n\n.loader {\n display: flex;\n flex-direction: row;\n height: 4em;\n padding-left: 1em;\n padding-right: 1em;\n transform: rotate(180deg);\n justify-content: right;\n border-radius: 10px;\n transition: .4s ease-in-out;\n}\n\n.loader:hover {\n cursor: pointer;\n background-color: lightgray;\n}\n\n.currentplaying {\n display: flex;\n margin: 1em;\n}\n\n.soundcloud {\n width: 50px;\n height: 50px;\n margin-right: 0.6em;\n}\n\n.heading {\n color: black;\n font-size: 1.1em;\n font-weight: bold;\n align-self: center;\n}\n\n.loading {\n display: flex;\n margin-top: 1em;\n margin-left: 0.3em;\n}\n\n.load {\n width: 2px;\n height: 33px;\n background-color: #ff8800;\n animation: 1s move6 infinite;\n border-radius: 5px;\n margin: 0.1em;\n}\n\n.load:nth-child(1) {\n animation-delay: 0.2s;\n}\n\n.load:nth-child(2) {\n animation-delay: 0.4s;\n}\n\n.load:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n.play {\n position: relative;\n left: 0.35em;\n height: 1.6em;\n width: 1.6em;\n clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);\n background-color: black;\n transform: rotate(-90deg);\n align-self: center;\n margin-top: 0.7em;\n justify-self: center;\n}\n\n.albumcover {\n position: relative;\n margin-right: 1em;\n height: 40px;\n width: 40px;\n background-color: rgb(233, 232, 232);\n align-self: center;\n border-radius: 5px;\n}\n\n.song {\n position: relative;\n transform: rotate(180deg);\n margin-right: 1em;\n color: black;\n align-self: center;\n}\n\n.artist {\n font-size: 0.6em;\n}\n\n@keyframes move6 {\n 0% {\n height: 0.2em;\n }\n\n 25% {\n height: 0.7em;\n }\n\n 50% {\n height: 1.5em;\n }\n\n 100% {\n height: 0.2em;\n }\n}"},{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"cd835e","snapshot":null,"tags":null,"title":"card by shahbaz4783","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1001,"cssLen":1214,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Affiliate and Influencer Marketing

Posted on 23 Dec, 2023

\n\n

$120

Budget

Intermediate

Experience

\n\n

\n Are you a highly motivated and results-driven individual with a passion for\n affiliate and influencer marketing? Jaspr, a fast-growing company\n specializing in air quality products, is seeking a dedicated specialist to\n help us scale our affiliate and influencer marketing efforts, utilizing\n tools like Hype Auditor.\n

\n\n

marketing

seo

content writing

\n\n

\n \">\n \n \n

\n","css":".job-card {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 1.2em;\n box-shadow: #091e4240 0px 1px 1px, #091e4221 0px 0px 1px 1px;\n border-radius: 0.6em;\n padding: 1em;\n max-width: 30em;\n}\n\n.text-title {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n font-size: 1.25em;\n font-weight: 600;\n font-family: \"Noto Sans\", sans-serif;\n}\n\n.text-body {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n font-family: \"Poppins\", sans-serif;\n letter-spacing: 0.4px;\n}\n\n.post-date {\n color: #598551;\n}\n\n.budget-exp {\n display: flex;\n gap: 5em;\n}\n\n.budget-exp .value {\n font-size: 1em;\n font-weight: 600;\n}\n\n.budget-exp .label {\n font-size: 1em;\n color: #598551;\n}\n\n.card-btn {\n border: none;\n font-size: 1rem;\n background-color: green;\n color: white;\n cursor: pointer;\n transition: all 0.3s ease;\n border-radius: 2em;\n padding: 0.6em 1em;\n}\n\n.card-btn:hover {\n background-color: #026602;\n}\n\n.tags article {\n display: flex;\n flex-wrap: wrap;\n gap: 0.6em;\n}\n\n.tags p {\n border-radius: 1.2em;\n padding: 0.2em 0.5em;\n background-color: #f2f7f2;\n color: #598551;\n}\n"},{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"e92f0c","snapshot":null,"tags":null,"title":"card by andreafortuna00","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4445,"cssLen":1076,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n $ 251\n

\n \n Connect 80 websites \n
\n \n Connect up to 5 bank accounts \n
\n \n Track up to 50 credit cards \n
\n \n Analytics support \n
\n \n Export up to 12 months data \n
\n \n Cloud service 24/7 \n

\n\n Get started\n \n

","css":".card {\n max-width: 320px;\n display: flex;\n flex-direction: column;\n border-radius: 1.5rem;\n background-color: rgba(0, 0, 0, 1);\n padding: 1.5rem;\n box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3);\n}\n\n.price {\n font-size: 3rem;\n line-height: 1;\n font-weight: 600;\n color: rgba(255, 255, 255, 1);\n}\n\n.lists {\n margin-top: 2.5rem;\n display: flex;\n flex-direction: column;\n grid-row-gap: 0.75rem;\n row-gap: 0.75rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n color: rgba(255, 255, 255, 1);\n}\n\n.list {\n display: flex;\n align-items: center;\n}\n\n.list svg {\n height: 1rem;\n width: 1rem;\n}\n\n.list span {\n margin-left: 1rem;\n}\n\n.action {\n margin-top: 2rem;\n width: 100%;\n border: 2px solid rgba(255, 255, 255, 1);\n border-radius: 9999px;\n background-color: rgba(255, 255, 255, 1);\n padding: 0.625rem 1.5rem;\n font-weight: 600;\n text-align: center;\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 1);\n outline: none;\n text-decoration: none;\n transition: all .2s ease;\n}\n\n.action:hover {\n color: rgba(255, 255, 255, 1);\n background-color: transparent;\n}"},{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"95f932","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":431,"cssLen":1664,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Free plan

\n $\n 0\n /month\n

Benefits:

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

\n \n

\n","css":".card {\n --main-focus: #2d8cf0;\n --font-color: #fefefe;\n --font-color-sub: #7e7e7e;\n --bg-color: #111;\n --main-color: #fefefe;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n width: 150px;\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}\n"},{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"78cfef","snapshot":null,"tags":null,"title":"card by JaydipPrajapati1910","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":95,"cssLen":1512,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n Hover Me\n \n \n

","css":"ul {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n margin: 0;\n padding: 0;\n}\n\nul li {\n list-style: none;\n margin: 0 5px;\n}\n\nul li a span {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #fff;\n letter-spacing: 1px;\n transition: .5s;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n font-family: sans-serif;\n font-size: px;\n font-weight: 900;\n}\n\nul li a {\n text-decoration: none;\n display: block;\n width: 200px;\n height: 250px;\n background: #333;\n padding-left: 20px;\n transform: rotate(-30deg) skew(25deg) translate(0,0);\n transition-duration: .5s;\n box-shadow: -20px 20px 10px rgba(0,0,0,.5);\n}\n\nul li a:before {\n content: '';\n position: absolute;\n top: 10px;\n left: -20px;\n height: 100%;\n width: 20px;\n background: #444;\n transition-duration: .5s;\n transform: rotate(0deg) skewY(-45deg);\n}\n\nul li a:after {\n content: '';\n position: absolute;\n bottom: -20px;\n left: -10px;\n height: 20px;\n width: 100%;\n background: #444;\n transition-duration: .5s;\n transform: rotate(0deg) skewX(-45deg);\n}\n\nul li a:hover {\n transform: rotate(-30deg) skew(25deg) translate(20px,-15px);\n box-shadow: -50px 50px 50px rgba(0,0,0,.5);\n}\n\nul li:hover span {\n color: #fff;\n}\n\nul li:hover:nth-child(1) a {\n background: #00aced;\n}\n\nul li:hover:nth-child(1) a:before {\n background: #097aa5;\n}\n\nul li:hover:nth-child(1) a:after {\n background: #53b9e0;\n}\n\n\n"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"e31c3d","snapshot":null,"tags":null,"title":"card by Ykingdev","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3888,"cssLen":1570,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

John Doe

June 1, 2000

Great Experience!

\n\n

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

\n\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia\n odio vitae vestibulum. Donec in efficitur ipsum, sed dapibus eros.\n

\n\n","css":".mt-8{margin-top:2rem}.flex{display:flex}.h-4{height:1rem}.w-4{width:1rem}.w-full{width:100%}.max-w-md{max-width:28rem}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.rounded-md{border-radius:0.375rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-5{padding:1.25rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.text-yellow-200{--tw-text-opacity:1;color:rgb(254 240 138 / var(--tw-text-opacity))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.duration-150{transition-duration:150ms}.hover\\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;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-150:hover{transition-duration:150ms}@media (prefers-color-scheme: dark){.dark\\:bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23 / var(--tw-bg-opacity))}.dark\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}}"}]}},"actionData":null,"errors":null}