JSFiddle - React, Tailwind, and code Playground

by Mladen Mihajlovic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
<!-- Create an avatar element and add it to the page -->
<div id="avatar-container"></div>

<script>
  function generateAvatar(emailHash) {
    // Use the email hash to generate a unique color for the avatar
    let avatarColor = "#" + emailHash.substring(0, 6);

    // Use the email hash to determine the shape of the avatar
    let avatarShape = emailHash.charCodeAt(0) % 3;

    // Create the avatar element and set its color and shape
    let avatar = document.createElement("div");
    avatar.style.backgroundColor = avatarColor;
    avatar.classList.add("avatar");
    if (avatarShape === 0) {
      avatar.classList.add("avatar-circle");
    } else if (avatarShape === 1) {
      avatar.classList.add("avatar-square");
    } else {
      avatar.classList.add("avatar-triangle");
    }

    // Return the avatar element
    return avatar;
  }

  for (var i = 0; i < 20; i++) {

    document.getElementById("avatar-container").appendChild(generateAvatar(md5(i.toString()))); // Add the avatar to the page

  }

</script>

CSS

.avatar {
  width: 100px;
  height: 100px;
}

.avatar-circle {
  border-radius: 50%;
}

.avatar-square {
  border-radius: 4px;
}


.avatar-triangle {
 width: 0; 
  height: 0; 
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  
  border-bottom: 50px solid black;
}