JSFiddle - React, Tailwind, and code Playground

by evilReiko

HTML

<div class="buttonListContainer" style="overflow:auto;margin-top:0;">
  <table id="buttonList" class="buttonlistcontext" style="/*visibility:hidden;*/">
    <tr><td>
        <font size="2">Eventcount</font>: <input type="text" id="EventCount" style="width:40px;text-align:center;" disabled></td><td><button style="cursor:pointer" onclick="reset()"><font size="2">Reset</font></button></td><td><input type="image" id="btn01" style="height:15px;width:15px;" src="images/play_first.png" onclick="jump_firstFrame();" />

        <!-- the play back button -->
        <input type="image" id="btn02" style="height:15px;width:15px;" src="images/play_back2.png" onclick="playBack();" />

        <!-- the go back button -->
        <input type="image" id="btn03" style="height:15px;width:15px;" src="images/play_back.png" onclick="go_back();" />

        <!-- the stop button -->
        <input type="image" id="btn07" style="height:15px;width:15px;" src="images/stop.png" onclick="animationFlag = 0; cancelAnimationFrame(myAnimation);" />

        <!-- the go forward button -->
        <input type="image" id="btn04" style="height:15px;width:15px;" src="images/play_fwd.png" onclick="go_forward();" />

        <!-- the play forward button -->
        <input type="image" id="btn05" style="height:15px;width:15px;" src="images/play_forward2.png" onclick="play();" />

        <!-- the jump to last button -->
        <input type="image" id="btn06" style="height:15px;width:15px;" src="images/play_last.png" onclick="jump_lastFrame();" /></td><td>
        <font size="2">Speed</font>: x<select name="PlaySpeed" id="PlaySpeed" onchange="Speed(this.value);">
                    <option value= "1">1</option>
                    <option value= "5">5</option>
                    <option value= "10" selected="selected">10</option>
                    <option value= "50">50</option>
                    <option value= "100">100</option>
                    <option value= "200">200</option>

              ...

CSS

.buttonListContainer {
  position: fixed;
  top: 8.2%;
}

.buttonlistcontext {
  position: fixed;
  border: 0.1px solid #ddd;
  margin-top: 1px;
  background-color: transparent;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
}

@media (max-width: 900px) {
    table {
        display: block;
    }
    tr {
        display: block;
    }
    td {
        display: inline-block;
        width: 33%;/* 25% = 4 columns, 33% = 3 columns, 50% = 2 columns */
        box-sizing: border-box;
    }
}