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

379

20.06.2024

Days left

Expiration date

$6,900.00

Accured interest

","css":".static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0px}.left-\\[24px\\]{left:24px}.left-\\[307px\\]{left:307px}.left-\\[332px\\]{left:332px}.top-0{top:0px}.top-\\[110px\\]{top:110px}.top-\\[133px\\]{top:133px}.top-\\[15px\\]{top:15px}.top-\\[41px\\]{top:41px}.top-\\[86px\\]{top:86px}.h-1{height:0.25rem}.h-44{height:11rem}.w-48{width:12rem}.w-80{width:20rem}.w-96{width:24rem}.rounded-sm{border-radius:0.125rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-neutral-300{--tw-border-opacity:1;border-color:rgb(212 212 212 / var(--tw-border-opacity))}.border-opacity-70{--tw-border-opacity:0.7}.bg-amber-300{--tw-bg-opacity:1;background-color:rgb(252 211 77 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-opacity-90{--tw-bg-opacity:0.9}.text-right{text-align:right}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.leading-none{line-height:1}.leading-normal{line-height:1.5}.leading-tight{line-height:1.25}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122 / var(--tw-text-opacity))}"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"d3d31c","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":8963,"cssLen":888,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".card {\n background-color: #2e1513;\n border: 3px solid #E42B1E;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 26px;\n font-weight: 700;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n padding: 30px 20px;\n color: #e23c30;\n border-radius: 45px;\n}\n\n.App-logo {\n pointer-events: none;\n margin-top: -10px;\n width: 160px;\n}\n\n.App-button {\n padding: 10px 20px;\n background-color: transparent;\n color: #E42B1E;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n font-size: 15px;\n border: 3px solid #E42B1E;\n border-radius: 5em;\n margin-top: 20px;\n transition: 0.2s;\n}\n\n.App-button:hover {\n color: #2e1513;\n background-color: #E42B1E;\n}"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"a8fb49","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2117,"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-52{height:13rem}.h-6{height:1.5rem}.w-48{width:12rem}.w-6{width:1.5rem}.w-72{width:18rem}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.border{border-width:1px}.border-4{border-width:4px}.border-sky-900{--tw-border-opacity:1;border-color:rgb(12 74 110 / var(--tw-border-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-sky-800{--tw-bg-opacity:1;background-color:rgb(7 89 133 / var(--tw-bg-opacity))}.fill-current{fill:currentColor}.fill-gray-50{fill:#f9fafb}.stroke-sky-700{stroke:#0369a1}.stroke-sky-900{stroke:#0c4a6e}.p-5{padding:1.25rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-5xl{font-size:3rem;line-height:1}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.text-sky-800{--tw-text-opacity:1;color:rgb(7 89 133 / var(--tw-text-opacity))}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.\\[transform\\:rotate3d\$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:05.000Z","isPrivate":0,"projectId":"497397","snapshot":null,"tags":null,"title":"card by seyed-mohsen-mousavi","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2030,"cssLen":2760,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

Pro Plan

Perfect for growing businesses

$49.99

\n \n \n \n 25 Users\n
\n \n \n \n Advanced Features\n
\n \n \n \n 24/7 Support\n

\n \n Select Plan\n \n

\n\n","css":".mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-6 {\n margin-bottom: 1.5rem;\n}\n.mr-2 {\n margin-right: 0.5rem;\n}\n.flex {\n display: flex;\n}\n.h-4 {\n height: 1rem;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.items-center {\n align-items: center;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-green-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity));\n}\n.bg-green-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(34 197 94 / var(--tw-bg-opacity));\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem;\n}\n.text-4xl {\n font-size: 2.25rem;\n line-height: 2.5rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity));\n}\n.text-gray-800 {\n --tw-text-opacity: 1;\n color: rgb(31 41 55 / var(--tw-text-opacity));\n}\n.text-green-500 {\n --tw-text-opacity: 1;\n color: rgb(34 197 94 / var(--tw-text-opacity));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),\n 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\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.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))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:bg-green-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(21 128 61 / var(--tw-bg-opacity));\n}\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.active\\:bg-green-800:active {\n --tw-bg-opacity: 1;\n background-color: rgb(22 101 52 / var(--tw-bg-opacity));\n}\n"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"4aeb2b","snapshot":null,"tags":null,"title":"card by Satwinder04","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":133,"cssLen":963,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Card Title\n

Card description goes here.

\n","css":".card5 {\n width: 270px;\n height: 350px;\n background-color: rgb(255, 255, 255);\n border-radius: 10px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n position: relative;\n overflow: hidden;\n}\n\n.card5:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, #8f7eff, #44a4ff);\n opacity: 0;\n transition: opacity 0.5s ease-in-out;\n}\n\n.card5:hover:before {\n opacity: 0.5;\n}\n\n.card5-content {\n width: 170px;\n height: 200px;\n padding: 0 10px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -45%);\n text-align: center;\n color: rgb(0, 0, 0);\n z-index: 1;\n background-color: white;\n transition: all 0.3s ease-in-out;\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n flex-direction: column;\n}\n\n.card5-content span {\n font-size: 1.7rem;\n font-weight: 700;\n}\n\n.card5:hover .card5-content {\n transform: translate(-50%, -50%);\n}\n"},{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"041918","snapshot":null,"tags":null,"title":"card by marcelodolza","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":95,"cssLen":1380,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n HOVER ME\n

\n","css":".card {\n width: 190px;\n height: 254px;\n background: #171717;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow: 0px 0px 3px 1px #00000088;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n}\n\n.card .content {\n border-radius: 5px;\n background: #171717;\n width: 186px;\n height: 250px;\n z-index: 1;\n padding: 20px;\n color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.content::before {\n opacity: 0;\n transition: opacity 300ms;\n content: \" \";\n display: block;\n background: white;\n width: 50px;\n height: 50px;\n position: absolute;\n filter: blur(50px);\n}\n\n.card:hover .content::before {\n opacity: 1;\n}\n\n.card::before {\n opacity: 0;\n content: \" \";\n position: absolute;\n display: block;\n width: 120px;\n height: 360px;\n background: linear-gradient(\n 90deg,\n transparent,\n #ff2288,\n #387ef0,\n transparent\n );\n transition: opacity 300ms;\n animation: rotation_9018 3000ms infinite linear;\n animation-play-state: paused;\n}\n\n.card:hover::before {\n opacity: 1;\n animation-play-state: running;\n}\n\n.card::after {\n position: absolute;\n content: \" \";\n display: block;\n width: 190px;\n height: 254px;\n background: #17171733;\n backdrop-filter: blur(50px);\n}\n\n@keyframes rotation_9018 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"},{"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}"}]}},"actionData":null,"errors":null}