JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></script>
<div class="container">
  <br>
  <div class="alert alert-info">alabala</div>
  <fieldset>
    <legend>Group 1</legend>
  <ul class="list-unstyled">
    <li class="col-xs-6 col-sm-4 col-md-3"><span><i class="fas fa-check fa-square-alt"></i></span> Mandatory 1</li>
    <li class="col-xs-6 col-sm-4 col-md-3"><span><i class="fas fa-check fa-square-alt"></i></span> Mandatory 2</li>
    <li class="col-xs-6 col-sm-4 col-md-3"><span><i class="fas fa-check fa-square-alt"></i></span> Mandatory 3</li>
    <li class="col-xs-6 col-sm-4 col-md-3"><span><i class="fas fa-check fa-square-alt"></i></span> Mandatory 4</li>
    <li class="col-xs-6 col-sm-4 col-md-3"><span><i class="fas fa-check fa-square-alt"></i></span> Mandatory 5</li>
    <li class="col-xs-6 col-sm-4 col-md-3"><span><i class="fas fa-check fa-square-alt"></i></span> Mandatory 6</li>
    <li class="col-xs-6 col-sm-4 col-md-3"><span><i class="fas fa-check fa-square-alt"></i></span> Mandatory 7</li>
    <li class="col-xs-6 col-sm-4 col-md-3"><span><i class="fas fa-check fa-square-alt"></i></span> Mandatory 8</li>
  </ul>
  </fieldset>
  <fieldset>
    <legend>Group 2</legend>
  <ul class="list-unstyled">
    <li class="col-md-6 odd"><label><input type="checkbox"> Dumby Content</label></li>
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 even">Dumby Content</li>
    <li class="col-md-6 even">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
  </ul>
  </fieldset>
</div>