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

\n // Código de ejemplo\n function example()\n {\n let message = \"Hello, World!\";\n console.log(message);\n }\n

\n","css":".card {\n width: 200px;\n height: 200px;\n background-color: #f9f9f9;\n border-radius: 10px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n position: relative;\n}\n\n.code-container {\n background-color: #222;\n border-radius: 8px;\n padding: 16px;\n}\n\n.line {\n display: block;\n color: #fff;\n font-size: 14px;\n line-height: 1.5;\n margin: 4px 0;\n position: relative;\n}\n\n.code-comment {\n color: #5c6370;\n}\n\n.code-keyword {\n color: #c678dd;\n}\n\n.code-function {\n color: #61afef;\n}\n\n.code-variable {\n color: #dcdcaa;\n}\n\n.code-string {\n color: #98c379;\n}\n\n.indent {\n padding-left: 20px;\n}\n\n/* Animación */\n@keyframes float {\n 0% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-10px);\n }\n\n 100% {\n transform: translateY(0);\n }\n}\n\n.float-animation {\n animation: float 2s ease-in-out infinite;\n}\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"d6052d","snapshot":null,"tags":null,"title":"card by eduardo-amaro-maciel","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":392,"cssLen":946,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Hello\n

\n Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n

\n Hover\n

","css":".container {\n margin: 0 auto;\n}\n\n.card {\n position: relative;\n width: 200px;\n height: 300px;\n margin: 0 auto;\n background: #000;\n border-radius: 15px;\n box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);\n}\n\n.face {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.face.back {\n box-sizing: border-box;\n padding: 20px;\n}\n\n.face.back b {\n margin: 0;\n padding: 0;\n}\n\n.face.back .desc {\n background-color: #eee;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.face.front {\n transition: 0.5s;\n}\n\n.face.front b {\n margin: 0;\n padding: 0;\n font-size: 5.1em;\n color: #fff;\n transition: 0.5s;\n text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n z-index: 10;\n}\n\n.card:hover .face.front {\n height: 60px;\n}\n\n.card:hover .face.front b {\n font-size: 2em;\n}\n\n.face.front {\n background-color: #0cbaba;\n border-radius: 15px;\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"6721c3","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":330,"cssLen":548,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n In this article\n

Try it

Syntax

Formal definition

Formal syntax

Examples

See also

","css":".card {\n width: 250px;\n height: 290px;\n border-radius: 15px;\n background: rgb(27, 26, 26);\n color: white;\n font-weight: 600;\n font-size: 1.2em;\n padding: 15px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n box-shadow: -5px 5px 1px 0px #004d92;\n}\n\n.element {\n color: grey;\n font-size: .8em;\n padding: 6px 15px;\n border-left: 2px solid grey;\n cursor: pointer;\n}\n\n.active {\n background-color: #004d92;\n border-left: 2px solid #8cb4ff;\n color: azure;\n}\n\n.element:hover:not(.active) {\n color: #3775bb;\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"f281a6","snapshot":null,"tags":null,"title":"card by Web-Potato","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":414,"cssLen":1941,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Come Deeper\n

\n\n

It's
Deep
In Here...\n

","css":".card {\n width: 190px;\n height: 254px;\n background: #d3d3d3;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.one {\n width: 90%;\n height: 95%;\n background-color: #c0c0c0;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 3%;\n}\n\n.two {\n width: 90%;\n height: 95%;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n border-radius: 3%;\n background-color: #9c9c9c;\n transition: 1s;\n transition-delay: 0.2s;\n}\n\n.three {\n width: 90%;\n height: 95%;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n border-radius: 3%;\n background-color: #797979;\n transition: 0.9s;\n transition-delay: 0.2s;\n}\n\n.four {\n width: 90%;\n height: 95%;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #ececec;\n opacity: 0;\n border-radius: 3%;\n background-color: #5a5a5a;\n transition: 0.8s;\n transition-delay: 0.2s;\n}\n\n.five {\n width: 90%;\n height: 95%;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #ececec;\n opacity: 0;\n border-radius: 3%;\n background-color: #424242;\n transition: 0.7s;\n transition-delay: 0.2s;\n}\n\n.six {\n width: 90%;\n height: 95%;\n color: #ececec;\n text-align: center;\n opacity: 0;\n border-radius: 3%;\n background-color: #302f2f;\n transition: 0.6s;\n transition-delay: 0.2s;\n}\n\n.text2 {\n padding-top: 50%;\n transform: translateY(-5em);\n transition: 0.2s;\n opacity: 0;\n}\n\n.card:hover .two {\n opacity: 1;\n transition: 0.4s;\n}\n\n.card:hover .three {\n opacity: 1;\n transition: 0.5s;\n}\n\n.card:hover .four {\n opacity: 1;\n transition: 0.6s;\n}\n\n.card:hover .five {\n opacity: 1;\n transition: 0.7s;\n}\n\n.card:hover .six {\n opacity: 1;\n transition: 0.8s;\n}\n\n.card:hover .text1 {\n opacity: 0;\n}\n\n.card:hover .text2 {\n transform: translateY(2em);\n transition-delay: 0.5s;\n opacity: 1;\n}\n\n.text1 {\n position: absolute;\n opacity: 1;\n}\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"21a241","snapshot":null,"tags":null,"title":"card by Mohammedswisse","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":122,"cssLen":1088,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Popular this month\n

\n Powered By\n

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, #e81cff 0%, #40c9ff 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, #fc00ff 0%, #00dbde 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\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"5c44f4","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1097,"cssLen":2684,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Corporate\n

Grow steadily and pizza.

\n \n $35\n \n /mo \n

\n \n Get started\n \n

","css":".mt-2 {\n margin-top: 0.5rem\n}\n\n.mt-6 {\n margin-top: 1.5rem\n}\n\n.flex {\n display: flex\n}\n\n.grid {\n display: grid\n}\n\n.w-full {\n width: 100%\n}\n\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr))\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.rounded-3xl {\n border-radius: 1.5rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.border-2 {\n border-width: 2px\n}\n\n.border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity))\n}\n\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / 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.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.py-2\\.5 {\n padding-top: 0.625rem;\n padding-bottom: 0.625rem\n}\n\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem\n}\n\n.pb-8 {\n padding-bottom: 2rem\n}\n\n.text-left {\n text-align: left\n}\n\n.text-center {\n text-align: center\n}\n\n.text-5xl {\n font-size: 3rem;\n line-height: 1\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-light {\n font-weight: 300\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.tracking-tight {\n letter-spacing: -0.025em\n}\n\n.tracking-tighter {\n letter-spacing: -0.05em\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity))\n}\n\n.text-gray-100 {\n --tw-text-opacity: 1;\n color: rgb(243 244 246 / 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.duration-200 {\n transition-duration: 200ms\n}\n\n.hover\\:border-white:hover {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity))\n}\n\n.hover\\:bg-transparent:hover {\n background-color: transparent\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.focus-visible\\:outline-white:focus-visible {\n outline-color: #fff\n}\n\n.focus-visible\\:ring-white:focus-visible {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity))\n}\n\n@media (min-width: 640px) {\n .sm\\:p-10 {\n padding: 2.5rem\n }\n\n .sm\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem\n }\n\n .sm\\:pb-6 {\n padding-bottom: 1.5rem\n }\n}\n\n@media (min-width: 1024px) {\n .lg\\:text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem\n }\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"827d03","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1292,"cssLen":3069,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n To the moon!\n

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

\n","css":".card {\n width: 290px;\n height: 350px;\n background: linear-gradient(135deg, rgba(48,48,48,1) 48%, rgba(0,0,0,1) 100%);\n background-size: 300%,300%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: 15px;\n box-shadow: 5px 5px 15px 5px #000000;\n overflow: hidden;\n transition: all 1s ease;\n}\n\n.moon {\n width: 70px;\n height: 70px;\n top: 15%;\n right: 120px;\n position: absolute;\n fill: white;\n transform: rotate(-20deg);\n transition: all 1s ease;\n}\n\n.rocket {\n width: 70px;\n height: 70px;\n bottom: -2%;\n left: -2%;\n position: absolute;\n fill: white;\n transition: all 1.9s ease;\n}\n\n.star {\n position: absolute;\n background: radial-gradient(circle, rgba(251,239,63,1) 0%, rgba(255,253,212,1) 100%);\n clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n}\n\n.star-1 {\n width: 100px;\n height: 100px;\n bottom: 90px;\n left: -15px;\n transition: all 1s ease;\n}\n\n.star-2 {\n width: 150px;\n height: 150px;\n top: -10%;\n left: -10%;\n transition: all .5s ease;\n}\n\n.star-3 {\n width: 100px;\n height: 100px;\n bottom: 5%;\n right: -15px;\n transition: all .3s ease;\n}\n\n.star-4 {\n width: 20px;\n height: 20px;\n top: 4%;\n right: 5px;\n transition: all 1.4s ease;\n}\n\n.star-5 {\n width: 20px;\n height: 20px;\n bottom: 24%;\n right: 45%;\n animation: rotate 3s normal linear infinite;\n}\n\n.star-6 {\n width: 20px;\n height: 20px;\n top: 14%;\n right: 25%;\n animation: rotate 5s normal linear infinite;\n}\n\n.star-7 {\n width: 40px;\n height: 40px;\n top: 34%;\n right: 65%;\n animation: rotate 5s normal linear infinite;\n}\n\n.card-info span {\n font-size: 1.2em;\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n transition: all 1s ease;\n}\n\n.card:hover {\n background: rgb(48,48,48);\n background: linear-gradient(135deg, rgba(48,48,48,1) 10%, rgba(0,0,0,1) 90%);\n background-size: 100%,100%;\n}\n\n.card:hover .star-1,\n.card:hover .star-3 {\n background: linear-gradient(90deg, rgba(255,241,0,1) 0%, rgba(246,249,93,1) 77%, rgba(238,255,0,1) 100%);\n transform: scale(1.2) rotate(10deg);\n}\n\n.card:hover .star-2,\n.card:hover .star-4,\n.card:hover .star-5 {\n background: linear-gradient(90deg, rgba(255,241,0,1) 0%, rgba(246,249,93,1) 77%, rgba(238,255,0,1) 100%);\n transform: scale(1.2) rotate(-150deg);\n}\n\n.card:hover .rocket {\n transform: scale(.3) translate(450px,-730px) rotate(-260deg);\n}\n\n.card:hover .moon {\n width: 50px;\n height: 50px;\n}\n\n.card:hover span {\n font-size: 1.5em;\n}\n\n@keyframes rotate {\n 0% {\n -webkit-transform: rotate3d(0, 0, 1, 0deg);\n transform: rotate3d(0, 0, 1, 0deg);\n }\n\n 25% {\n -webkit-transform: rotate3d(0, 0, 1, 90deg);\n transform: rotate3d(0, 0, 1, 90deg);\n }\n\n 50% {\n -webkit-transform: rotate3d(0, 0, 1, 180deg);\n transform: rotate3d(0, 0, 1, 180deg);\n }\n\n 75% {\n -webkit-transform: rotate3d(0, 0, 1, 270deg);\n transform: rotate3d(0, 0, 1, 270deg);\n }\n\n 100% {\n -webkit-transform: rotate3d(0, 0, 1, 360deg);\n transform: rotate3d(0, 0, 1, 360deg);\n }\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"60ca9a","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":485,"cssLen":708,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".inline-block {\n display: inline-block\n}\n\n.flex {\n display: flex\n}\n\n.h-3 {\n height: 0.75rem\n}\n\n.h-64 {\n height: 16rem\n}\n\n.w-3 {\n width: 0.75rem\n}\n\n.w-48 {\n width: 12rem\n}\n\n.gap-1 {\n gap: 0.25rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.bg-gray-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(17 24 39 / var(--tw-bg-opacity))\n}\n\n.bg-green-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(34 197 94 / var(--tw-bg-opacity))\n}\n\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity))\n}\n\n.bg-yellow-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(234 179 8 / var(--tw-bg-opacity))\n}\n\n.p-2 {\n padding: 0.5rem\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"edca2c","snapshot":null,"tags":null,"title":"card by KhaledMatalkah","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":300,"cssLen":1153,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Front

Back

Right

Left

Top

Bottom

\n","css":".cube-container {\n width: 200px;\n height: 200px;\n perspective: 800px;\n margin: 50px auto;\n}\n\n.cube {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: rotate 8s infinite linear;\n}\n\n.face {\n position: absolute;\n width: 200px;\n height: 200px;\n color: rgb(214, 21, 21);\n font-size: 18px;\n text-align: center;\n line-height: 200px;\n background: transparent;\n opacity: 0.9;\n border: 2px solid;\n border-image: linear-gradient(to right, #ff6b6b, #355c7d, #557d35, #cfcf16, #a51f1f) 1;\n box-shadow: 0 0 100px rgba(245, 8, 8, 0.8);\n}\n\n.front {\n transform: translateZ(100px);\n}\n\n.back {\n transform: rotateY(180deg) translateZ(100px);\n}\n\n.right {\n transform: rotateY(90deg) translateZ(100px);\n}\n\n.left {\n transform: rotateY(-90deg) translateZ(100px);\n}\n\n.top {\n transform: rotateX(90deg) translateZ(100px);\n}\n\n.bottom {\n transform: rotateX(-90deg) translateZ(100px);\n}\n\n.cube-container:hover .cube {\n animation-play-state: paused;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(0) rotateY(0) rotateZ(0);\n }\n\n 100% {\n transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);\n }\n}\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"0add08","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":428,"cssLen":1420,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover me

Card Hover

\n Lorem ipsum dolor sit amet, consectetur adipii\n voluptas ten mollitia pariatur odit, ab\n minus ratione adipisci accusamus vel est excepturi laboriosam magnam\n necessitatibus dignissimos molestias.\n

","css":".card-container {\n width: 300px;\n height: 300px;\n position: relative;\n border-radius: 10px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n}\n\n.card {\n width: 100%;\n height: 100%;\n border-radius: inherit;\n}\n\n.card .front-content {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)\n}\n\n.card .front-content p {\n font-size: 32px;\n font-weight: 700;\n opacity: 1;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)\n}\n\n.card .content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 10px;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n color: #e8e8e8;\n padding: 20px;\n line-height: 1.5;\n border-radius: 5px;\n pointer-events: none;\n transform: translateY(-96%);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.card .content .heading {\n font-size: 32px;\n font-weight: 700;\n}\n\n.card:hover .content {\n transform: translateY(0);\n}\n\n.card:hover .front-content {\n transform: translateY(30%);\n}\n\n.card:hover .front-content p {\n opacity: 0;\n}\n\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"90db85","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":491,"cssLen":716,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".inline-block {\n display: inline-block\n}\n\n.flex {\n display: flex\n}\n\n.h-3 {\n height: 0.75rem\n}\n\n.h-64 {\n height: 16rem\n}\n\n.w-3 {\n width: 0.75rem\n}\n\n.w-48 {\n width: 12rem\n}\n\n.gap-1 {\n gap: 0.25rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity))\n}\n\n.bg-indigo-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(99 102 241 / var(--tw-bg-opacity))\n}\n\n.bg-orange-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 115 22 / var(--tw-bg-opacity))\n}\n\n.bg-teal-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(20 184 166 / var(--tw-bg-opacity))\n}\n\n.p-2 {\n padding: 0.5rem\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"0a1047","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1677,"cssLen":3237,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

City Name

Sunny

\n \n \n \n

22°C

\n Feels Like\n 20°C\n

\n Wind\n 10 km/h\n

\n Humidity\n 75%\n

\n\n","css":".absolute{position:absolute}.-right-2{right:-0.5rem}.-top-2{top:-0.5rem}.mr-2{margin-right:0.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.h-12{height:3rem}.w-12{width:3rem}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:0.25rem}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-neutral-600{--tw-border-opacity:1;border-color:rgb(82 82 82 / var(--tw-border-opacity))}.bg-gradient-to-bl{background-image:linear-gradient(to bottom left, var(--tw-gradient-stops))}.from-sky-400{--tw-gradient-from:#38bdf8 var(--tw-gradient-from-position);--tw-gradient-to:rgb(56 189 248 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-sky-500{--tw-gradient-to:rgb(14 165 233 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #0ea5e9 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-sky-700{--tw-gradient-to:#0369a1 var(--tw-gradient-to-position)}.stroke-yellow-300{stroke:#fde047}.p-6{padding:1.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-bold{font-weight:700}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.duration-500{transition-duration:500ms}.\\[box-shadow\\:12px_12px_0px_0px_\\#0d0d0d\\]{box-shadow:12px 12px 0px 0px #0d0d0d}.\\[transform\\:rotate3d\$1_\\2c -1\\2c _1\\2c _15deg\$\\]{transform:rotate3d(1 ,-1, 1, 15deg)}.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\\:shadow-lg:hover{--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)}"}]}},"actionData":null,"errors":null}