<aside> 👉 Features: Automatic light/dark theme switching Fallback icon for users without avatars (or for broken ones)

</aside>

HTML

<div class="my-comments">
  <div class="my-comment-card">
    <div class="my-comment-avatar-container my-comment-avatar-fallback">
      <img class="my-comment-avatar"
						src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
						style="background-image: url(GLIDE_IMAGE_COLUMN)" />
    </div>
    <div class="my-comment-contents">
      <div class="my-comment-header">
        <div class="my-comment-name">GLIDE_USER_NAME</div>
        <div class="my-comment-date">DATE_COMMENT_CREATED</div>
      </div>
      <div class="my-comment-body">
        ACTUAL_COMMENT_BODY
      </div>
    </div>
  </div>
</div>

CSS

.my-comment-card {
  display: flex;
  font-size: .875rem;
  isolation: isolate;
  margin-bottom: 12px;
}

.my-comment-avatar-container {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 8px 8px -4px hsl(0 0% 0% / .25);
  margin-top: 8px;
  z-index: 1;
}

.my-comment-avatar-fallback {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSIjRjVGNUY1Ii8+CjxwYXRoIGQ9Ik00OS40NTQ1IDMwLjA2ODZDNDkuNDU0NSAzNS4wNzcxIDQ1LjIyMTYgMzkuMTM3MyA0MCAzOS4xMzczQzM0Ljc3ODQgMzkuMTM3MyAzMC41NDU1IDM1LjA3NzEgMzAuNTQ1NSAzMC4wNjg2QzMwLjU0NTUgMjUuMDYwMiAzNC43Nzg0IDIxIDQwIDIxQzQ1LjIyMTYgMjEgNDkuNDU0NSAyNS4wNjAyIDQ5LjQ1NDUgMzAuMDY4NloiIGZpbGw9IiNBRkFGQUYiLz4KPHBhdGggZD0iTTUxIDU4QzUzLjc2MTQgNTggNTYuMDc0MiA1NS43MDgyIDU1LjIyMTQgNTMuMDgxN0M1NS4wOTEgNTIuNjgwMiA1NC45NDQ1IDUyLjI4MzMgNTQuNzgyMSA1MS44OTIxQzUzLjk3OCA0OS45NTU2IDUyLjc5OTQgNDguMTk2MSA1MS4zMTM3IDQ2LjcxNEM0OS44MjggNDUuMjMxOSA0OC4wNjQxIDQ0LjA1NjMgNDYuMTIyOSA0My4yNTQyQzQ0LjE4MTcgNDIuNDUyMSA0Mi4xMDExIDQyLjAzOTIgNDAgNDIuMDM5MkMzNy44OTg4IDQyLjAzOTIgMzUuODE4MyA0Mi40NTIxIDMzLjg3NzEgNDMuMjU0MkMzMS45MzU5IDQ0LjA1NjMgMzAuMTcyIDQ1LjIzMTkgMjguNjg2MyA0Ni43MTRDMjcuMjAwNiA0OC4xOTYxIDI2LjAyMiA0OS45NTU2IDI1LjIxNzkgNTEuODkyMUMyNS4wNTU1IDUyLjI4MzMgMjQuOTA5IDUyLjY4MDIgMjQuNzc4NiA1My4wODE3QzIzLjkyNTggNTUuNzA4MiAyNi4yMzg2IDU4IDI5IDU4TDUxIDU4WiIgZmlsbD0iI0FGQUZBRiIvPgo8L3N2Zz4K);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.my-comment-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.my-comment-contents {
  flex-grow: 1;
  background: whitesmoke;
  border: 1px solid hsl(0 0% 0% / .06);
  border-radius: 12px;
  padding: 8px 12px 8px 28px;
  margin-left: -20px;
}

.my-comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.my-comment-name {
  font-weight: bold;
}

.my-comment-date {
  opacity: .5;
}

@media (prefers-color-scheme: dark) {
  .my-comment-contents {
    background: hsl(250 12% 16%);
    border: 1px solid hsl(0 0% 100% / .1);
  }
  .my-comment-avatar-container {
    border: 4px solid hsl(250 12% 8%);
    box-shadow: 0 8px 8px -4px hsl(0 0% 0% / .9);
  }
  .my-comment-avatar-fallback {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSIjMUYyMDIzIi8+CjxwYXRoIGQ9Ik00OS40NTQ1IDMwLjA2ODZDNDkuNDU0NSAzNS4wNzcxIDQ1LjIyMTYgMzkuMTM3MyA0MCAzOS4xMzczQzM0Ljc3ODQgMzkuMTM3MyAzMC41NDU1IDM1LjA3NzEgMzAuNTQ1NSAzMC4wNjg2QzMwLjU0NTUgMjUuMDYwMiAzNC43Nzg0IDIxIDQwIDIxQzQ1LjIyMTYgMjEgNDkuNDU0NSAyNS4wNjAyIDQ5LjQ1NDUgMzAuMDY4NloiIGZpbGw9IiM0OTQ2NTkiLz4KPHBhdGggZD0iTTUxIDU4QzUzLjc2MTQgNTggNTYuMDc0MiA1NS43MDgyIDU1LjIyMTQgNTMuMDgxN0M1NS4wOTEgNTIuNjgwMiA1NC45NDQ1IDUyLjI4MzMgNTQuNzgyMSA1MS44OTIxQzUzLjk3OCA0OS45NTU2IDUyLjc5OTQgNDguMTk2MSA1MS4zMTM3IDQ2LjcxNEM0OS44MjggNDUuMjMxOSA0OC4wNjQxIDQ0LjA1NjMgNDYuMTIyOSA0My4yNTQyQzQ0LjE4MTcgNDIuNDUyMSA0Mi4xMDExIDQyLjAzOTIgNDAgNDIuMDM5MkMzNy44OTg4IDQyLjAzOTIgMzUuODE4MyA0Mi40NTIxIDMzLjg3NzEgNDMuMjU0MkMzMS45MzU5IDQ0LjA1NjMgMzAuMTcyIDQ1LjIzMTkgMjguNjg2MyA0Ni43MTRDMjcuMjAwNiA0OC4xOTYxIDI2LjAyMiA0OS45NTU2IDI1LjIxNzkgNTEuODkyMUMyNS4wNTU1IDUyLjI4MzMgMjQuOTA5IDUyLjY4MDIgMjQuNzc4NiA1My4wODE3QzIzLjkyNTggNTUuNzA4MiAyNi4yMzg2IDU4IDI5IDU4TDUxIDU4WiIgZmlsbD0iIzQ5NDY1OSIvPgo8L3N2Zz4K);
  }
}