JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="table-body">
  <div class="table-header">
    <div class="left">&nbsp;
      <input type="checkbox" name="usun_wszystkie" id="checkbox_all" class="css-checkbox" onchange="checkAll('checkbox[')">
      <label for="checkbox_all" class="css-label">&nbsp;Zaznacz wszystkie</label>
    </div>
  </div>
  <div class="tabela_0">
    <div class="table-field1">
      <input type="checkbox" name="usun[438]" id="checkbox[438]" class="css-checkbox">
      <label for="checkbox[438]" class="css-label"></label>
      <input type="hidden" name="tag[438]" value="test.com">
    </div>
    <div class="table-field2">
      <div>USUŃ</div>
    </div>
    <div class="table-field3">
      <input type="text" name="entry" value="test.com">
    </div>
  </div>
</div>

<div class="table-end"></div>

CSS

.table-body {
  width: 100%;
  max-width: 952px;
  border-spacing: 0px;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
.table-body div {
  padding-top: 3px;
  padding-bottom: 3px;
}
.table-field1 {
  text-align: center;
  float: left;
  padding-left: 11px;
  padding-right: 11px;
}
.table-field2 {
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #8f268d;
  float: left;
  margin-top: -2px;
}
.table-field3 {
  color: #323232;
  display: inline;
  padding-left: 10px;
}
.table-field3 input {
  border: 1px solid #e4e4e4;
  width: 95%;
  max-width: 844px;
  color: #333333;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 15px;
  padding-top: 3px;
  border-radius: 7px;
  padding-left: 4px;
  behavior: url(/panel/css/pie/pie.php);
}

@media screen and (min-width: 480px) {
   .table-field3 input {
  border: 1px solid #e4e4e4;
  width: 75%;
  max-width: 844px;
  color: #333333;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 15px;
  padding-top: 3px;
  border-radius: 7px;
  padding-left: 4px;
  behavior: url(/panel/css/pie/pie.php);
}
}