styles.css

.container {
  position:relative;
  width:400px;
}

.avatar {
  display: block;
  width:315px;
  height: 285px;
  padding-left:20px;
}

.tabs {
  box-sizing: border-box;
  display: block;
  position: absolute;
  right:50px;
  top:8px;
  width:100px;
}

.tab {
  font-size:12px;
  text-align: center;
  border:1px solid transparent;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  color:#223265;
}

.selectedTab {
  background: #223265;
  color: white;
}

.tabpanes {
  box-sizing: border-box;
  display: inline-block;
  width: 400px;
}

.tabpane {
  box-sizing: border-box;
  display: none;
  width:400px;
  padding:0 10px 10px;
}

.visible {
  display:flex;
  align-items: center;
  justify-items: center;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.piece {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.piece:hover {
  background-color: #cce5ff;
  cursor: pointer;
}

.none {
  opacity: .2;
  font-size: 11px;
  position: absolute;
  top: 20px;
  left: 9px;
}

.divider {
  display: block;
  width: 100%;
  height:20px;
  padding:5px 60px;
}

.divider > div {
  height: 1px;
  background-color: #dee2e6;
}

.colorContainer {
  display:flex;
  align-items: center;
  justify-items: center;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.color {
  display: inline-block;
  height: 26px;
  width:23px;
  cursor: pointer;
}

.color[color=#FFFFFF] {
  border:1px solid #ccc;
}