JSFiddle - React, Tailwind, and code Playground

HTML

<p style="margin-bottom: 10px">Colour <strong>Black</strong></p>
<div class="attribute-block">
  <a href="">
    <div class="attribute-colour-hover-border-selected">
      <div class="attribute-colour-selected" style="background: #000000"></div>
    </div>
  </a>
  <a href="">
    <div class="attribute-colour-hover-border">
      <div class="attribute-colour" style="background: #ad2b50"></div>
    </div>
  </a>
  <a href="">
    <div class="attribute-colour-hover-border">
      <div class="attribute-colour" style="background: #406872"></div>
    </div>
  </a>
  <a href="">
    <div class="attribute-colour-hover-border">
      <div class="attribute-colour" style="background: #3a5127"></div>
    </div>
  </a>
</div>

CSS

.attribute-block {
    margin-bottom: 30px;
}

.attribute-block a {
  text-decoration: none;
}
.attribute-colour {
    width: 40px;
    height: 40px;
    display: inline-block;
        text-decoration: none;
}
.attribute-colour:hover, .attribute-colour-selected {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 32px;
    height: 33px;
}
.attribute-colour-hover-border {
    position: relative;
    display: inline-block;
    border: 0;
    width: 40px;
    height: 40px;
}
.attribute-colour-hover-border:hover, .attribute-colour-hover-border-selected {
    position: relative;
    border: 1px solid black;
    width: 40px;
    height: 40px;
    display: inline-block;
}