{"loaderData":{"0":null,"0-3":{"total":7397,"projects":[{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"35efaa","snapshot":null,"tags":null,"title":"card by mobinkakei","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":486,"cssLen":966,"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":".absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.-right-2 {\n right: -0.5rem;\n}\n.bottom-36 {\n bottom: 9rem;\n}\n.top-14 {\n top: 3.5rem;\n}\n.flex {\n display: flex;\n}\n.h-10 {\n height: 2.5rem;\n}\n.h-2 {\n height: 0.5rem;\n}\n.h-7 {\n height: 1.75rem;\n}\n.h-\\[300px\\] {\n height: 300px;\n}\n.w-20 {\n width: 5rem;\n}\n.w-\\[160px\\] {\n width: 160px;\n}\n.justify-center {\n justify-content: center;\n}\n.rounded-2xl {\n border-radius: 1rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-bl-xl {\n border-bottom-left-radius: 0.75rem;\n}\n.rounded-br-xl {\n border-bottom-right-radius: 0.75rem;\n}\n.border {\n border-width: 1px;\n}\n.border-4 {\n border-width: 4px;\n}\n.border-black {\n --tw-border-opacity: 1;\n border-color: rgb(0 0 0 / var(--tw-border-opacity));\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n.bg-gray-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"3b3b83","snapshot":null,"tags":null,"title":"card by Tsiangana","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5542,"cssLen":3064,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Music\n

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

\n One piece first ending\n

\n Desconhecido\n

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

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

\n","css":".card {\n width: 190px;\n height: 254px;\n background: lightgrey;\n border-radius: 10px;\n}\n\n.card .one {\n width: 190px;\n height: 254px;\n z-index: 10;\n position: absolute;\n background: rgba(255, 255, 255, 0.55);\n box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\n backdrop-filter: blur(8.5px);\n -webkit-backdrop-filter: blur(8.5px);\n border-radius: 10px;\n border: 1px solid rgba(255, 255, 255, 0.18);\n}\n\n.card .one .title {\n width: 70px;\n border: 1px solid rgba(180, 177, 177, 0.308);\n display: block;\n margin: 12px auto;\n text-align: center;\n font-size: 10px;\n border-radius: 12px;\n font-family: Roboto, sans-serif;\n color: rgba(102, 100, 100, 0.911);\n}\n\n.card .one .music {\n width: 80px;\n height: 80px;\n background: rgba(216, 212, 212, 0.726);\n margin: 30px auto;\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card .one .name {\n width: 150px;\n height: 20px;\n font-size: 12px;\n font-weight: 500;\n font-family: Roboto, sans-serif;\n padding: 0 5px;\n margin: -22px auto;\n display: block;\n overflow: hidden;\n text-align: center;\n color: rgba(50, 49, 51, 0.637);\n}\n.card .one .name1 {\n width: 120px;\n height: 20px;\n font-size: 9px;\n font-weight: 500;\n font-family: Roboto, sans-serif;\n padding: 0 5px;\n margin: 19px auto;\n display: block;\n overflow: hidden;\n text-align: center;\n color: rgba(50, 49, 51, 0.637);\n}\n.card .one .bar {\n width: 100px;\n margin: -15px auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 5px;\n cursor: pointer;\n}\n\n.card .one .bar:last-child {\n margin: 35px auto;\n width: 100%;\n padding: 2px 23px;\n}\n.card .one .bar .color {\n fill: rgba(82, 79, 79, 0.829);\n}\n.card .one .bar .color1 {\n fill: rgba(29, 28, 28, 0.829);\n cursor: pointer;\n}\n\n.card .one .bar .bi:first-child {\n transform: rotate(180deg);\n}\n.card .one .bar:last-child .color1:first-child {\n transform: rotate(0deg);\n}\n\n.card .two {\n width: 60px;\n height: 60px;\n background-color: rgb(131, 25, 163);\n filter: drop-shadow(0 0 10px rgb(131, 25, 163));\n border-radius: 50%;\n position: relative;\n top: 30px;\n left: 20px;\n animation: one 5s infinite;\n}\n\n.card .three {\n width: 60px;\n height: 60px;\n background-color: rgb(29, 209, 149);\n filter: drop-shadow(0 0 10px rgb(29, 209, 149));\n border-radius: 50%;\n position: relative;\n top: 90px;\n left: 90px;\n animation: two 5s infinite;\n}\n\n@keyframes one {\n 0% {\n top: 30px;\n left: 20px;\n }\n 20% {\n top: 50px;\n left: 40px;\n }\n 40% {\n top: 80px;\n left: 70px;\n }\n 50% {\n top: 60px;\n left: 40px;\n }\n 60% {\n top: 35px;\n left: 90px;\n }\n 80% {\n top: 70px;\n left: 70px;\n }\n 100% {\n top: 30px;\n left: 20px;\n }\n}\n\n@keyframes two {\n 0% {\n top: 90px;\n left: 90px;\n }\n 20% {\n top: 50px;\n left: 40px;\n }\n 40% {\n top: 60px;\n left: 20px;\n }\n 50% {\n top: 80px;\n left: 30px;\n }\n 60% {\n top: 35px;\n left: 90px;\n }\n 80% {\n top: 70px;\n left: 60px;\n }\n 100% {\n top: 90px;\n left: 90px;\n }\n}\n"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"224cd6","snapshot":null,"tags":null,"title":"card by multihexagon","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":316,"cssLen":475,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n margin: 0 auto;\n background-color: #023252;\n border-radius: 10px;\n z-index: 1;\n}\n\n.tools {\n display: flex;\n align-items: center;\n padding: 9px;\n}\n\n.circle {\n padding: 0 4px;\n}\n\n.box {\n display: inline-block;\n align-items: center;\n width: 10px;\n height: 10px;\n padding: 1px;\n border-radius: 50%;\n}\n\n.red {\n background-color: #ff605c;\n}\n\n.yellow {\n background-color: #ffbd44;\n}\n\n.green {\n background-color: #00ca4e;\n}\n"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"c14d8f","snapshot":null,"tags":null,"title":"card by ahmed150up","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5138,"cssLen":1592,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n

","css":".card {\n display: flex;\n height: 70px;\n width: 270px;\n}\n\n.card svg {\n position: absolute;\n display: flex;\n width: 60%;\n height: 100%;\n font-size: 24px;\n font-weight: 700;\n opacity: 1;\n transition: opacity 0.25s;\n z-index: 2;\n cursor: pointer;\n}\n\n.card .social-link1,.card .social-link2,.card .social-link3,.card .social-link4 {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 25%;\n color: whitesmoke;\n font-size: 24px;\n text-decoration: none;\n transition: 0.25s;\n border-radius: 50px;\n}\n\n.card svg {\n transform: scale(1);\n}\n\n.card .social-link1:hover {\n background: #f09433;\n background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);\n background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);\n background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );\n animation: bounce_613 0.4s linear;\n}\n\n.card .social-link2:hover {\n background-color: #00ccff;\n animation: bounce_613 0.4s linear;\n}\n\n.card .social-link3:hover {\n background-color: #5865f2;\n animation: bounce_613 0.4s linear;\n}\n\n.card .social-link4:hover {\n background-color: #12a50b;\n animation: bounce_613 0.4s linear;\n}\n\n@keyframes bounce_613 {\n 40% {\n transform: scale(1.4);\n }\n\n 60% {\n transform: scale(0.8);\n }\n\n 80% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"2be995","snapshot":null,"tags":null,"title":"card by juan-sued","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":107,"cssLen":1075,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Popular this month

Uiverse

\n","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background-color: #000;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 12px;\n gap: 12px;\n border-radius: 8px;\n cursor: pointer;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n inset: 0;\n left: -5px;\n margin: auto;\n width: 200px;\n height: 264px;\n border-radius: 10px;\n background: linear-gradient(-45deg, red 0%, yellow 100%);\n z-index: -10;\n pointer-events: none;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n inset: 0;\n background: linear-gradient(-45deg, red 0%, yellow 100%);\n transform: translate3d(0, 0, 0) scale(0.95);\n filter: blur(20px);\n}\n\n.heading {\n font-size: 20px;\n text-transform: capitalize;\n font-weight: 700;\n}\n\n.card p:not(.heading) {\n font-size: 14px;\n}\n\n.card p:last-child {\n color: #e81cff;\n font-weight: 600;\n}\n\n.card:hover::after {\n filter: blur(30px);\n}\n\n.card:hover::before {\n transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);\n}\n"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"dc3388","snapshot":null,"tags":null,"title":"card by kennyotsu","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3608,"cssLen":1709,"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

Hover For Free*
Creator Points

*at the expense of your sanity

","css":".card-id567 {\n width: 190px;\n height: 190px;\n background: rgb(22, 22, 22);\n color: white;\n border-radius: 1rem;\n padding: 1rem;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 300ms ease;\n animation: 8s thumb-thumb infinite;\n}\n\n.card-id567 svg path {\n transition: 300ms ease;\n opacity: 0;\n}\n\n.bold-567 {\n font-weight: bold;\n}\n\n.creator-points {\n width: 3.25rem;\n height: 3rem;\n color: rgb(167 139 250);\n /* w-5 h-5 mr-2 text-indigo-400 */\n}\n\n.blurry-splash {\n position: absolute;\n inset: 0;\n width: 60px;\n margin: 0 auto;\n height: 60px;\n border-radius: 1rem;\n z-index: -1;\n opacity: 70%;\n filter: blur(15px);\n background: linear-gradient(\n 120deg, rgba(167, 139, 250, 0.24)\n , rgba(167, 139, 250, 0.384), rgba(167, 139, 250, 0.226));\n}\n\n.prompt-id567 {\n position: absolute;\n color: rgb(173, 173, 173);\n text-align: center;\n}\n\n.really-small-text {\n text-align: center;\n width: 100%;\n position: absolute;\n font-size: 8px;\n margin-top: 28px;\n opacity: 0.5;\n}\n\n.card-id567:hover {\n cursor: none;\n background-color: white;\n}\n\n.card-id567:hover .prompt-id567 {\n transition: 300ms ease;\n opacity: 0;\n}\n\n.token-container {\n animation: 2s spinny-token-yayyy infinite;\n margin-bottom: 10px;\n}\n\n.prompt-id567 svg path {\n stroke: none;\n opacity: 1;\n}\n\n.card-id567:hover svg path {\n opacity: 1;\n}\n\n@keyframes spinny-token-yayyy {\n 0% {\n transform: perspective(200px) rotateY(0deg);\n }\n\n 100% {\n transform: perspective(200px) rotateY(360deg);\n }\n}\n\n@keyframes thumb-thumb {\n 0%, 10%, 100% {\n transform: scale(100%);\n }\n\n 5% {\n transform: scale(103%);\n }\n\n 7% {\n transform: scale(97%);\n }\n}"},{"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"}]}},"actionData":null,"errors":null}