{"loaderData":{"0":null,"0-17":{"tags":[{"name":"button","label":"Button","count":1289},{"name":"checkbox","label":"Checkbox","count":139},{"name":"loader","label":"Loader","count":732},{"name":"switch","label":"Switch","count":229},{"name":"card","label":"Card","count":648},{"name":"input","label":"Input","count":158},{"name":"radio-button","label":"Radio Button","count":37},{"name":"form","label":"Form","count":157},{"name":"pattern","label":"Pattern","count":83},{"name":"tooltip","label":"Tooltip","count":33},{"name":"twitter","label":"Twitter","count":5},{"name":"runjscollect","label":"RunJS Collect","count":10}]},"0-17-0":{"total":648,"projects":[{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"0ab12b","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1130,"jsLen":0,"cssLen":742,"pureCSS":1,"html":"\n

\n \n

lorem ipsum dolor sit amet

","css":".error {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 320px;\n padding: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: start;\n background: #FCE8DB;\n border-radius: 8px;\n border: 1px solid #EF665B;\n box-shadow: 0px 0px 5px -3px #111;\n}\n\n.error__icon {\n width: 20px;\n height: 20px;\n transform: translateY(-2px);\n margin-right: 8px;\n}\n\n.error__icon path {\n fill: #EF665B;\n}\n\n.error__title {\n font-weight: 500;\n font-size: 14px;\n color: #71192F;\n}\n\n.error__close {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-left: auto;\n}\n\n.error__close path {\n fill: #71192F;\n}"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"1ae29b","snapshot":null,"tags":null,"title":"card by Kemboi-Dun","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":648,"jsLen":0,"cssLen":431,"pureCSS":1,"html":"

\n\n

\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n \n

","css":".card {\n width: 300px;\n height: 300px;\n background: #e4e3e3da;\n border-radius: 1em;\n display: flex;\n flex-direction: column;\n justify-content: space-evenly;\n gap: 0.4em;\n align-items: flex-start;\n padding: 1em 1.5em;\n transition: all 0.5s ease;\n box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);\n}\n\n.card:hover {\n background: #f1f1f1;\n}\n\n.card-icon svg {\n height: 4rem;\n width: 4rem;\n}\n\n.card-body {\n text-align: justify;\n}"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"53fd7e","snapshot":null,"tags":null,"title":"card by garerim","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":202,"jsLen":0,"cssLen":1101,"pureCSS":1,"html":"

Add to Cart

Lorem ipsum

Price : 15$

\n \n

","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background: #fff;\n border: solid 4px #333;\n box-shadow: -5px 5px #333;\n transition: all .2s ease-in-out;\n display: flex;\n justify-content: center;\n cursor: pointer;\n}\n\n.card:hover {\n margin: 10px 10px 0 0;\n box-shadow: 0px 0px #333;\n}\n\n.card .img-card {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: calc(100% - 50px);\n display: flex;\n justify-content: center;\n align-items: center;\n transition: filter .2s 1s ease-in-out;\n}\n\n.card:hover .img-card {\n filter: blur(1px);\n}\n\n.card .add-cart {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: calc(100% - 50px);\n background-color: rgba(0, 0, 0, 0.1);\n text-align: center;\n line-height: 250px;\n font-weight: bold;\n font-size: 19px;\n opacity: 0;\n}\n\n.card:hover .add-cart {\n opacity: 1;\n transition: opacity .3s 1s ease-in-out;\n}\n\n.card .info-card {\n position: absolute;\n height: 50px;\n width: 100%;\n bottom: 0;\n left: 0;\n right: 0;\n border-top: solid 1px #333;\n}\n\n.card .info-card p {\n font-size: 14px;\n margin: 5px;\n}\n\n"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"54b263","snapshot":null,"tags":null,"title":"card by 00Kubi","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":797,"jsLen":0,"cssLen":2428,"pureCSS":1,"html":"

\n \n \n \n

00Kubi@admin: ~

\n 00Kubi@admin:\n ~\n $\n \n

Welcome to Terminal

\n \n

\n","css":".container {\n width: 400px;\n height: 300px;\n background: #1e1e1e;\n font-family: Menlo, Consolas, monospace;\n font-size: 14px;\n color: #e6e6e6;\n border-radius: 5px;\n overflow: hidden;\n}\n\n.terminal_toolbar {\n display: flex;\n height: 30px;\n align-items: center;\n padding: 0 8px;\n box-sizing: border-box;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n background: #212121;\n justify-content: space-between;\n}\n\n.butt {\n display: flex;\n align-items: center;\n}\n\n.btn {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n margin-right: 5px;\n font-size: 8px;\n height: 12px;\n width: 12px;\n box-sizing: border-box;\n border: none;\n border-radius: 100%;\n background: linear-gradient(#7d7871 0%, #595953 100%);\n text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2);\n box-shadow: 0px 0px 1px 0px #41403a, 0px 1px 1px 0px #474642;\n}\n\n.btn-color {\n background: #ee411a;\n}\n\n.btn:hover {\n cursor: pointer;\n}\n\n.btn:focus {\n outline: none;\n}\n\n.butt--exit {\n background: linear-gradient(#f37458 0%, #de4c12 100%);\n}\n\n.add_tab {\n border: 1px solid #fff;\n color: #fff;\n padding: 0 6px;\n border-radius: 4px 4px 0 0;\n border-bottom: none;\n cursor: pointer;\n}\n\n.user {\n color: #d5d0ce;\n margin-left: 6px;\n font-size: 14px;\n line-height: 15px;\n}\n\n.terminal_body {\n background: rgba(0, 0, 0, 0.6);\n height: calc(100% - 30px);\n padding-top: 2px;\n margin-top: -1px;\n font-size: 12px;\n border-bottom-left-radius: 5px;\n border-bottom-right-radius: 5px;\n display: flex;\n flex-direction: column;\n}\n\n.terminal_prompt {\n display: flex;\n align-items: center;\n padding: 4px;\n}\n\n.terminal_prompt span {\n margin-left: 4px;\n}\n\n.terminal_user {\n color: #1eff8e;\n}\n\n.terminal_location {\n color: #4878c0;\n}\n\n.terminal_bling {\n color: #dddddd;\n}\n\n.terminal_cursor {\n display: block;\n height: 14px;\n width: 5px;\n margin-left: 10px;\n animation: curbl 1200ms linear infinite;\n}\n\n.terminal_output {\n padding: 4px;\n flex-grow: 1;\n overflow-y: auto;\n}\n\n.output_text {\n margin: 0;\n}\n\n.terminal_input {\n padding: 4px;\n}\n\n.input_text {\n width: 100%;\n padding: 6px;\n background: transparent;\n border: none;\n color: #e6e6e6;\n caret-color: #1eff8e;\n}\n\n@keyframes curbl {\n 0% {\n background: #ffffff;\n }\n\n 49% {\n background: #ffffff;\n }\n\n 60% {\n background: transparent;\n }\n\n 99% {\n background: transparent;\n }\n\n 100% {\n background: #ffffff;\n }\n}\n"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"6caacd","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":659,"jsLen":0,"cssLen":725,"pureCSS":1,"html":"

\n \n

lorem ipsum dolor sit amet

","css":".warning {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 320px;\n padding: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: start;\n background: #FEF7D1;\n border-radius: 8px;\n box-shadow: 0px 0px 5px -3px #111;\n}\n\n.warning__icon {\n width: 20px;\n height: 20px;\n transform: translateY(-2px);\n margin-right: 8px;\n}\n\n.warning__icon path {\n fill: #F7C752;\n}\n\n.warning__title {\n font-weight: 500;\n font-size: 14px;\n color: #755118;\n}\n\n.warning__close {\n width: 20px;\n height: 20px;\n margin-left: auto;\n cursor: pointer;\n}\n\n.warning__close path {\n fill: #755118;\n}"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"7df3a4","snapshot":null,"tags":null,"title":"card by zebra76966","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":5808,"jsLen":0,"cssLen":774,"pureCSS":1,"html":"

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

\n","css":".card {\n width: 290px;\n height: 64px;\n background: rgb(255, 255, 255);\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n border-radius: 20px;\n position: relative;\n border: 2px solid transparent;\n transition: all 0.5s ease-in-out;\n}\n\n.card:focus-within {\n background-color: rgba(17, 17, 17, 0.5);\n backdrop-filter: blur(10px);\n border: 2px solid rgb(27, 27, 27);\n box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);\n}\n\n.card button {\n font-size: 34px;\n background-color: transparent;\n width: 50px;\n padding: 7px;\n height: 50px;\n border-radius: 100%;\n transition: all 0.2s ease-in;\n border: 0;\n cursor: pointer;\n}\n\n.card button:focus {\n background-color: rgb(255, 255, 255);\n margin-bottom: 50%;\n}\n\n.card::hover {\n}\n\n"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"82616f","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1295,"jsLen":0,"cssLen":3290,"pureCSS":1,"html":"\n \n \n \n \n

\n Text title\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat\n felis nec rutrum vulputate. Morbi ut lobortis enim. Nam nec elit nibh.\n

\n \n See more\n \n

\n\n","css":".absolute{position:absolute}.relative{position:relative}.-bottom-24{bottom:-6rem}.-top-12{top:-3rem}.bottom-12{bottom:3rem}.right-1{right:0.25rem}.right-12{right:3rem}.z-10{z-index:10}.flex{display:flex}.h-12{height:3rem}.h-24{height:6rem}.h-36{height:9rem}.h-64{height:16rem}.h-72{height:18rem}.h-full{height:100%}.w-12{width:3rem}.w-24{width:6rem}.w-36{width:9rem}.w-72{width:18rem}.w-96{width:24rem}.w-full{width:100%}.flex-col{flex-direction:column}.justify-evenly{justify-content:space-evenly}.overflow-hidden{overflow:hidden}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.bg-indigo-700{--tw-bg-opacity:1;background-color:rgb(67 56 202 / var(--tw-bg-opacity))}.bg-indigo-800{--tw-bg-opacity:1;background-color:rgb(55 48 163 / var(--tw-bg-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38 / var(--tw-bg-opacity))}.bg-sky-700{--tw-bg-opacity:1;background-color:rgb(3 105 161 / var(--tw-bg-opacity))}.bg-sky-900{--tw-bg-opacity:1;background-color:rgb(12 74 110 / var(--tw-bg-opacity))}.p-3{padding:0.75rem}.p-4{padding:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.text-neutral-50{--tw-text-opacity:1;color:rgb(250 250 250 / var(--tw-text-opacity))}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38 / var(--tw-text-opacity))}.blur{--tw-blur:blur(8px);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)}.duration-500{transition-duration:500ms}.hover\\:bg-neutral-200:hover{--tw-bg-opacity:1;background-color:rgb(229 229 229 / var(--tw-bg-opacity))}.group:hover .group-hover\\:-translate-x-12{--tw-translate-x:-3rem;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-12{--tw-translate-y:-3rem;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-x-12{--tw-translate-x:3rem;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-12{--tw-translate-y:3rem;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-2{--tw-translate-y:0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:blur-none{--tw-blur:blur(0);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)}"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"bace58","snapshot":null,"tags":null,"title":"card by tsd29142","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":67,"jsLen":0,"cssLen":382,"pureCSS":1,"html":"

\n \n

","css":".card {\n height: 250px;\n width: 190px;\n background-image: linear-gradient(to top, #210c93, #0d117a, #011160, #010e47, #07052e);\n box-shadow: rgba(0, 0, 0, 0.24) -20px 30px 10px;\n transform-style: preserve-3d;\n transform: perspective(400px)\n rotateX(60deg)\n rotateZ(-30deg);\n border-radius: 10px;\n transition: transform 2s;\n}\n\n.card:hover {\n transform: rotateY(19deg);\n}"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"c919c0","snapshot":null,"tags":null,"title":"card by joe-watson-sbf","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":958,"jsLen":0,"cssLen":1264,"pureCSS":1,"html":"

\n \n\n

\n Lorem ipsum dolor sit tali amet, consectus uy\n adipiscing it amet it...\n

\n\n Read More...\n

","css":".card {\n width: 190px;\n height: 120px;\n transition: all .5s;\n box-shadow: 15px 15px 30px rgba(25, 25, 25, 0.11),\n -15px -15px 30px rgba(60, 60, 60, 0.082);\n text-align: center;\n overflow: hidden;\n}\n\n.card:hover {\n height: 260px;\n background: linear-gradient(360deg, #edededc5 60%, hsla(0, 0%, 13%, 1) 70%);\n}\n\n.card .header {\n padding: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: #212121;\n margin-bottom: 16px;\n}\n\n.card .header .img-box {\n width: 50px;\n}\n\n.card .header .title {\n font-size: 1em;\n letter-spacing: .1em;\n font-weight: 900;\n text-transform: uppercase;\n padding: 4px 0 14px 0;\n transition: all .5s;\n color: #edededc5;\n}\n\n.card:hover .header {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);\n}\n\n.card:hover .card .header .title {\n padding: 0;\n}\n\n.card .content {\n display: block;\n text-align: left;\n color: #212121;\n margin: 0 18px;\n}\n\n.card .content p {\n transition: all .5s;\n font-size: .8em;\n margin-bottom: 8px;\n}\n\n.card .content a {\n color: #1d8122;\n cursor: pointer;\n transition: all .5s;\n font-size: .7rem;\n font-weight: 700;\n text-transform: uppercase;\n}\n\n.card .content .btn-link:hover {\n border-bottom: 1px solid #1d8122;\n}"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"e0a5ec","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":338,"jsLen":0,"cssLen":1350,"pureCSS":1,"html":"

Card Hover Effect\n

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

\n \n

","css":".card {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 320px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n padding: 32px;\n overflow: hidden;\n border-radius: 10px;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 20px;\n color: #e8e8e8;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.content .heading {\n font-weight: 700;\n font-size: 32px;\n}\n\n.content .para {\n line-height: 1.5;\n}\n\n.content .btn {\n color: #e8e8e8;\n text-decoration: none;\n padding: 10px;\n font-weight: 600;\n border: none;\n cursor: pointer;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n border-radius: 5px;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 5px;\n height: 100%;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n z-index: -1;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.card:hover::before {\n width: 100%;\n}\n\n.card:hover {\n box-shadow: none;\n}\n\n.card:hover .btn {\n color: #212121;\n background: #e8e8e8;\n}\n\n.content .btn:hover {\n outline: 2px solid #e8e8e8;\n background: transparent;\n color: #e8e8e8;\n}\n\n.content .btn:active {\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"03749a","snapshot":null,"tags":null,"title":"card by mi-series","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":399,"jsLen":0,"cssLen":1317,"pureCSS":1,"html":"

GPT Plus

$20/month

Access to GPT-4, our most capable model. Faster response speed.

\n Act fast! Offer ends on October 25, 2023.\n \n

Special Offer!

","css":".container {\n width: 300px;\n padding: 15px;\n background: #ffffff;\n text-align: center;\n border: 1px solid #000;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);\n position: relative;\n}\n\n.container .title {\n font-size: 2rem;\n font-weight: 500;\n color: #333;\n}\n\n.container .price {\n color: #40B3A2;\n font-weight: 700;\n font-size: 2.2rem;\n margin: 10px 0;\n}\n\n.container span {\n font-size: 1.2rem;\n}\n\n.container .description {\n color: #3b3b3b;\n font-size: 1.1rem;\n margin: 10px 0 10px;\n}\n\n.container .offer {\n display: block;\n color: #555;\n font-size: 1rem;\n margin-top: 10px;\n}\n\n.subscribe-button {\n display: inline-block;\n padding: 5px 0;\n background-color: #40B3A2;\n color: #fff;\n text-decoration: none;\n border: 1px solid #000;\n border-radius: 30px;\n font-size: 1.2rem;\n margin-top: 20px;\n width: 50%;\n font-weight: 500;\n transition: 0.2s ease;\n}\n\n.subscribe-button:hover {\n opacity: .85;\n}\n\n.ribbon-wrap {\n width: 80px;\n height: 80px;\n position: absolute;\n top: -20px;\n left: 50px;\n pointer-events: none;\n}\n\n.ribbon {\n width: 200px;\n font-size: 0.8rem;\n text-align: center;\n padding: 4px 0;\n border: 1px solid #000;\n background: #40B3A2;\n color: #fff;\n position: absolute;\n transform: rotate(-45deg);\n right: -10px;\n top: 55%;\n}"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"04183e","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":684,"jsLen":0,"cssLen":1224,"pureCSS":1,"html":"

\n \n

\n Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum\n provident a, ipsa maiores deleniti consectetur nobis et eaque.\n

Published: 31st June, 2021
Reading time: 3 minute

","css":".card {\n max-width: 320px;\n position: relative;\n display: block;\n overflow: hidden;\n border: 1px solid rgba(243, 244, 246, );\n border-radius: 0.5rem;\n padding: 1rem;\n background-color: #fff;\n}\n\n.header {\n display: flex;\n justify-content: space-between;\n grid-gap: 1rem;\n gap: 1rem;\n}\n\n.title {\n font-size: 1.125rem;\n line-height: 1.25rem;\n font-weight: 700;\n color: rgba(17, 24, 39, 1);\n text-decoration: none;\n}\n\n.title:hover {\n text-decoration: underline royalblue;\n}\n\n.name {\n margin-top: 0.25rem;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 500;\n color: rgba(75, 85, 99, 1);\n}\n\n.image {\n display: block;\n flex-shrink: 0;\n height: 3rem;\n width: 3rem;\n border-radius: 0.5rem;\n object-fit: cover;\n background-color: royalblue;\n}\n\n.description {\n margin-top: 1rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n color: rgba(107, 114, 128, 1);\n}\n\n.post-info {\n margin-top: 1.5rem;\n display: flex;\n grid-gap: 1rem;\n gap: 1rem;\n}\n\n.cr {\n display: flex;\n flex-direction: column-reverse;\n}\n\n.dt {\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 600;\n color: rgba(75, 85, 99, 1);\n}\n\n.dd {\n font-size: 0.75rem;\n line-height: 1rem;\n color: rgba(107, 114, 128,1);\n}"}]}},"actionData":null,"errors":null}