JSFiddle - React, Tailwind, and code Playground

HTML

<div id="langButtons">
<div class="grouping">
   <input class="btn-group langButton" id="useJavascript" value="JavaScript" type="button">
   <label for="useJavascript" class="langDescription" id="JavaScript">Javascript</label>
</div>
<div class="grouping">
   <input class="btn-group langButton" id="useRuby" value="Ruby" type="button">
     <label class="langDescription" id="Ruby">Ruby</label>
</div>
<div class="grouping">
   <input class="btn-group langButton" id="usePython" value="Python" type="button">
  <label class="langDescription" id="Python">Python</label>
</div>
<div class="grouping">
   <input class="btn-group langButton" id="useHTML" value="HTML" type="button">
  <label class="langDescription" id="HTML">HTML</label>
</div>
<div class="grouping">
   <input class="btn-group langButton" id="useCSS" value="CSS" type="button">
  <label class="langDescription" id="CSS">CSS</label>
</div>
<div class="grouping">
   <input class="btn-group langButton" id="useSwift" value="Swift" type="button">
  <label class="langDescription" id="Swift">Swift</label>
</div>
</div>

CSS

.grouping{
  display: inline-block;
  text-align: center;
}

.langDescription{
  display: block;
}