JSFiddle - React, Tailwind, and code Playground

by Clear

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container">
    <i class="fa fa-html5"></i>
    <i class="fa fa-css3"></i>
    <i class="fa fa-codepen"></i>
    <i class="fa fa-frown-o"></i>
    <div class="sinonimo">vomito</div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);

body {
    background: #23141b;
    margin: 0;
}

.container {
    height: 100%;
    width:100%;
    border: 25px solid #c698bf;
    position:absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    text-align: center;
    color: #c495bf;
    text-transform: uppercase;
    padding: 0px;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

.sinonimo {
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 80px;
    height: 54px;
    width: 285px;
    position: absolute;
    line-height: 51px;
    top: 50%;
    margin-top: -27px;
    margin-left: -147px;
    left: 50%;
    font-weight: bold;
}

.sinonimo::after {
    font-family: 'Source Sans Pro', sans-serif; 
    content: '#cheminchialohannoinventatoafarel\'ipertesto?';
    font-size: 15px;
    display: block;
    font-weight: bold;
    position: absolute;
    left: -30px;
}

i:nth-of-type(1) {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 50px;
}

i:nth-of-type(2) {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 50px;
}

i:nth-of-type(3) {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 50px;
}

i:nth-of-type(4) {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 50px;
}