JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<table>
    <tr>
        <td class="x-grid-cell" style="width:35px;">
            <div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-action-col" style="text-align:left;">
                <img role="button" alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-grid-notecolumn x-grid-notecolumn-unchecked">
            </div>
        </td>
    </tr>
</table>

CSS

.x-grid-notecolumn {
  width: 16px;
  height: 16px;
}
.x-grid-notecolumn-general,
.x-grid-notecolumn-checked,
.x-grid-notecolumn-unchecked {
  background: none;
  content: '';
}
.x-grid-notecolumn-general::before,
.x-grid-notecolumn-checked::before,
.x-grid-notecolumn-unchecked::before {
  font-family: FontAwesome;
  content: '\f249';
  font-size: 14px;
  line-height: 21px;
  font-weight: normal;
  font-style: normal;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  color: #f3f1f1;
  position: relative;
  left: 3px;
}
.x-grid-notecolumn-general::after,
.x-grid-notecolumn-checked::after,
.x-grid-notecolumn-unchecked::after {
  font-family: FontAwesome;
  font-size: 9px;
  font-weight: normal;
  font-style: normal;
  position: relative;
  color: rgba(85, 85, 85, 0.8);
}
.x-grid-notecolumn-general::before,
.x-grid-notecolumn-checked::before {
  color: #FFFFA5;
  font-family: FontAwesome;
}
.x-grid-notecolumn-unchecked::after {
  content: '\f040';
  font-family: FontAwesome;
  top: -3px;
  left: -7px;
}
.x-grid-notecolumn-checked::after {
  content: '\f0c9';
  font-family: FontAwesome;
  font-size: 6px;
  top: -4px;
  left: -6px;
  color: rgba(85, 85, 85, 0.8);
}