remember that one time i made a banger? i threw together the CSS for it kinda quickly and i made a few mistakes in the original code, so to make up for that here's a few more re-created straight from this website
edit: these do not account for dark theme, because this was made before the dark theme update- might make a 2.0 later that uses the --tw-border-opacity trick to change based on theme
This user was killed for fucking up the CSS in the original post for this homemade info box. Multi-line is now fully supported without the icon breaking.
Here's the same box but the icon is aligned up, because apparently in settings that's what it does.
This user doesn't know how to make eye contact. This user plays with their hands and makes little creature sounds. This icon is still aligned up because this one also does that in settings.
YES dude!!!
FUCK yeah!!!! HELL YEAH DUDE let's GO haha!!!!!! WOOOOOOOOOOOOO
feel free to steal!! raw source for each of the boxes in order, separated by empty line:
<div style="display:flex; flex-direction:row; background-color: rgb(255 232 212); border-radius:0.5rem; color:rgb(34 0 16); padding: 0.75rem; gap: 0.75rem; 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; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiKDEzMSAzNyA3OSkiIGFyaWEtaGlkZGVuPSJ0cnVlIiBjbGFzcz0iaC02IHctNiBmbGV4LW5vbmUgdGV4dC1jaGVycnkiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTExLjI1IDExLjI1bC4wNDEtLjAyYS43NS43NSAwIDAxMS4wNjMuODUybC0uNzA4IDIuODM2YS43NS43NSAwIDAwMS4wNjMuODUzbC4wNDEtLjAyMU0yMSAxMmE5IDkgMCAxMS0xOCAwIDkgOSAwIDAxMTggMHptLTktMy43NWguMDA4di4wMDhIMTJWOC4yNXoiPjwvcGF0aD48L3N2Zz4K)"></div>
<div><p style="margin:0">This user was killed for fucking up the CSS in the original post for this homemade info box. Multi-line is now fully supported without the icon breaking.</p></div></div>
<div style="display:flex; flex-direction:row; background-color: rgb(255 232 212); border-radius:0.5rem; color:rgb(25 25 25); 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(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiKDEzMSAzNyA3OSkiIGFyaWEtaGlkZGVuPSJ0cnVlIiBjbGFzcz0iaC02IHctNiBmbGV4LW5vbmUgdGV4dC1jaGVycnkiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTExLjI1IDExLjI1bC4wNDEtLjAyYS43NS43NSAwIDAxMS4wNjMuODUybC0uNzA4IDIuODM2YS43NS43NSAwIDAwMS4wNjMuODUzbC4wNDEtLjAyMU0yMSAxMmE5IDkgMCAxMS0xOCAwIDkgOSAwIDAxMTggMHptLTktMy43NWguMDA4di4wMDhIMTJWOC4yNXoiPjwvcGF0aD48L3N2Zz4K)"></div>
<div><p style="margin:0">Here's the same box but the icon is aligned up, because apparently in settings that's what it does.</p></div></div>
<div style="display:flex; flex-direction:row; background-color: rgb(250 216 214); border-radius:0.5rem; color:rgb(34 0 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(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiKDIyOSwgMTA3LCAxMTEpIiBhcmlhLWhpZGRlbj0idHJ1ZSIgY2xhc3M9InctNiBzZWxmLXN0YXJ0IHRleHQtc3RyYXdiZXJyeSI+PHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMTIgOXYzLjc1bS05LjMwMyAzLjM3NmMtLjg2NiAxLjUuMjE3IDMuMzc0IDEuOTQ4IDMuMzc0aDE0LjcxYzEuNzMgMCAyLjgxMy0xLjg3NCAxLjk0OC0zLjM3NEwxMy45NDkgMy4zNzhjLS44NjYtMS41LTMuMDMyLTEuNS0zLjg5OCAwTDIuNjk3IDE2LjEyNnpNMTIgMTUuNzVoLjAwN3YuMDA4SDEydi0uMDA4eiI+PC9wYXRoPjwvc3ZnPgo=)"></div>
<div><p style="margin:0">This user doesn't know how to make eye contact. This user plays with their hands and makes little creature sounds. This icon is still aligned up because this one also does that in settings.</p></div></div>
<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(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiKDE0LCA1OSwgMTYpIiBhcmlhLWhpZGRlbj0idHJ1ZSIgY2xhc3M9InctNiBzZWxmLXN0YXJ0IHRleHQtZ3JlZW4tODAwIj48cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik05IDEyLjc1TDExLjI1IDE1IDE1IDkuNzVNMjEgMTJhOSA5IDAgMTEtMTggMCA5IDkgMCAwMTE4IDB6Ij48L3BhdGg+PC9zdmc+Cg==)"></div>
<div><p style="margin:0"><span style="font-weight: 700;">YES dude!!!</span><br>FUCK yeah!!!! HELL YEAH DUDE let's GO haha!!!!!! WOOOOOOOOOOOOO</p></div></div>
