JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div id='por'>
    <img src="http://xn--bleiwsten-u9a.de/wp-content/uploads/2015/07/Silk-Logo.png" style="width: 120px;"/>
    <div id='bull'>
        <a href="xxx"><img src="http://xn--bleiwsten-u9a.de/wp-content/uploads/2014/11/twitter_circle_black-512-e1417004199523.png" style="width: 50px;"/></a>
         <a href="xxx"><img src="http://xn--bleiwsten-u9a.de/wp-content/uploads/2015/02/e_circle_black.png" style="width: 50px;"/></a>
         <a href="xxx"><img src="http://xn--bleiwsten-u9a.de/wp-content/uploads/2015/04/Ulenunape_kreis.png" style="width: 50px;"/></a>
    </div>
    </div>

CSS

/*Autorenbox-Design*/

#por{
    text-align: center;
}

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

#por:hover #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%;
}

/*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;
    -ms-transition-delay: 3s; 
    -o-transition: .15s all;   
    -o-transition-delay: 3s; 
    transition: .15s all;   
    transition-delay: 3s;
    margin-top: 30px;
    margin-bottom: 15px;
}

#outer:hover #inner{
    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;
}

/*Footer Design*/
.footer {
   ...