JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div id='outer'>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
    <div id='inner'>
        <p class="teilbew">
           <span class="noumbruch">Nutzerfreundlichkeit: 
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>          
               <span class="abstright"></span></span>
           <span class="noumbruch">Einstellungsoptionen:
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>  
               <span class="abstright"></span></span>
           <span class="noumbruch">Design:
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>  
            <span class="abstright"></span></span>
           <span class="noumbruch">Innovativität: 
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>                 
               <span class="abstright"></span></span>
        </p>
    </div>
</div>
 
<!-- 

leerer Stern heißt: 

	<i class="fa fa-star-o"></i> 
	
halber Stern heißt: 

	<i class="fa fa-star-half-o"></i>

--> <!-- Dies ist eine Kommentarzeile --> 




<br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br>

<div style="margin-top: -20%;" class="pimg"><a href="#"><img...

CSS

/*Autorenbox-Design*/
.yellow {
    background-color: #ffd401;
}

#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 {
    text-align: center;
}

.border {
    margin-left: 45px;
    margin-right: 45px;
    border: solid 1px;
    border-color: #7D7D7D;
    padding: 5px 20px 5px 20px;
    text-decoration: none;
    border-radius: 5px;
    
}

.footer a.footer-item:link {
    color: #7D7D7D;
    outline: none;
}

.footer a.footer-item:hover {
    color:#fff;
    background-color: #ffd401;
    border-color: #ffd401;
    opacity: 0.8;
    -moz-transition-delay: 2s;
    -o-transition-delay:  2s;
    -webkit-transition-delay:  2s;
    transition-delay: 0.2s;
    transition: 0.35s;
    text-decoration: none;
    padding: 5px 20px 5px 20px;
    border-radius:...