JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="icon kantoor"><a href="#"></a><h2>Kantoorartikelen</h2></div>
    <div class="icon machines"><a href="#"></a><h2>Kantoormachines</h2></div>
    <div class="icon facilitair"><a href="#"></a><h2>Facilitair</h2></div>
    <div class="icon meubilair"><a href="#"></a><h2>Kantoormeubilair</h2></div>
    <div class="icon relatie"><a href="#"></a><h2>Relatiegeschenken</h2></div>
    <div class="icon drukwerk"><a href="#"></a><h2>Drukwerk</h2></div>
</div>

CSS

.container{
    text-align:center;
    border:1px solid #666;
}

.icon{
    display:inline-block;
    border:1px solid #CCC;
    margin-top: 50px;
    margin-right: 2em;
    width: 150px;
}

.icon a {
    background: yellow;
    padding: 50px;
    border: 1px solid red;
    border-radius: 12px;
    border: 1px solid #3a3a3a;
}

.icon h2 {
    margin-top: 50px;
    font-size: 16px;
}

.kantoor a:hover {
    background: green;
}

.machines a:hover {
    background: lightblue;
}