JSFiddle - React, Tailwind, and code Playground
HTML
<div id="feedback-score" className="flex grid grid-cols-6 gap-10 mt-10 mb-32">
<div>
<label for="one" onClick={() => setFeedbackSelect(1) } >
<img src={ FeedBackIcon1 } className={`feedback-icon ${feedbackSelect === 1 ? 'is-checked' : null}`} alt="icon" />
</label>
<input type="radio" id="one" name="feedback-score" value="Bummer" defaultChecked={ feedbackSelect === 1 } />
<div className={`feedback-tip rounded-lg w-10 ${feedbackSelect === 1 ? 'is-checked' : 'hidden'}`} >Bummer</div>
</div>
<div>
<label for="two" onClick={() => setFeedbackSelect(2) }>
<img src={ FeedBackIcon2 } className={`feedback-icon ${feedbackSelect === 2 ? 'is-checked' : null}`} alt="icon" />
</label>
<input type="radio" id="two" name="feedback-score" value="Needs Improvement" defaultChecked={ feedbackSelect === 2 } />
<div className={`feedback-tip rounded-lg w-10 ${feedbackSelect === 2 ? 'is-checked' : 'hidden'}`} >Needs Improvement</div>
</div>
<div>
<label for="three" onClick={() => setFeedbackSelect(3) }>
<img src={ FeedBackIcon3 } className={`feedback-icon ${feedbackSelect === 3 ? 'is-checked' : null}`} alt="icon" />
</label>
<input type="radio" id="three" name="feedback-score" value="Meh" defaultChecked={ feedbackSelect === 3 } />
<div className={`feedback-tip rounded-lg w-10 ${feedbackSelect === 3 ? 'is-checked'...