{"html":"

\n 7 Tools for Faster Development in React\n 3 min to read\n

\n 10\n 4\n

\n\n\n

","css":".post-card {\n width: 320px;\n background: lightgrey;\n background-color: rgb(24 27 32);\n border: 1px solid rgb(84 90 106);\n border-radius: 20px;\n color: white;\n display: flex;\n flex-direction: column;\n padding: 10px 20px;\n}\n\n.avatar {\n height: 35px;\n width: 35px;\n border-radius: 50%;\n background-color: blueviolet;\n background-image: linear-gradient(to top left, blueviolet,rgb(73, 31, 112));\n}\n\n.title {\n font-size: 20px;\n line-height: 22px;\n font-weight: 600;\n margin-top: 10px;\n color: #fff;\n text-decoration: none;\n transition: all .35s ease-in;\n}\n\n.title:hover {\n text-decoration: underline blueviolet;\n}\n\n.datetime {\n font-size: 12px;\n color: rgb(168 179 207);\n margin: 10px 0;\n}\n\n.image-preview {\n flex: 1;\n min-height: 150px;\n width: 100%;\n border-radius: 20px;\n background-color: blueviolet;\n background-image: linear-gradient(to top left, blueviolet,rgb(73, 31, 112));\n margin-bottom: 4px;\n}\n\n.comment-like {\n display: flex;\n justify-content: space-around;\n align-items: center;\n padding: 2px 0;\n}\n\n.comment-like span {\n cursor: pointer;\n height: 40px;\n width: 50px;\n padding: 0 3px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 900;\n border-radius: 10px;\n background-color: transparent;\n transition: all .15s ease;\n}\n\n.comment-like span:hover {\n background-color: rgba(137, 43, 226, 0.096);\n}\n\n.comment-like span svg {\n fill: rgb(255, 255, 255);\n margin-right: 2px;\n}"}

massive-firefox-9

👁 实时预览

📝 源代码