{"html":"

\n User list:\n

\n Olivia Anderson\n Marketing Manager\n
\n Ethan Murphy\n Graphic Designer\n
\n Ava Collins\n Financial Analyst\n
\n Noah Walker\n Journalist\n

","css":".wrapper {\n position: relative;\n --white: #e3e3e3;\n --bc: rgb(203,46,79);\n --bc-al: rgba(203,46,79,0.6);\n}\n\n.card {\n max-width: 340px;\n padding: 1rem 0;\n display: grid;\n grid-template-areas: \"top\" \"bottom\";\n grid-template-rows: 20% 1fr;\n border: 1px solid var(--bc-al);\n border-radius: .75rem;\n background: var(--bc-al);\n color: var(--white);\n backdrop-filter: blur(14px);\n box-shadow: 0 15px 30px -15px var(--bc-al);\n isolation: isolate;\n}\n\n.circle-1 {\n position: absolute;\n content: '';\n width: 5rem;\n height: 5rem;\n left: 1rem;\n top: 50%;\n transform: translate(-50%);\n background-color: var(--bc-al);\n border-radius: 50%;\n z-index: -10;\n}\n\n.circle-2 {\n position: absolute;\n content: '';\n width: 3rem;\n height: 3rem;\n right: -1rem;\n top: 3rem;\n background-color: var(--bc-al);\n border-radius: 50%;\n z-index: -10;\n}\n\n.top {\n padding: .5rem 4rem;\n z-index: 1;\n}\n\n.bottom {\n z-index: 2;\n}\n\n.users {\n display: flex;\n flex-direction: column;\n padding: .5rem 0;\n}\n\n.user {\n width: 100%;\n padding: .75rem 4rem;\n display: flex;\n gap: .1rem;\n flex-direction: column;\n align-items: flex;\n font-size: 1.1rem;\n border-bottom: 1px solid var(--bc-al);\n position: relative;\n}\n\n.user:hover {\n background-color: var(--bc-al);\n}\n\n.user:nth-last-child(1) {\n border-bottom: none;\n}\n\n.user::before {\n content: '';\n position: absolute;\n width: 5px;\n height: 5px;\n left: 1.75rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: var(--white);\n border-radius: 50%;\n}\n\n.user-name {\n font-weight: 700;\n font-style: italic;\n}\n\n.user-occupation {\n opacity: .8;\n}\n\n.u-l {\n font-size: 1.1rem;\n font-weight: 700;\n font-style: italic;\n}"}

perfect-bear-45

👁 实时预览

📝 源代码