{"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:10:54.000Z","isPrivate":0,"projectId":"de9d09","snapshot":null,"tags":null,"title":"card by alexmaracinaru","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":263,"jsLen":0,"cssLen":698,"pureCSS":1,"html":"

Illustration

A heading that must span over two lines\n

By Abi 4 days ago

","css":".card {\n width: 190px;\n background: white;\n padding: .4em;\n border-radius: 6px;\n}\n\n.card-image {\n background-color: rgb(236, 236, 236);\n width: 100%;\n height: 130px;\n border-radius: 6px 6px 0 0;\n}\n\n.card-image:hover {\n transform: scale(0.98);\n}\n\n.category {\n text-transform: uppercase;\n font-size: 0.7em;\n font-weight: 600;\n color: rgb(63, 121, 230);\n padding: 10px 7px 0;\n}\n\n.category:hover {\n cursor: pointer;\n}\n\n.heading {\n font-weight: 600;\n color: rgb(88, 87, 87);\n padding: 7px;\n}\n\n.heading:hover {\n cursor: pointer;\n}\n\n.author {\n color: gray;\n font-weight: 400;\n font-size: 11px;\n padding-top: 20px;\n}\n\n.name {\n font-weight: 600;\n}\n\n.name:hover {\n cursor: pointer;\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"ea42d0","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":324,"jsLen":0,"cssLen":971,"pureCSS":1,"html":"

\n \n

Different ways to use CSS in React

\n React\n Css\n

\n\n

","css":".card {\n width: 320px;\n height: 350px;\n padding: 20px;\n color: white;\n background: linear-gradient(#212121, #212121) padding-box,\n linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box;\n border: 2px solid transparent;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n transform-origin: right bottom;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.card .main-content {\n flex: 1;\n}\n\n.card .header span:first-child {\n font-weight: 600;\n color: #717171;\n margin-right: 4px;\n}\n\n.card .heading {\n font-size: 24px;\n margin: 24px 0 16px;\n font-weight: 600;\n}\n\n.card .categories {\n display: flex;\n gap: 8px;\n}\n\n.card .categories span {\n background-color: #e81cff;\n padding: 4px 8px;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 12px;\n border-radius: 50em;\n}\n\n.card .footer {\n font-weight: 600;\n color: #717171;\n margin-right: 4px;\n}\n\n.card:hover {\n rotate: 8deg;\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"f3d07a","snapshot":null,"tags":null,"title":"card by arshshaikh06","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":715,"jsLen":0,"cssLen":1097,"pureCSS":1,"html":"

264653

2A9D8F

E9C46A

F4A261

E76F51

\n 53421 saves\n \n

","css":".container {\n height: 200px;\n width: 350px;\n border-radius: 1em;\n overflow: hidden;\n box-shadow: 0 10px 20px #dbdbdb;\n font-family: sans-serif;\n}\n\n.palette {\n display: flex;\n height: 86%;\n width: 100%;\n}\n\n.color {\n height: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n letter-spacing: 1px;\n transition: flex 0.1s linear;\n}\n\n.color span {\n opacity: 0;\n transition: opacity 0.1s linear;\n}\n\n.color:nth-child(1) {\n background: #264653;\n}\n\n.color:nth-child(2) {\n background: #2a9d8f;\n}\n\n.color:nth-child(3) {\n background: #e9c46a;\n}\n\n.color:nth-child(4) {\n background: #f4a261;\n}\n\n.color:nth-child(5) {\n background: #e76f51;\n}\n\n.color:hover {\n flex: 2;\n box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;\n}\n\n.color:hover span {\n opacity: 1;\n}\n\n#stats {\n height: 14%;\n width: 100%;\n background: white;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 1.5em;\n box-sizing: border-box;\n color: #bebebe;\n}\n\n#stats svg {\n fill: #bebebe;\n transform: scale(1.2);\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"f8b880","snapshot":null,"tags":null,"title":"card by catraco","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1081,"jsLen":0,"cssLen":1577,"pureCSS":1,"html":"

\n card title\n

\n Using Lorem ipsum to focus attention on graphic elements in a webpage design proposal · One of the earliest examples\n of the Lorem ipsum placeholder text on 1960s advertising...\n

\n \n

\n \n\n

","css":".col-span-1{grid-column:span 1 / span 1}.col-span-2{grid-column:span 2 / span 2}.grid{display:grid}.w-60{width:15rem}.justify-center{justify-content:center}.gap-4{gap:1rem}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225 / var(--tw-border-opacity))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}.bg-gradient-to-l{background-image:linear-gradient(to left, var(--tw-gradient-stops))}.from-slate-300{--tw-gradient-from:#cbd5e1 var(--tw-gradient-from-position);--tw-gradient-to:rgb(203 213 225 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-slate-100{--tw-gradient-to:#f1f5f9 var(--tw-gradient-to-position)}.p-2{padding:0.5rem}.p-4{padding:1rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:700}.capitalize{text-transform:capitalize}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105 / 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)}.duration-300{transition-duration:300ms}.hover\\:bg-slate-600:hover{--tw-bg-opacity:1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}.hover\\:text-slate-200:hover{--tw-text-opacity:1;color:rgb(226 232 240 / var(--tw-text-opacity))}"},{"created":"2023-12-22T15:08:13.000Z","isPrivate":0,"projectId":"d8ed48","snapshot":"https://s1.qingting.work/runjs/1232779581d7.png?x-oss-process=style/webp-w-500","tags":null,"title":"getmental Card","updated":"2023-12-22T17:09:02.000Z","isTemplate":1,"relatedUrl":"https://www.getmental.com/","forkFrom":null,"htmlType":"html","htmlLen":670,"jsLen":0,"cssLen":680,"pureCSS":0},{"created":"2023-12-18T13:28:42.000Z","isPrivate":0,"projectId":"08a2f3","snapshot":"https://s1.qingting.work/runjs/714e6a7e82e9.png?x-oss-process=style/webp-w-500","tags":null,"title":"Producthunt - rate it","updated":"2023-12-20T03:40:34.000Z","isTemplate":1,"relatedUrl":null,"forkFrom":null,"htmlType":"html","htmlLen":6356,"jsLen":0,"cssLen":4007,"pureCSS":0},{"created":"2023-11-29T01:54:56.000Z","isPrivate":0,"projectId":"6aa91b","snapshot":"https://s1.qingting.work/runjs/3efb7d24dc43.png?x-oss-process=style/webp-w-500","tags":null,"title":"Dev welcome actions","updated":"2023-12-09T05:33:34.000Z","isTemplate":1,"relatedUrl":null,"forkFrom":null,"htmlType":"html","htmlLen":2556,"jsLen":21,"cssLen":1521,"pureCSS":0},{"created":"2022-07-05T05:10:52.000Z","isPrivate":0,"projectId":"569b27d5642f4f16","snapshot":"https://s1.qingting.work/runjs/d646bd05b17a.png?x-oss-process=style/webp-w-500","tags":null,"title":"Browser frame - show me your code","updated":"2023-11-21T15:09:17.000Z","isTemplate":0,"relatedUrl":null,"forkFrom":null,"htmlType":"html","htmlLen":199,"jsLen":0,"cssLen":929,"pureCSS":0},{"created":"2022-06-14T15:48:07.000Z","isPrivate":0,"projectId":"7150feb46f614646","snapshot":"https://s1.qingting.work/runjs/snapshots/7150feb46f614646.png?x-oss-process=style/webp-w-500","tags":null,"title":"CodePen HomeBlog Posts Design - #063 of #100Days100Projects","updated":"2023-11-21T15:09:09.000Z","isTemplate":0,"relatedUrl":null,"forkFrom":null,"htmlType":"html","htmlLen":1773,"jsLen":1458,"cssLen":3519,"pureCSS":0},{"created":"2022-06-08T17:07:38.000Z","isPrivate":0,"projectId":"2457a711f12d40d2","snapshot":"https://s1.qingting.work/runjs/snapshots/2457a711f12d40d2.png?x-oss-process=style/webp-w-500","tags":"font-awesome","title":"47 - Testimonial Box Switcher","updated":"2023-11-21T15:09:06.000Z","isTemplate":0,"relatedUrl":null,"forkFrom":null,"htmlType":"html","htmlLen":919,"jsLen":3664,"cssLen":1323,"pureCSS":0},{"created":"2022-06-08T16:51:09.000Z","isPrivate":0,"projectId":"4ba2c81ac10b442e","snapshot":"https://s1.qingting.work/runjs/9eb0fc7de4b8.png?x-oss-process=style/webp-w-500","tags":null,"title":"37 - Pokedex","updated":"2023-11-21T15:09:05.000Z","isTemplate":0,"relatedUrl":null,"forkFrom":null,"htmlType":"html","htmlLen":165,"jsLen":1705,"cssLen":1084,"pureCSS":0},{"created":"2022-05-24T05:47:23.000Z","isPrivate":0,"projectId":"9d12453d6cd84a17","snapshot":"https://s1.qingting.work/runjs/snapshots/9d12453d6cd84a17.png?x-oss-process=style/webp-w-500","tags":null,"title":"Vue twitter card","updated":"2023-11-21T15:09:01.000Z","isTemplate":0,"relatedUrl":null,"forkFrom":null,"htmlType":"html","htmlLen":353,"jsLen":6123,"cssLen":1509,"pureCSS":0}]}},"actionData":null,"errors":null}