JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div id='por'>
    <a href="xxx">
        <img class="pimg" style="margin-top: -20%;" src="http://xn--bleiwsten-u9a.de/wp-content/uploads/2014/07/Porträt_michel_kreis_400x400.jpg" style="width: 120px;"/>
    </a>
    <div id='bull'>
        <a href="https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fxn--bleiwsten-u9a.de%2Fwer-wir-sind%2F%3Fpreview%3Dtrue%26preview_id%3D53%26preview_nonce%3D10ff198654&amp;screen_name=michelpenke&amp;tw_p=followbutton" target="_blank" style="outline: none;">
            <img class="bull-item" src="http://xn--bleiwsten-u9a.de/wp-content/uploads/2014/11/twitter_circle_black-512-e1417004199523.png"/><br class="abstdown"></br>
        </a>
        <a href="http://michelpenke.de" target="_blank" style="outline: none;">
            <img class="bull-item" src="http://xn--bleiwsten-u9a.de/wp-content/uploads/2015/02/e_circle_black.png"/><br class="abstdown"></br>
        </a>
         <a href="http://ulenunapen.de/" target="_blank" style="outline: none;">
             <img class="bull-item" src="http://xn--bleiwsten-u9a.de/wp-content/uploads/2015/04/Ulenunape_kreis.png"/>
        </a>
    </div>
    </div>

only screen and (max-device-width: 480px) {.bull-item {display: none;}}

CSS

/*Link-Design*/
.link {
    outline: 0px #fff;
}



/*Autorenbox-Design*/

#por{
    text-align: center;
}

#bull{
    opacity:0;
    transition: opacity 0.3s;
    transition-delay: 0.3s;
    -webkit-transition-delay: 1.5s;
    -ms-transition-delay: 1.5s; 
    -o-transition: 0.3s all;   
    -o-transition-delay: 1.5s; 
    transition: 0.3s all;   
    transition-delay: 1.5s;
    margin-top: 30px;
    margin-bottom: 15px;
}

.bull-item {
    width: 50px;
}



.abstdown {
    margin-bottom: -10px;
}

#por:hover #bull{
    opacity:1;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    -transition-delay: 0s;
}

#por:focus #bull{
    opacity:1;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    -transition-delay: 0s;
}

#outer:focus #inner{
    opacity:1;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    -transition-delay: 0s;
}

#aname {
    float: left;
    margin-bottom: 130px;
    top: 50%; 
    text-align: right;
    font-weight: bold;
    background-color: #ffd401;
    padding: 50px 10px 50px 10px;
    width: 100%;
}

#pimg {
    float: left;
}

#quote {
    float: left;
    top: 50%; 
    text-align: left;
    background-color: #ffd401;
    padding: 35px 10px 35px 10px;
    width: 100%;
    margin-bottom: 120px;
}

/*Bewertungsbox :hover*/

.teilbew {
    line-height: 1.6em;
}

.abstright {
    margin-right: 15px;
}

.noumbruch {
    white-space: nowrap; 
    margin: 0 auto;
    font-weight: bold;
}

#outer{
    text-align: center;
}

#inner{
    opacity:0;
    transition: opacity 0.15s;
    transition-delay: 0.15s;
    -webkit-transition-delay: 3s;
    -ms-transition-delay: 3s; 
    -o-transition: .15s all;   
    -o-transition-delay: 3s; 
    transition: .15s all;   
    transition-delay: 3s;
    margin-top: 30px;
    margin-bottom:...