JSFiddle - React, Tailwind, and code Playground

by hieuns

HTML

<div class="chkbxs-group-flex">
  <div class="chkbxs-flex">
    <input type="checkbox"/><span>Option #1</span>
  </div>
  <div class="chkbxs-flex">
    <input type="checkbox"/><span>Option #2</span>
  </div>
  <div class="chkbxs-flex">
    <input type="checkbox"/><span>Option #3</span>
  </div>
</div>

CSS

.chkbxs-group-flex {
  display: inline-block;
  padding: 16px 32px 16px 24px;
  background-color: #f0fff0;
  border: solid 1px lightgray;
  border-radius: 3px;
}
.chkbxs-flex {
  display: flex;
  align-items: center;
  font-size: 16px;
  padding: 0 0 4px 0;
}
.chkbxs-flex > span {
  padding-left: 6px;
}