violet / vivi / vi

This is a long-standing variety of "CSS crime" that involves recreating various bits of aesthetic formatting. Formally, the code for this effect is as follows:

<div class="px-3  relative overflow-hidden supports-[overflow:clip]:overflow-clip isolate" data-post-body="true" data-testid="post-body"><div class="co-prose prose my-4 overflow-hidden break-words"><div style="display: flex; flex-direction: row; background-color: rgb(226, 246, 208); border-radius: 0.5rem; color: rgb(14, 59, 16); padding: 0.75rem; gap: 1rem; align-items: center; align-self: stretch; box-sizing: border-box; width: 100%; margin-top: 0.75rem; margin-bottom: 0.75rem; line-height: 1.5;">
<div style="width: 1.5rem; height: 1.5rem; flex-shrink: 0; align-self: flex-start; background-image: url(&quot;data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiKDE0LCA1OSwgMTYpIiBhcmlhLWhpZGRlbj0idHJ1ZSIgY2xhc3M9InctNiBzZWxmLXN0YXJ0IHRleHQtZ3JlZW4tODAwIj48cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik05IDEyLjc1TDExLjI1IDE1IDE1IDkuNzVNMjEgMTJhOSA5IDAgMTEtMTggMCA5IDkgMCAwMTE4IDB6Ij48L3BhdGg+PC9zdmc+Cg==&quot;);"></div>
<div>
<p style="margin: 0px;">
<span style="font-weight: 700;">
Success!
</span>
<br>
Creature was milked for this post.
</p></div></div></div></div>

While much of this CSS initially seems impenetrable, this isn't as much of an obstacle to making posts like this of your own as you might think. I extracted the code above using the "Inspect Element" function of my browser, and if I wanted to recreate this with different text, I could easily do so while leaving all the code intact. That's how a lot of folks get started with this sort of posting.