JSFiddle - React, Tailwind, and code Playground

by D7460N

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container mt-3">
  <div class="list-group">
    <label for="customCheck01" class="list-group-item list-group-item-action d-flex custom-control custom-checkbox pl-5 pr-4 py-3">
        <input type="checkbox" class="custom-control-input" id="customCheck01">
        <span class="custom-control-label flex-fill">List group item 01 with checkbox, label and count</span>
        <span class="">[ 7 ]</span>
    </label>
    <label for="customCheck02" class="list-group-item list-group-item-action d-flex custom-control custom-checkbox pl-5 pr-4 py-3">
        <input type="checkbox" class="custom-control-input" id="customCheck02">
        <span class="custom-control-label flex-fill">List group item 02 with checkbox, label and count</span>
        <span class="">[ 13 ]</span>
    </label>
    <label for="customCheck03" class="list-group-item list-group-item-action d-flex custom-control custom-checkbox pl-5 pr-4 py-3">
        <input type="checkbox" class="custom-control-input" id="customCheck03">
        <span class="custom-control-label flex-fill">List group item 03 with checkbox, label and count</span>
        <span class="">[ 5 ]</span>
    </label>
    <label for="customCheck04" class="list-group-item list-group-item-action d-flex custom-control custom-checkbox pl-5 pr-4 py-3">
        <input type="checkbox" class="custom-control-input" id="customCheck04">
        <span class="custom-control-label flex-fill">List group item 04 with checkbox, label and count</span>
        <span class="">[ 36 ]</span>
...