{"loaderData":{"0":null,"0-3":{"total":7264,"projects":[{"created":"2024-01-22T17:11:18.000Z","isPrivate":0,"projectId":"72126a","snapshot":null,"tags":null,"title":"card by SmookyDev","updated":"2024-01-22T17:11:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4063,"cssLen":4967,"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 Calathea Orbifolia\n

\n One of Kind & Unique Plants Collection Here at SMKY.\n

\n \n $21.00\n

\n \n Order Now\n

\n\n","css":".relative{position:relative}.z-20{z-index:20}.m-2{margin:0.5rem}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.aspect-square{aspect-ratio:1 / 1}.w-44{width:11rem}.w-full{width:100%}.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-between{justify-content:space-between}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.bg-\\[\\#abd373\\]{--tw-bg-opacity:1;background-color:rgb(171 211 115 / var(--tw-bg-opacity))}.bg-white\\/10{background-color:rgb(255 255 255 / 0.1)}.p-2{padding:0.5rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.text-5xl{font-size:3rem;line-height:1}.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-semibold{font-weight:600}.tracking-wider{letter-spacing:0.05em}.text-\\[\\#abd373\\]{--tw-text-opacity:1;color:rgb(171 211 115 / var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.shadow-\\[10px_10px_150px_\\#ff9f0d\\]{--tw-shadow:10px 10px 150px #ff9f0d;--tw-shadow-colored:10px 10px 150px 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-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:inset-0::after{content:var(--tw-content);inset:0px}.after\\:-z-20::after{content:var(--tw-content);z-index:-20}.after\\:h-full::after{content:var(--tw-content);height:100%}.after\\:w-full::after{content:var(--tw-content);width:100%}.after\\:-translate-y-full::after{content:var(--tw-content);--tw-translate-y:-100%;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))}.after\\:rounded-lg::after{content:var(--tw-content);border-radius:0.5rem}.after\\:bg-\\[\\#abd373\\]::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(171 211 115 / var(--tw-bg-opacity))}.after\\:transition-all::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\\:duration-500::after{content:var(--tw-content);transition-duration:500ms}.hover\\:transition-all:hover{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\\:duration-300:hover{transition-duration:300ms}.after\\:hover\\:translate-y-0:hover::after{content:var(--tw-content);--tw-translate-y:0px;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))}.after\\:hover\\:transition-all:hover::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\\:hover\\:duration-500:hover::after{content:var(--tw-content);transition-duration:500ms}.group:hover .group-hover\\:-translate-y-2{--tw-translate-y:-0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.group:hover .group-hover\\:bg-white\\/10{background-color:rgb(255 255 255 / 0.1)}.group:hover .group-hover\\:text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.group:hover .group-hover\\:text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))}.group:hover .group-hover\\:transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.group:hover .group-hover\\:duration-300{transition-duration:300ms}@media (min-width: 1024px){.lg\\:inline-flex{display:inline-flex}}.\\[\\&_p\\]\\:transition-all p{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.\\[\\&_p\\]\\:delay-200 p{transition-delay:200ms}"},{"created":"2024-01-22T17:11:18.000Z","isPrivate":0,"projectId":"cd8b37","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1204,"cssLen":3685,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Discount

Up to

\n 70%\n \n

*Variable prices

","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-bottom-12 {\n bottom: -3rem\n}\n\n.-right-12 {\n right: -3rem\n}\n\n.z-10 {\n z-index: 10\n}\n\n.-mt-1 {\n margin-top: -0.25rem\n}\n\n.mb-1 {\n margin-bottom: 0.25rem\n}\n\n.mb-5 {\n margin-bottom: 1.25rem\n}\n\n.inline-block {\n display: inline-block\n}\n\n.flex {\n display: flex\n}\n\n.h-40 {\n height: 10rem\n}\n\n.h-64 {\n height: 16rem\n}\n\n.w-40 {\n width: 10rem\n}\n\n.w-56 {\n width: 14rem\n}\n\n.-rotate-12 {\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.-skew-x-12 {\n --tw-skew-x: -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.-skew-y-12 {\n --tw-skew-y: -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.flex-col {\n flex-direction: column\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-end {\n justify-content: flex-end\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-gray-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity))\n}\n\n.bg-sky-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(2 132 199 / var(--tw-bg-opacity))\n}\n\n.stroke-current {\n stroke: currentColor\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.text-7xl {\n font-size: 4.5rem;\n line-height: 1\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.font-extrabold {\n font-weight: 800\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-sky-500 {\n --tw-text-opacity: 1;\n color: rgb(14 165 233 / var(--tw-text-opacity))\n}\n\n.opacity-30 {\n opacity: 0.3\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\\:top-1\\/2::before {\n content: var(--tw-content);\n top: 50%\n}\n\n.before\\:-ml-14::before {\n content: var(--tw-content);\n margin-left: -3.5rem\n}\n\n.before\\:h-0::before {\n content: var(--tw-content);\n height: 0px\n}\n\n.before\\:h-0\\.5::before {\n content: var(--tw-content);\n height: 0.125rem\n}\n\n.before\\:w-12::before {\n content: var(--tw-content);\n width: 3rem\n}\n\n.before\\:bg-gray-200::before {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity))\n}\n\n.before\\:content-\\[\\'\\'\\]::before{--tw-content:'';content:var(--tw-content)}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:top-1\\/2::after{content:var(--tw-content);top:50%}.after\\:ml-2::after{content:var(--tw-content);margin-left:0.5rem}.after\\:h-0::after{content:var(--tw-content);height:0px}.after\\:h-0\\.5::after{content:var(--tw-content);height:0.125rem}.after\\:w-12::after{content:var(--tw-content);width:3rem}.after\\:bg-gray-200::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.hover\\:bg-sky-500:hover{--tw-bg-opacity:1;background-color:rgb(14 165 233 / var(--tw-bg-opacity))}.hover\\:text-gray-50:hover{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}"},{"created":"2024-01-22T17:11:18.000Z","isPrivate":0,"projectId":"b79991","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:11:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":767,"cssLen":1333,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Delete file?

Lorem ipsum dolor sit amet, consectetur adi

\n \n \n

\n \n

\n","css":".card {\n width: 300px;\n height: fit-content;\n background: rgb(255, 255, 255);\n border-radius: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n padding: 30px;\n position: relative;\n box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.068);\n}\n.card-content {\n width: 100%;\n height: fit-content;\n display: flex;\n flex-direction: column;\n gap: 5px;\n}\n.card-heading {\n font-size: 20px;\n font-weight: 700;\n color: rgb(27, 27, 27);\n}\n.card-description {\n font-weight: 100;\n color: rgb(102, 102, 102);\n}\n.card-button-wrapper {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n}\n.card-button {\n width: 50%;\n height: 35px;\n border-radius: 10px;\n border: none;\n cursor: pointer;\n font-weight: 600;\n}\n.primary {\n background-color: rgb(255, 114, 109);\n color: white;\n}\n.primary:hover {\n background-color: rgb(255, 73, 66);\n}\n.secondary {\n background-color: #ddd;\n}\n.secondary:hover {\n background-color: rgb(197, 197, 197);\n}\n.exit-button {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n position: absolute;\n top: 20px;\n right: 20px;\n cursor: pointer;\n}\n.exit-button:hover svg {\n fill: black;\n}\n.exit-button svg {\n fill: rgb(175, 175, 175);\n}\n"},{"created":"2024-01-22T17:11:18.000Z","isPrivate":0,"projectId":"dfca4f","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2091,"cssLen":2446,"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}.-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))}.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}.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:17.000Z","isPrivate":0,"projectId":"490343","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":459,"cssLen":1044,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cookie-warning {\n background: linear-gradient(0deg, #9005bd 0%, #bc28d2 100%);\n box-shadow: 10px 5px 20px 0 rgba(144, 5, 189, 0.3);\n max-width: 400px;\n display: flex;\n color: #FFF;\n flex-direction: column;\n padding: 1.5rem;\n border-radius: 0.6rem;\n/* position: fixed; */\n left: 2.4rem;\n right: 2.4rem;\n bottom: 2.4rem;\n z-index: 100;\n}\n\n.cookie-warning__title {\n font-size: 2rem;\n margin-bottom: 0.8rem;\n}\n\n.cookie-warning__text {\n font-size: 1.1rem;\n color: rgba(255, 255, 255, 0.8);\n margin-bottom: 1rem;\n}\n\n.cookie-warning a {\n color: rgba(255, 255, 255, 0.8);\n}\n\n.cookie-warning__button-group {\n display: flex;\n justify-content: end;\n flex-wrap: wrap;\n margin-bottom: -0.5rem;\n}\n\n.cookie-warning__button {\n cursor: pointer;\n background-color: rgba(255, 255, 255, 0.2);\n border: none;\n padding: 8px 8px;\n border-radius: 0.6rem;\n margin-right: 0.8rem;\n font-size: 1rem;\n color: #FFF;\n transition: 0.15s ease;\n}\n\n.cookie-warning__button:hover {\n color: #9005bd;\n background-color: rgba(255, 255, 255, 0.8);\n}"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"4fb5b2","snapshot":null,"tags":null,"title":"card by catraco","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2709,"cssLen":2212,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Send Feedback

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

","css":".col-span-1 {\n grid-column: span 1 / span 1\n}\n\n.col-span-2 {\n grid-column: span 2 / span 2\n}\n\n.col-span-6 {\n grid-column: span 6 / span 6\n}\n\n.flex {\n display: flex\n}\n\n.grid {\n display: grid\n}\n\n.h-28 {\n height: 7rem\n}\n\n.resize-none {\n resize: none\n}\n\n.grid-cols-6 {\n grid-template-columns: repeat(6, minmax(0, 1fr))\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.rounded-lg {\n border-radius: 0.5rem\n}\n\n.rounded-xl {\n border-radius: 0.75rem\n}\n\n.border {\n border-width: 1px\n}\n\n.border-slate-600 {\n --tw-border-opacity: 1;\n border-color: rgb(71 85 105 / var(--tw-border-opacity))\n}\n\n.border-slate-700 {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity))\n}\n\n.bg-slate-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(51 65 85 / var(--tw-bg-opacity))\n}\n\n.bg-slate-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(30 41 59 / var(--tw-bg-opacity))\n}\n\n.fill-slate-300 {\n fill: #cbd5e1\n}\n\n.stroke-slate-300 {\n stroke: #cbd5e1\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.text-center {\n text-align: center\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-slate-300 {\n --tw-text-opacity: 1;\n color: rgb(203 213 225 / var(--tw-text-opacity))\n}\n\n.text-slate-600 {\n --tw-text-opacity: 1;\n color: rgb(71 85 105 / var(--tw-text-opacity))\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.placeholder\\:text-slate-300::placeholder {\n --tw-text-opacity: 1;\n color: rgb(203 213 225 / var(--tw-text-opacity))\n}\n\n.placeholder\\:opacity-50::placeholder {\n opacity: 0.5\n}\n\n.hover\\:border-slate-300:hover {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity))\n}\n\n.focus\\:border-slate-300:focus {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity))\n}\n\n.focus\\:bg-blue-600:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity))\n}\n\n.focus\\:fill-blue-200:focus {\n fill: #bfdbfe\n}\n\n.focus\\:stroke-blue-200:focus {\n stroke: #bfdbfe\n}"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"f39bec","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":256,"cssLen":969,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n 14:34\n Mon.,21 August\n

\n \n\n

","css":".card {\n width: 164px;\n height: 276px;\n background: rgb(0, 0, 0);\n border: 3px solid rgb(17, 4, 94);\n border-radius: 15px;\n position: relative;\n padding: 5px;\n display: flex;\n flex-direction: column;\n gap: 22px;\n transition: all 1s ease;\n color: antiquewhite;\n}\n\n.card::before {\n content: \"\";\n width: 10px;\n height: 10px;\n position: absolute;\n bottom: 10px;\n right: 77px;\n border-radius: 50%;\n background-color: rgb(17, 4, 94);\n}\n\n.card__date {\n display: flex;\n flex-direction: column;\n margin-top: 30px;\n}\n\n.time {\n font-size: 2em;\n}\n\n.popup {\n background-color: #444746;\n border-radius: 5px;\n display: flex;\n flex-direction: column;\n font-size: .8em;\n padding: 3px;\n}\n\n.popup .title {\n font-size: 9px;\n color: #9cbde2;\n}\n\n.card__date , .popup {\n opacity: 0;\n transition: all .5s ease;\n}\n\n.card:hover {\n transform: scale(1.2);\n box-shadow: 0px 0px 10px 10px #289FED;\n}\n\n.card:hover .card__date , .card:hover .popup {\n opacity: 1;\n}"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"b8e56e","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":338,"cssLen":1348,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card Hover Effect\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi\n laboriosam at voluptas minus culpa deserunt delectus sapiente\n inventore pariatur\n

\n \n

","css":".card {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 320px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n padding: 32px;\n overflow: hidden;\n border-radius: 10px;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 20px;\n color: #e8e8e8;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.content .heading {\n font-weight: 700;\n font-size: 32px;\n}\n\n.content .para {\n line-height: 1.5;\n}\n\n.content .btn {\n color: #e8e8e8;\n text-decoration: none;\n padding: 10px;\n font-weight: 600;\n border: none;\n cursor: pointer;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n border-radius: 5px;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 5px;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n z-index: -1;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.card:hover::before {\n height: 100%;\n}\n\n.card:hover {\n box-shadow: none;\n}\n\n.card:hover .btn {\n color: #212121;\n background: #e8e8e8;\n}\n\n.content .btn:hover {\n outline: 2px solid #e8e8e8;\n background: transparent;\n color: #e8e8e8;\n}\n\n.content .btn:active {\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"3af3f0","snapshot":null,"tags":null,"title":"card by javierBarroso","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":516,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Good morning

","css":".card {\n width: 150px;\n height: 200px;\n background: #ffffff;\n transition: box-shadow .3s ease-in;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n font-size: 20px;\n padding: 10px;\n transform: rotateX(30deg) rotateY(-10deg) rotateZ(30deg);\n border-radius: 10px;\n}\n\n.card:hover {\n box-shadow: rgba(255,255,255,0.5) 5px 10px ,\n rgba(255,255,255,0.4) 10px 20px ,\n rgba(255,255,255,0.3) 15px 30px;\n}\n\n.container {\n transform-style: preserve-3d;\n perspective: 250px;\n}"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"a011f7","snapshot":null,"tags":null,"title":"card by admin8756","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1722,"cssLen":963,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n All tags\n

JS
wordpress
uiverse
Css
html
go
java
ux/ui
figma
wordpress
uiverse
Css
html
go
java
ux/ui
figma
wordpress
uiverse
Css
html
go
java
ux/ui
figma
wordpress
uiverse
Css
html
go
java
ux/ui
figma
wordpress
uiverse
Css
html
go
java
ux/ui
figma

\n","css":".card {\n width: 100%;\n height: 300px;\n margin: 30px;\n background: #ecf39e;\n padding: 10px;\n display: flex;\n flex-wrap: wrap;\n color: #31572c;\n border-radius: 15px;\n box-shadow: -20px 20px 0px -5px #31572c;\n}\n.card__tags {\n overflow: auto;\n height: 80%;\n}\n.title {\n font-weight: 900;\n font-size: 1.7em;\n}\n\n.tag__name {\n display: inline-block;\n color: #fff;\n font-size: 1.1em;\n background-color: #31572c;\n padding: 6px 23px 9px;\n border-radius: 70em;\n margin: 8px 6px 8px 0;\n margin-left: 0px;\n position: relative;\n text-transform: lowercase;\n cursor: pointer;\n transition: all 0.3s ease-in-out;\n}\n\n.tag__name::before,\n.tag__name::after {\n content: \"\";\n display: inline-block;\n position: absolute;\n top: 40%;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: #90a955;\n}\n\n.tag__name::before {\n left: 7px;\n}\n\n.tag__name::after {\n right: 7px;\n}\n\n.tag__name:hover {\n transform: scale(1.1);\n background-color: #51572c;\n}\n"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"13aeb4","snapshot":null,"tags":null,"title":"card by JesusRafaelNavaCruz","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":348,"cssLen":619,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Rick Sanchez\n

\n Morty Smith\n

\n Summer Smith\n

\n\n

\n Beth Smith\n

","css":".container {\n overflow: auto;\n display: flex;\n scroll-snap-type: x mandatory;\n width: 90%;\n margin: 0 auto;\n padding: 0 15px;\n}\n\n.card {\n background: rgba(255, 255, 255, 0.25);\n box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\n backdrop-filter: blur(7px);\n -webkit-backdrop-filter: blur(7px);\n border-radius: 10px;\n padding: 2rem;\n margin: 1rem;\n width: 100%;\n}\n\n.container:hover > :not(:hover) {\n opacity: 0.2;\n}\n\n.title {\n width: 100%;\n display: inline-block;\n word-break: break-all;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n margin: 1rem auto;\n}"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"806dfd","snapshot":null,"tags":null,"title":"card by Qasimsaifi","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":759,"cssLen":2772,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n $\"Card$ \n

Beautiful Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ante sit amet tellus ornare tincidunt.

\n \n

","css":".mt-4 {\n margin-top: 1rem\n}\n\n.flex {\n display: flex\n}\n\n.h-40 {\n height: 10rem\n}\n\n.w-80 {\n width: 20rem\n}\n\n.w-full {\n width: 100%\n}\n\n.transform {\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.items-center {\n align-items: center\n}\n\n.justify-between {\n justify-content: space-between\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.rounded-t-lg {\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem\n}\n\n.bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.object-cover {\n object-fit: cover\n}\n\n.p-4 {\n padding: 1rem\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem\n}\n\n.font-semibold {\n font-weight: 600\n}\n\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / 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-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.hover\\:scale-105:hover {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n.hover\\:bg-blue-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity))\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.focus\\:ring-2:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n\n.focus\\:ring-blue-400:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity))\n}"}]}},"actionData":null,"errors":null}