<div>
  <h2>Default grayscale</h2>
  <div class="container">
    <div class="checkbox">
      <label>
        <input type="checkbox"><span class="checkbox-material"><span class="check"></span></span> Food
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" checked><span class="checkbox-material"><span class="check"></span></span> Beauty
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"><span class="checkbox-material"><span class="check"></span></span> Experiences
      </label>
    </div>
  </div>
  <h2>Coloured alternative</h2>
  <div class="container coloured">
    <div class="checkbox">
      <label>
        <input type="checkbox"><span class="checkbox-material"><span class="check"></span></span> Food
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" checked><span class="checkbox-material"><span class="check"></span></span> Beauty
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"><span class="checkbox-material"><span class="check"></span></span> Experiences
      </label>
    </div>
  </div>
</div>