JSFiddle - React, Tailwind, and code Playground

by kapilgopinath

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>
click me
</button>
<div class="container">
  
</div>
<div id="isScrolling">
  <span>Is scrolling</span>
</div>

CSS

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
.tabl {
  overflow-x: scroll;
  width: 700px;
}
#isScrolling span { display: none }

JavaScript

let html = 
`<div id="tabl" class="tabl">
<table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
      <th>State</th>
      <th>Country1</th>
      <th>State1</th>
    </tr>
    <tr>
      <td><input value="Alfreds Futterkiste"/></td>
      <td><input value="Maria Anders"/></td>
      <td><input value="Germany"/></td>
      <td><input value="Germany"/></td>
       <td><input value="Germany"/></td>
      <td><input value="Germany"/></td>
    </tr>
    <tr>
      <td><input value="Centro comercial Moctezuma"/></td>
      <td><input value="Francisco Chang"/></td>
      <td><input value="Mexico"/></td>
      <td><input value="Germany"/></td>
       <td><input value="Germany"/></td>
      <td><input value="Germany"/></td>
    </tr>
    <tr>
      <td><input value="Ernst Handel"/></td>
      <td><input value="Roland Mendel"/></td>
      <td><input value="Austria"/></td>
      <td><input value="Germany"/></td>
       <td><input value="Germany"/></td>
      <td><input value="Germany"/></td>
    </tr>
    <tr>
      <td><input value="Island Trading"/></td>
      <td><input value="Helen Bennett"/></td>
      <td><input value="UK"/></td>
      <td><input value="Germany"/></td>
       <td><input value="Germany"/></td>
      <td><input value="Germany"/></td>
    </tr>
    <tr>
      <td><input value="Laughing Bacchus Winecellars"/></td>
      <td><input value="Yoshi Tannamuri"/></td>
      <td><input value="Canada"/></td>
      <td><input value="Germany"/></td>
       <td><input value="Germany"/></td>
      <td><input value="Germany"/></td>
    </tr>
    <tr>
      <td><input value="Magazzini Alimentari Riuniti"/></td>
      <td><input value="Giovanni Rovelli"/></td>
      <td><input value="Italy"/></td>
      <td><input value="Germany"/></td>
       <td><input value="Germany"/></td>
      <td><input value="Germany"/></td>
    </tr>
  </table>
  </div>`
  $('button').click(()=> {
  	$('.container').append(html)
  })
/*...