JSFiddle - React, Tailwind, and code Playground

by samur3

HTML

<div class="line-item-table" role="grid" tabindex="-1" style="outline: none;">
  <div>
    <div class="line-item-table__inner">
      <div class="line-item--col line-item--head">
        <div class="line-item__data line-item__data--icon line-item__data--icon-left">
          <div></div>
        </div>
        <div class="line-item__data flex__col-1" data-label="name">
          <div class="line-item__label">name</div>
        </div>
        <div class="line-item__data line-item__data--icon line-item__data--icon-right">
          <div class="invisible" style="width: 32px;"></div>
        </div>
      </div>
      <div class="line-item--body">
        <div class="line-item__row-wrapper">
          <div class="line-item--col">
            <div class="line-item__data line-item__data--icon line-item__data--icon-left">
              <div class="line-item__drag-handle flex__row flex__middle-y" draggable="true"><svg class="svg-icon svg-icon-move" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 18 18"><g fill-rule="evenodd"><circle cx="6" cy="3" r="2"></circle><circle cx="6" cy="9" r="2"></circle><circle cx="6" cy="15" r="2"></circle><circle cx="12" cy="3" r="2"></circle><circle cx="12" cy="9" r="2"></circle><circle cx="12" cy="15" r="2"></circle></g></svg></div>
            </div>
            <div class="line-item__data flex__col-1" data-label="name">
              <div class="form-group">
                <div class="form-group__label-group"><label for="Input_Sk-MI-j8mE" class="sr-only">textArea</label></div>
                <div class="form-group__input-group"><textarea id="Input_Sk-MI-j8mE" name="textarea" rows="2" class="form-control" style="overflow-y: hidden; height: 0px;"></textarea></div>
              </div>
            </div>
            <div class="line-item__data flex__col-1">
              <div class="form-group">
                <div class="form-group__label-group"><label for="Input_ByzfIWiIQE"...