JSFiddle - React, Tailwind, and code Playground

HTML

<div class="r-form">
<div>
<div class="thumbs">
<label name="thumbs">Would you recommend this host?</label>
<input type="radio" id="thumbs" name="thumbs" value="yes">
<img class="thumb_r" src="/imgs/thumbs-up-green.png">
<input type="radio" id="thumbs" name="thumbs" value="no">
<img class="thumb_r" src="/imgs/thumbs-down-red.png">
</div>
<div class="star-chart">
<table>
<tr id="features">
<td><lable name="features">Features</lable></td>
                                
<td class="star-row"><input type="radio" id="features" name="features" value="1">
<img class="star star-1" src="/imgs/star-grey-empty.png">
                                    
<input type="radio" id="features" name="features" value="2">
<img class="star star-2" src="/imgs/star-grey-empty.png">
                                    
<input type="radio" id="features" name="features" value="3">
<img class="star star-3" src="/imgs/star-grey-empty.png">
                                    
<input type="radio" id="features" name="features" value="4">
<img class="star star-4" src="/imgs/star-grey-empty.png">
                                    
<input type="radio" id="features" name="features" value="5">
<img class="star star-5" src="/imgs/star-grey-empty.png">
</td>
</tr>  
<tr id="security">
<td><lable name="security">Security</lable></td>
                                
<td class="star-row">
<input type="radio" id="security" name="security" value="1">
<img class="star star-1" src="/imgs/star-grey-empty.png">
                                    
<input type="radio" id="security" name="security" value="2">
<img class="star star-2" src="/imgs/star-grey-empty.png">
                                    
<input type="radio" id="security" name="security" value="3">
<img class="star star-3" src="/imgs/star-grey-empty.png">
                                    
<input type="radio" id="security" name="security" value="4">
<img class="star star-4" src="/imgs/star-grey-empty.png">
                                   ...

CSS

.r-form {
    width: 100%;
    padding: 10px;
    border: 1px solid grey;
}

.r-form table img {
    display: inline-block;
}

.r-form lable,
.r-form input[type="text"],
.r-form .radio,
.r-form textarea {
    color: #7b7b7b;
}

.r-form lable {
    margin: 10px 15px 10px 0px;
}

.r-form input[type="text"]{
    width: 250px;
    margin: 20px;
    padding: 7px;
    border-radius: 7px;
    border: 1px solid #bbb;
    box-shadow:inset 2px 2px 2px #bbb;
    font-style: italic;
}

.r-form input[type="radio"] {
    margin: 0px 3px;
    width: 20px;
    height: 20px;
    vertical-align: bottom;
    position: relative;
    top: 2px
}

.r-form .star-chart input[type="radio"] {
    display: none;
    width: 10px;
    height: 10px;
}

.r-form textarea {
    width: 80%;
    font-size: 1em;
    padding: 7px;
    text-align: left;
    margin: 10px 0px;
}

.r-form textarea[placeholder] {
    color: #aaa;
}

.r-form table {
    border: 1px solid grey;
    color: #7b7b7b;
    margin: 25px 0px 10px;
    width: 45%
}


.r-form .thumbs {
    border: 1px solid grey;
    width: 45%;
    display: inline-block;
    float: right;
    margin: 0px 5% 0px 0%;
}

.r-form .thumbs lable {
    display: block;
}

.r-form .thumbs input[type="radio"] {
    display: none;
    margin: 0px;
    padding: 0px;
}

.r-form .thumbs img {
    
    width: 80px;
    height: 80px;
    opacity: .3;
    margin: 10px 5%;
    
}

.r-form .thumbs img:hover {
    opacity: 1;
}

.r-form .thumbs img.checked {
    opacity: 1;
}

.r-form input[type="submit"] {
    float: right;
    padding: 5px;
    font-size: 1em;
    width: 190px;
}