style.css

body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg,#13F1FC,#0470DC);
}
h1{
  background: #959595;
  background: linear-gradient(to right, #959595 0%, #0D0D0D 46%, #010101 50%, #0A0A0A 53%, #4E4E4E 76%, #383838 87%, #1B1B1B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.container {
  display: flex;
  position: relative;
}
.key{
  border: 1px solid black;
  align-content: end;
  text-align: center;
  user-select: none;
  cursor: pointer;
}
.white-key{
  width: 50px;
  height: 200px;
  background-color: white;
}
.black-key{
  height: 100px;
   width: 25px;
  background-color:black;
  color:white;
  position: absolute;
  font-size: 0.8em;
}
[data-note='C#4']{    left: 40px;}
[data-note='D#4']{    left: 92px;}
[data-note='F#4']{    left: 192px;}
[data-note='G#4']{    left: 250px;}
[data-note='A#4']{    left: 300px;}