JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <table id='blokken'>
        <tr>
            <td> <p id='kill'> nano </p>

            </td>
            <td> <a href='#'><p>placeholder 2</p></a>

            </td>
            <td> <a href='#'><p>placeholder 3</p></a>

            </td>
        </tr>
        <tr>
            <td> <a href='#'><p>placeholder 4</p></a>

            </td>
            <td> <a href='#'><p>placeholder 5</p></a>

            </td>
            <td> <a href='#'><p>placeholder 6</p></a>

            </td>
        </tr>
    </table>
</div>

CSS

body {
    margin: 0;
}
#wrapper {
    width: 980px;
    margin: 0 auto;
    padding-bottom: 50px;
}
/* Header */
 header > img {
}
header > span {
    position: relative;
    display: inline;
    top: 200px;
    left: 150;
    width: 200px;
    height: 100px;
}
header > a {
    /*opacity: 0;
    filter: alpha(opacity=0); */
}
/* Blokken */
 #blokken {
    padding-left: 100px;
}
#blokken a {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
#blokken a {
    background-image: url(http://file.itiny.nl/blocks/img/placeholder.jpg);
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    display: block;
    text-align: center;
}
#kill  {
    background-image: url(http://survivability.fi/w/header.png);
    background-repeat: no-repeat;
}

#blokken p {
    display: inline-block;
    margin-top: 43%;
    font-weight: bold;
    font-size: 24px;
}
#blokken a:hover {
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
}