JSFiddle - React, Tailwind, and code Playground

by evgkch

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://use.edgefonts.net/lato:n1,n4:default;arimo:n4:default.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<div class="multiTable"> 
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Part Number</th>
        <th>Qty</th>
        <th>Corrected ID</th>
        <th>Best Price</th>
        <th>Average Price</th>
        <th>SUM</th>
        <th>Weight</th>
        <th>In Stock</th>
        <th>Lead Time</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="index1">1</td>
        <td id="part1">
          <input type="text" class="part" style='text-transform:uppercase' />
        </td>
        <td id="qty1">
          <input type="number" value="1" min="1" max="1000000" step="1" class="qty" />
        </td>
        <td class="corPart" id="corPart1">MAX232IDW
          <br><span class="manuf" id="manuf1">Texas Instruments</span></td>
        <td class="bPrice">$<span id="bPrice1">1.050</span>
          <br><span class="distr" id="distr1">Mouser</span></td>
        <td id="aPrice1">$<span>1.200</span></td>
        <td id="sum1">$<span>1.050</span></td>
        <td>0.002 g</td>
        <td id="stock1">
          <div>
            <link rel="shortcut icon" href="file:///Users/EvgKch/Documents/icons/fi-check.png" type="image/png">
          </div>
        </td>
        <td id="lt1">3-4</td>
      </tr>
      <tr>
        <td id="index1">1</td>
        <td id="part1">
          <input type="text" class="part" style='text-transform:uppercase' />
        </td>
        <td id="qty1">
          <input type="number" value="1" min="1" max="1000000" step="1" class="qty" />
        </td>
        <td class="corPart" id="corPart1">MAX232IDW
          <br><span...

CSS

body {
  font-family: 'Lato';
  color: #434343;
}
.multiTable .table thead tr{
  height: 50px;
  background-color: #f3f3f3;
  color: #6aa84f;
}
.multiTable .table tr th{
  vertical-align: middle;
  text-align: center;
  font-weight: 400;
  border-bottom: 3px solid #d9d9d9;
}
.multiTable .table tr th:nth-child(2) {
  border-right: 1px solid #f3f3f3;
}

.multiTable .table tr td {
  vertical-align: middle;
  border-bottom: 1px solid #f3f3f3;
}
.multiTable .table td:first-child {
  font-size: small;
  color: #B2B2B2;
  text-align: center;
}
.multiTable .table td:nth-child(2){
  border-right: 1px solid white;
}
.multiTable input.qty,
.multiTable input.part {
  width: 100%;
  height: 35px;
  transition: 0.5s;
  border: 1px solid #d9d9d9;
  -moz-appearance: textfield;
  padding: 5px;
}

.multiTable input.qty {
  text-align: center;
  min-width: 67px;
}
.multiTable input.part {
  min-width: 134px;
}

.multiTable input.qty::-webkit-inner-spin-button,
.multiTable input.part::-webkit-inner-spin-button {
  display: none;
}

.multiTable input.qty:focus,
.multiTable input.part:focus {
  background-color: #3D576F;
  outline: none;
  border-color: #3D576F;
  color: #f3f3f3;
}

.multiTable .corPart,
.multiTable .bPrice {
  text-align: left;
}

.multiTable .bPrice {
  color: #3D576F;
  font-weight: bold;
}

.multiTable .manuf,
.multiTable .distr,
.multiTable .fromDistr {
  font-size: small;
  color: #B2B2B2;
  font-weight: normal;
}

.multiTable td div {
  height: 35px;
  width: 33px;
  background-color: #93c47d;
}