I would like achieve what is shown in the image below, meant to select colors using `CSS3`.

[![image](https://i.stack.imgur.com/noBJy.png)](https://i.stack.imgur.com/noBJy.png)

The code is currently [here](https://jsfiddle.net/w252gzuy/3/).

```css
.colors {
  background: white;
  width: 80%;
  height: 10%;
  position: absolute;
  top: 60%;
  display: inline-block;
  overflow-x: scroll;
  white-space: no-wrap;
}

.select {
  float: left;
  margin: 10px;
  color: transparent;
  z-index: 22;
  background: red;
  width: 20%;
}
```

```html
<div class="colors">
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"> </div>
</div>
```

The divs I made aren't showing up. What can I do to solve this?