JSFiddle - React, Tailwind, and code Playground

by Davri

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>N</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="navbar">
      <ul class="navbar-text">
        <li><img src="pfp https://cdn.discordapp.com/avatars/778307445154906132/a_144980f8119c83633363ba7e63898879.gif?size=4096" alt="pfp" class="navbar-pfp" /></li>
        <li class="navbar-icons"><img src="https://cdn.discordapp.com/attachments/921822256563388478/1007983010303463454/home.png" /></li>
        <a href="about.html">
          <li class="navbar-icons"><img src="https://cdn.discordapp.com/attachments/921822256563388478/1007983009879830609/about.png" /></li
        ></a>
      </ul>
    </div>
  </body>
</html>

CSS

html {
    background-color: #1A1A1D;
    font-family: Poppins, sans-serif;
}

body {
    margin-top: 0%;
    margin-left: 0%;
}

.navbar-text {
    color: white;
    margin: 0;
    padding: 0;
    font-size: cover;
    
}
.navbar {
    padding-top: 35px;
    position: fixed;
    height: 100%;
    width: 50px;
    background: #272727;
}
.navbar-icons {
    position: relative;
    top: 177px;
    padding-top: 27px;
    margin-left: 9px;
    font-size: 1rem;
}

.navbar-icons > img:hover {
  /* Setting a filter to tint it light blue */
  filter: invert(53%) sepia(96%) saturate(1601%) hue-rotate(155deg) brightness(86%) contrast(101%);
  
  /* Optional: Easing the Animation a little bit (Produces a small bug where you can see it fading over green) */
}

.navbar-pfp {
    border-radius: 50%;
    margin-left: 8px;
    position: relative;
    bottom: 20px;
}