JSFiddle - React, Tailwind, and code Playground

by stovberpv

HTML

<div class='level'>
  <div class='level__title'>
    <button type='button'>-</button>
    <input class='level__input' type="text" placeholder='survey'>
  </div>
  <div class='level__data'>
    
    <div class='level'>
      <div class='level__title'>
        <button type='button'>-</button>
        <input class='level__input' type="text" placeholder='question'>
      </div>
      <div class='level__data'>
      
        <div class='level'>
            <input class='level__input' type="text" placeholder='answer'>
            <button class='button' data-control='add'>+</button>
        </div>
      
      </div>
      <div class='level__control'>
        <button class='button' data-control='add'>+</button>
      </div>
    </div>
    
  </div>
</div>

CSS

.level {
  margin: 20px 0;
  box-sizing: border-box;
}

.level__title {
  /* width: 200px; */
}

.level__data {
  padding-left: 20px;
  box-sizing: border-box;
  border-left: 1px dashed rgba(0, 0, 0, 0.1);
}

.level__input {
  /* display: block; */
  /* width: 200px; */
  padding: 10px;
  margin: 10px 0;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
}

.level__control {
  /* width: 200px; */
}

.level__control .button {
  /* display: block; */
  /* width: 200px; */
  padding: 10px;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
}