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>
<div 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>
<div id="isScrolling">
 ...

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

$('.tabl').scroll(()=> {
		$('#isScrolling span').css( "display", "inline" ).fadeOut( "slow" );
})