JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="just-padding">

  <div class="list-group list-group-root">

    <a href="#item-1" class="list-group-item list-group-item-action" data-toggle="collapse">
      <i class="fa fa-caret-right"></i>Item 1
    </a>
    <div class="list-group collapse" id="item-1">

      <a href="#item-1-1" class="list-group-item list-group-item-action" data-toggle="collapse">
        <i class="fa fa-caret-right"></i>Item 1.1
      </a>
      <div class="list-group collapse" id="item-1-1">
        <a href="#" class="list-group-item list-group-item-action">Item 1.1.1</a>
        <a href="#" class="list-group-item list-group-item-action">Item 1.1.2</a>
      </div>

    </div> 
  </div>
  
</div>

CSS

.just-padding {
    padding: 15px;
}

.list-group.list-group-root {
    padding: 0;
    overflow: hidden;
}

.list-group.list-group-root .list-group {
    margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
    border-radius: 0;
    border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
    border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
    padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
    padding-left: 45px;
}

.list-group-item .fa {
    margin-right: 5px;
}

.collapse {
  display: none;
  &.show {
    display: block;
  }
}

JavaScript

$(function() {
        
  $('.list-group-item').on('click', function() {
    $('.fa', this)
      .toggleClass('fa-caret-right')
      .toggleClass('fa-caret-down');
  });

});