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

Login

\n \n

","css":".my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem\n}\n\n.my-6 {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem\n}\n\n.mt-3 {\n margin-top: 0.75rem\n}\n\n.w-72 {\n width: 18rem\n}\n\n.w-\\[100\\%\\] {\n width: 100%\n}\n\n.rounded {\n border-radius: 0.25rem\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity))\n}\n\n.bg-gray-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / var(--tw-bg-opacity))\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem\n}\n\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem\n}\n\n.text-center {\n text-align: center\n}\n\n.text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.font-semibold {\n font-weight: 600\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.hover\\:bg-blue-500:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n\n.focus\\:outline-blue-600:focus {\n outline-color: #2563eb\n}"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"7a5658","snapshot":null,"tags":null,"title":"card by Madflows","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":559,"cssLen":1961,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

May 3rd 2023

\n A Tale of Two Divs\n

\n \n \n \n \n

Author

Folarin Lawal\n

\n html\n css\n web-dev\n

","css":".card {\n display: flex;\n position: relative;\n flex-direction: column;\n height: 350px;\n width: 190px;\n min-width: 250px;\n padding: 1rem;\n border-radius: 16px;\n background: #17141d;\n box-shadow: -1rem 0 3rem #00000067;\n transition: .2s;\n font-family: 'Inter', sans-serif;\n}\n\n.card:hover {\n transform: translateY(-0.4rem);\n}\n\n.card-author {\n position: relative;\n display: grid;\n grid-template-columns: 75px 1fr;\n align-items: center;\n margin: 3rem 0 0;\n}\n\n.author-name {\n color: #7a7a8c;\n}\n\n.author-name-prefix {\n color: #e52e71;\n font-weight: 600;\n}\n\n.author-avatar span {\n display: block;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: #f2f2f2;\n margin: 16px 10px;\n}\n\n.half-circle {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 60px;\n height: 48px;\n fill: none;\n stroke: #ff8a00;\n stroke-width: 8;\n stroke-linecap: round;\n}\n\n.card-header {\n margin-bottom: auto;\n color: #7a7a8c;\n}\n\n.card-header p {\n font-size: 14px;\n margin: 0 0 1rem;\n color: #7a7a8c;\n}\n\n.card-header .title {\n font-size: 25px;\n margin: .25rem 0 auto;\n cursor: pointer;\n font-family: 'Arial Black', sans-serif;\n}\n\n.card-header .title:hover {\n background: linear-gradient(90deg,#ff8a00,#e52e71);\n text-shadow: none;\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.tags {\n margin: 1rem 0 2rem;\n padding: .5rem 0 1rem;\n line-height: 2;\n margin-bottom: 0;\n}\n\n.tags a {\n font-style: normal;\n font-weight: 700;\n color: #7a7a8c;\n text-transform: uppercase;\n font-size: .66rem;\n border: 3px solid #28242f;\n border-radius: 2rem;\n padding: .2rem .85rem .25rem;\n position: relative;\n}\n\n.tags a:hover {\n background: linear-gradient(90deg,#ff8a00,#e52e71);\n text-shadow: none;\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n -webkit-box-decoration-break: clone;\n box-decoration-break: clone;\n background-clip: text;\n border-color: white;\n}"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"8675d0","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":936,"cssLen":2645,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n\n

Dark Card

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis\n magna quis lectus fermentum, quis scelerisque orci pellentesque. Duis id\n porta justo. Sed ac enim id justo tincidunt hendrerit id ac lectus.\n Pellentesque maximus posuere tortor vitae consequat.\n

\n \n Explore\n \n\n","css":".absolute{position:absolute}.relative{position:relative}.-bottom-10{bottom:-2.5rem}.-right-10{right:-2.5rem}.mb-2{margin-bottom:0.5rem}.mt-6{margin-top:1.5rem}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.flex{display:flex}.h-1\\/2{height:50%}.h-56{height:14rem}.w-1\\/2{width:50%}.w-96{width:24rem}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.justify-start{justify-content:flex-start}.gap-2{gap:0.5rem}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:0.5rem}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.p-4{padding:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246 / var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-gray-800{--tw-shadow-color:#1f2937;--tw-shadow:var(--tw-shadow-colored)}.duration-500{transition-duration:500ms}.duration-700{transition-duration:700ms}.hover\\:-translate-y-2:hover{--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))}.hover\\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.hover\\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.group:hover .group-hover\\:-translate-x-4{--tw-translate-x:-1rem;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\\:-translate-y-4{--tw-translate-y:-1rem;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:32.000Z","isPrivate":0,"projectId":"849ac1","snapshot":null,"tags":null,"title":"card by yariklnv","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":607,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"@keyframes rotate {\n from {\n transform: rotateZ(0deg);\n }\n\n to {\n transform: rotateZ(360deg);\n }\n}\n\n.border {\n background-image: linear-gradient(to left, red, blue);\n width: 100px;\n height: 100px;\n border-radius: 20px;\n}\n\n.border::before {\n background-image: linear-gradient(to left, red, blue);\n content: \"\";\n position: absolute;\n z-index: -1;\n height: 100px;\n width: 100px;\n scale: 1.1;\n filter: blur(25px);\n animation: rotate 4s linear infinite;\n border-radius: 100px;\n}\n\n.content {\n background-color: #111;\n width: 100px;\n height: 100px;\n border-radius: 19px;\n scale: 0.9;\n}"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"892f32","snapshot":null,"tags":null,"title":"card by IWhat1","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":284,"cssLen":999,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Front card

Follow Me For More

Back card

Follow Me For More

\n","css":".container {\n width: 240px;\n height: 294px;\n perspective: 900px;\n}\n\n.card {\n height: 100%;\n width: 100%;\n background-color: aliceblue;\n position: relative;\n transition: transform 1500ms;\n transform-style: preserve-3d;\n border-radius: 2rem;\n}\n\n.container:hover > .card {\n cursor: pointer;\n transform: rotateY(180deg) rotateZ(180deg);\n}\n\n.front, .back {\n height: 100%;\n width: 100%;\n border-radius: 2rem;\n position: absolute;\n box-shadow: 0 0 10px 2px rgba(50, 50, 50, 2.5);\n backface-visibility: hidden;\n color: aliceblue;\n background: linear-gradient(-135deg, \n#0703f7, #bcff04);\n}\n\n.front, .back {\n display: flex;\n justify-content: center;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n}\n\n.back {\n transform: rotateY(180deg) rotateZ(180deg);\n}\n\n.back-heading, .front-heading {\n font-size: 28px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n font-weight: bold;\n}\n"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"bbcc69","snapshot":null,"tags":null,"title":"card by alafshate","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4006,"cssLen":1253,"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 \n \n

\n\n","css":".card {\n width: fit-content;\n height: fit-content;\n background-color: rgb(238, 238, 238);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 25px 25px;\n gap: 20px;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);\n}\n\n/* for all social containers*/\n.socialContainer {\n width: 52px;\n height: 52px;\n background-color: rgb(44, 44, 44);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n transition-duration: .3s;\n}\n/* instagram*/\n.containerOne:hover {\n background-color: #d62976;\n transition-duration: .3s;\n}\n/* twitter*/\n.containerTwo:hover {\n background-color: #00acee;\n transition-duration: .3s;\n}\n/* linkdin*/\n.containerThree:hover {\n background-color: #0072b1;\n transition-duration: .3s;\n}\n/* Whatsapp*/\n.containerFour:hover {\n background-color: #128C7E;\n transition-duration: .3s;\n}\n\n.socialContainer:active {\n transform: scale(0.9);\n transition-duration: .3s;\n}\n\n.socialSvg {\n width: 17px;\n}\n\n.socialSvg path {\n fill: rgb(255, 255, 255);\n}\n\n.socialContainer:hover .socialSvg {\n animation: slide-in-top 0.3s both;\n}\n\n@keyframes slide-in-top {\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"48ae61","snapshot":null,"tags":null,"title":"card by shadowmurphy","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":9060,"cssLen":2746,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n John — Personal\n

\n 5.0 GB of 5 GB used (100%)\n You cannot transfer new files or send and receive email messages for this account.\n \n

\n \n Bin\n

\n \n Search the Internet\n

\n \n Settings\n

","css":".card {\n width: 300px;\n height: 330px;\n background: #333333;\n border-radius: 6px;\n color: white;\n}\n\n.header,\n.info,\n.progress-line\n.bottom {\n width: 100%;\n}\n\n.header {\n height: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-bottom: 1px solid #2E2E2E\n}\n\n.info {\n height: 230px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.bottom {\n height: 50px;\n background-color: #2C2C2C;\n border-bottom-left-radius: 6px;\n border-bottom-right-radius: 6px;\n display: flex;\n flex-direction: row;\n justify-content: right;\n align-items: center;\n gap: 5px;\n}\n\n.header-button {\n width: 94%;\n height: 72%;\n border-radius: 6px;\n border: none;\n outline: none;\n background-color: #333333;\n color: white;\n font-size: 15px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n\n.header-button:hover {\n background-color: #3F3F3F;\n}\n\n.header-button svg {\n width: 20px;\n}\n\n.header-button svg:first-child {\n position: relative;\n left: 5px;\n}\n\n.header-button svg:last-child {\n position: relative;\n right: 15px;\n}\n\n.header-button a {\n position: relative;\n right: 35px;\n}\n\n.info-border {\n width: 90%;\n height: 80%;\n display: flex;\n flex-direction: column;\n gap: 6px\n}\n\n.info-border a:first-child {\n font-weight: 600;\n}\n\n.info-border a:nth-child(3) {\n font-size: 15px;\n}\n\n.info-border a:nth-child(4) {\n width: 200px;\n font-size: 13px;\n position: relative;\n top: 10px;\n align-self: center;\n text-align: center;\n}\n\n.progress-line {\n height: 4px;\n border-radius: 666px;\n background-color: #FF99A4;\n}\n\n.update-button {\n width: 120px;\n height: 35px;\n position: relative;\n top: 25px;\n align-self: center;\n outline: none;\n border: none;\n background-color: #4CC2FF;\n border-radius: 6px;\n font-size: 15px;\n font-weight: 600;\n color: #33333;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n\n.update-button:hover {\n background-color: #49B3EA;\n}\n\n.square {\n width: 30px;\n height: 30px;\n right: 10px;\n position: relative;\n border-radius: 3px;\n transition: background-color 0.2s ease;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.square:hover {\n background-color: #3A3A3A;\n}\n\n.tooltip {\n position: absolute;\n top: -30px;\n left: 50%;\n transform: translateX(-50%);\n background-color: #2E2E2E;\n color: #fff;\n padding: 5px;\n opacity: 0;\n transition: opacity 0.3s ease-in-out;\n transition-delay: 1.5s;\n white-space: nowrap;\n font-size: 12px;\n border-radius: 3px;\n border: 1px solid #252525;\n}\n\n.square:hover .tooltip {\n opacity: 1;\n}\n\n.square:not(:hover) .tooltip {\n opacity: 0;\n transition-delay: 0s;\n}\n\n.square svg {\n width: 20px;\n}"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"362541","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":7418,"cssLen":3149,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Demo 1

\n It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.\n

\n \n

","css":".section_our_solution .row {\n align-items: center;\n}\n\n.our_solution_category {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.our_solution_category .solution_cards_box {\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.solution_cards_box .solution_card {\n flex: 0 50%;\n background: #fff;\n box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2),\n 0 5px 15px 0 rgba(37, 44, 97, 0.15);\n border-radius: 15px;\n margin: 8px;\n padding: 10px 15px;\n position: relative;\n z-index: 1;\n overflow: hidden;\n min-height: 265px;\n transition: 0.7s;\n}\n\n.solution_cards_box .solution_card:hover {\n background: #309df0;\n color: #fff;\n transform: scale(1.1);\n z-index: 9;\n}\n\n.solution_cards_box .solution_card:hover::before {\n background: rgb(85 108 214 / 10%);\n}\n\n.solution_cards_box .solution_card:hover .solu_title h3,\n.solution_cards_box .solution_card:hover .solu_description p {\n color: #fff;\n}\n\n.solution_cards_box .solution_card:before {\n content: \"\";\n position: absolute;\n background: rgb(85 108 214 / 5%);\n width: 170px;\n height: 400px;\n z-index: -1;\n transform: rotate(42deg);\n right: -56px;\n top: -23px;\n border-radius: 35px;\n}\n\n.solution_cards_box .solution_card:hover .solu_description button {\n background: #fff !important;\n color: #309df0;\n}\n\n.solution_card .so_top_icon {\n}\n\n.solution_card .solu_title div {\n color: #212121;\n font-size: 1.3rem;\n margin-top: 13px;\n margin-bottom: 13px;\n}\n\n.solution_card .solu_description p {\n font-size: 15px;\n margin-bottom: 15px;\n}\n\n.solution_card .solu_description button {\n border: 0;\n border-radius: 15px;\n background: linear-gradient(\n 140deg,\n #42c3ca 0%,\n #42c3ca 50%,\n #42c3cac7 75%\n ) !important;\n color: #fff;\n font-weight: 500;\n font-size: 1rem;\n padding: 5px 16px;\n}\n\n.our_solution_content div {\n text-transform: capitalize;\n margin-bottom: 1rem;\n font-size: 2.5rem;\n}\n\n.our_solution_content p {\n}\n\n.hover_color_bubble {\n position: absolute;\n background: rgb(54 81 207 / 15%);\n width: 100rem;\n height: 100rem;\n left: 0;\n right: 0;\n z-index: -1;\n top: 16rem;\n border-radius: 50%;\n transform: rotate(-36deg);\n left: -18rem;\n transition: 0.7s;\n}\n\n.solution_cards_box .solution_card:hover .hover_color_bubble {\n top: 0rem;\n}\n\n.solution_cards_box .solution_card .so_top_icon {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n background: #fff;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.solution_cards_box .solution_card .so_top_icon img {\n width: 40px;\n height: 50px;\n object-fit: contain;\n}\n\n/*start media query*/\n@media screen and (min-width: 320px) {\n .sol_card_top_3 {\n position: relative;\n top: 0;\n }\n\n .our_solution_category {\n width: 100%;\n margin: 0 auto;\n }\n\n .our_solution_category .solution_cards_box {\n flex: auto;\n }\n}\n\n@media only screen and (min-width: 768px) {\n .our_solution_category .solution_cards_box {\n flex: 1;\n }\n}\n\n@media only screen and (min-width: 1024px) {\n .sol_card_top_3 {\n position: relative;\n top: -3rem;\n }\n\n .our_solution_category {\n width: 80%;\n margin: 0 auto;\n }\n}"},{"created":"2024-01-22T17:11:31.000Z","isPrivate":0,"projectId":"7cc078","snapshot":null,"tags":null,"title":"card by themrsami","updated":"2024-01-22T17:11:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1037,"cssLen":2628,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Your Message Sent Successfully

\n \n

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

\n \n

","css":".mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.h-1{height:0.25rem}.w-\\[90px\\]{width:90px}.w-full{width:100%}.max-w-\\[570px\\]{max-width:570px}.flex-1{flex:1 1 0%}.flex-wrap{flex-wrap:wrap}.gap-4{gap:1rem}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:0.25rem}.rounded-\\[20px\\]{border-radius:20px}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-3{padding:0.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-12{padding-top:3rem;padding-bottom:3rem}.pb-2{padding-bottom:0.5rem}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.leading-relaxed{line-height:1.625}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\\:border-red-600:hover{--tw-border-opacity:1;border-color:rgb(220 38 38 / var(--tw-border-opacity))}.hover\\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38 / var(--tw-bg-opacity))}.hover\\:bg-opacity-90:hover{--tw-bg-opacity:0.9}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}@media (min-width: 640px){.sm\\:text-2xl{font-size:1.5rem;line-height:2rem}}@media (min-width: 768px){.md\\:px-\\[70px\\]{padding-left:70px;padding-right:70px}.md\\:py-\\[60px\\]{padding-top:60px;padding-bottom:60px}}"},{"created":"2024-01-22T17:11:31.000Z","isPrivate":0,"projectId":"3c96bb","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":408,"cssLen":1292,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Run with the pack\n

\n\n

\n \n Get 35% off\n \n On your next order over $100\n

\n\n \n Get Discount\n \n\n

\n Offer valid until 29th April, 2023 *\n

","css":".card {\n overflow: hidden;\n border-radius: 0.5rem;\n max-width: 300px;\n background-color: #fff;\n color: #212121;\n}\n\n.image {\n height: 8rem;\n width: 100%;\n object-fit: cover;\n background-color: rgb(204, 0, 255);\n background-image: linear-gradient(to right, rgb(255, 174, 0), rgb(204, 0, 255));\n}\n\n.content {\n padding: 1rem;\n text-align: center;\n}\n\n.text-1 {\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n}\n\n.text-2 {\n margin-top: 1rem;\n font-weight: 900;\n text-transform: uppercase;\n}\n\n.text-2 span:first-child {\n font-size: 2.25rem;\n line-height: 2.5rem;\n font-weight: 900;\n}\n\n.text-2 span:last-child {\n margin-top: 0.5rem;\n display: block;\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.action {\n margin-top: 1rem;\n display: inline-block;\n width: 100%;\n background-color: rgb(0, 0, 0);\n padding-top: 1rem;\n padding-bottom: 1rem;\n border-radius: 4px;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 700;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: rgba(255, 255, 255, 1);\n text-decoration: none;\n}\n\n.date {\n margin-top: 1rem;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 500;\n text-transform: uppercase;\n color: rgba(156, 163, 175, 1);\n}"},{"created":"2024-01-22T17:11:31.000Z","isPrivate":0,"projectId":"b33dba","snapshot":null,"tags":null,"title":"card by Ykingdev","updated":"2024-01-22T17:11:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3975,"cssLen":2148,"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 \n \n \n \n \n \n\n \n \n \n

\n \n\n \n\n","css":".mt-8 {\n margin-top: 2rem;\n}\n.flex {\n display: flex;\n}\n.h-20 {\n height: 5rem;\n}\n.h-4 {\n height: 1rem;\n}\n.w-10 {\n width: 2.5rem;\n}\n.w-20 {\n width: 5rem;\n}\n.w-4 {\n width: 1rem;\n}\n.w-40 {\n width: 10rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-md {\n max-width: 28rem;\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n.animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.p-5 {\n padding: 1.25rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.text-yellow-200 {\n --tw-text-opacity: 1;\n color: rgb(254 240 138 / var(--tw-text-opacity));\n}\n.text-yellow-400 {\n --tw-text-opacity: 1;\n color: rgb(250 204 21 / var(--tw-text-opacity));\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),\n 0 2px 4px -2px 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.duration-150 {\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\\:duration-150:hover {\n transition-duration: 150ms;\n}\n@media (prefers-color-scheme: dark) {\n .dark\\:bg-neutral-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n }\n .dark\\:bg-neutral-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n }\n .dark\\:text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n }\n}\n"},{"created":"2024-01-22T17:11:31.000Z","isPrivate":0,"projectId":"d73d23","snapshot":null,"tags":null,"title":"card by Alireza11490","updated":"2024-01-22T17:11:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4021,"cssLen":1714,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Currently Playing

Time in a Bottle

Jim Corce

My Way

Frank Sinatra

Lemon Tree

Fools Garden

","css":".main {\n background-color: white;\n padding: 1em;\n padding-bottom: 1.1em;\n border-radius: 15px;\n margin: 1em;\n}\n\n.loader {\n display: flex;\n flex-direction: row;\n height: 4em;\n padding-left: 1em;\n padding-right: 1em;\n transform: rotate(180deg);\n justify-content: right;\n border-radius: 10px;\n transition: .3s ease-in-out;\n}\n\n.loader:hover {\n cursor: pointer;\n background-color: lightgray;\n}\n\n.currentplaying {\n display: flex;\n margin: 1em;\n}\n\n.spotify {\n width: 50px;\n height: 50px;\n margin-right: 0.6em;\n}\n\n.heading {\n color: black;\n font-size: 1.1em;\n font-weight: bold;\n align-self: center;\n}\n\n.loading {\n display: flex;\n margin-top: 1em;\n margin-left: 0.3em;\n}\n\n.load {\n width: 2px;\n height: 33px;\n background-color: limegreen;\n animation: 1s move6 infinite;\n border-radius: 5px;\n margin: 0.1em;\n}\n\n.load:nth-child(1) {\n animation-delay: 0.2s;\n}\n\n.load:nth-child(2) {\n animation-delay: 0.4s;\n}\n\n.load:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n.play {\n position: relative;\n left: 0.35em;\n height: 1.6em;\n width: 1.6em;\n clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);\n background-color: black;\n transform: rotate(-90deg);\n align-self: center;\n margin-top: 0.7em;\n justify-self: center;\n}\n\n.albumcover {\n position: relative;\n margin-right: 1em;\n height: 40px;\n width: 40px;\n background-color: rgb(233, 232, 232);\n align-self: center;\n border-radius: 5px;\n}\n\n.song {\n position: relative;\n transform: rotate(180deg);\n margin-right: 1em;\n color: black;\n align-self: center;\n}\n\n.artist {\n font-size: 0.6em;\n}\n\n@keyframes move6 {\n 0% {\n height: 0.2em;\n }\n\n 25% {\n height: 0.7em;\n }\n\n 50% {\n height: 1.5em;\n }\n\n 100% {\n height: 0.2em;\n }\n}"}]}},"actionData":null,"errors":null}