JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="step-list">
  <li>
    <label class="checkbox-container">
      <span class="lbl">33' Lot Collection</span>
      <input type="checkbox" id="type" value="7">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">36' Lot Collection</span>
      <input type="checkbox" id="type" value="8">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">40' Lot Collection</span>
      <input type="checkbox" id="type" value="11">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">46' Lot Collection</span>
      <input type="checkbox" id="type" value="17">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">50' Lot Collection</span>
      <input type="checkbox" id="type" value="18">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">Back To Back</span>
      <input type="checkbox" id="type" value="14">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">Semi Collection</span>
      <input type="checkbox" id="type" value="13">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">Towns 2 Storey</span>
      <input type="checkbox" id="type" value="9">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">Towns 3 Storey</span>
      <input type="checkbox" id="type" value="15">
      <span class="checkmark"></span>
    </label>
  </li>
</ul>

CSS

ul.step-list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin:0 auto;
        width:66%;
        background:red;
    }

    ul.step-list li {
        flex: 0 0 33.333333%;
        text-align: left;
    }
    
    /* The container */
    .checkbox-container {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        /* Hide the browser's default checkbox */
        .checkbox-container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }

    /* On mouse-over, add a grey background color */
    .checkbox-container:hover input ~ .checkmark {
        background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    .checkbox-container input:checked ~ .checkmark {
        background-color: #1f355e;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .checkbox-container input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */
    .checkbox-container .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }