JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<div class="NestedSelect">
    <label><input type="radio" name="MySelectInputName" /> <span>Fruit</span></label>
    <div>
        <label><input type="radio" name="MySelectInputName" /> <span>Apple</span></label>
        <label><input type="radio" name="MySelectInputName" /> <span>Banana</span></label>
        <label><input type="radio" name="MySelectInputName" /> <span>Orange</span></label>
    </div>
    <label><input type="radio" name="MySelectInputName" /> <span>Drink</span></label>
    <div>
        <label><input type="radio" name="MySelectInputName" /><span>Water</span></label>
        <label><input type="radio" name="MySelectInputName" /><span>Soft</span></label>
        <div>
            <label><input type="radio" name="MySelectInputName" /><span>Cola</span></label>
            <label><input type="radio" name="MySelectInputName" /><span>Soda</span></label>
            <label><input type="radio" name="MySelectInputName" /><span>Lemonade</span></label>
        </div>
        <label><input type="radio" name="MySelectInputName" /><span>Hard</span></label>
        <div>
            <label><input type="radio" name="MySelectInputName" /><span>Bear</span></label>
            <label><input type="radio" name="MySelectInputName" /><span>Whisky</span></label>
            <label><input type="radio" name="MySelectInputName" /><span>Vodka</span></label>
            <label><input type="radio" name="MySelectInputName" /><span>Gin</span></label>
        </div>
    </div>
</div>

CSS

.NestedSelect {
      display: inline-block;
      height: 100px;
      border: 1px Black solid;
      overflow-y: scroll;
  }

  .NestedSelect label {
      display: block;
      cursor: pointer;
  }

  .NestedSelect label:hover {
      background-color: #0092ff;
      color: White;
  }

  .NestedSelect input[type="radio"] {
      display: none;
  }

  .NestedSelect input[type="radio"]+span {
      display: block;
      padding-left: 0px;
      padding-right: 5px;
  }

  .NestedSelect input[type="radio"]:checked+span {
      background-color: Black;
      color: White;
  }

  .NestedSelect div {
      margin-left: 15px;
      border-left: 1px Black solid;
  }

  .NestedSelect label>span:before {
      content: '- ';
  }