JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<table id="bp">
  <tr>
    <td style="color: red">CBD Business Plan</td>
    <td colspan='6' class="cyan" style="text-align: center">Terminals Vision 2020</td>
  </tr>
  <tr>
    <td>k€</td>
    <td colspan='6'></td>
  </tr>
  <tr>
    <td></td>
    <td colspan="6"><br/></td>

  </tr>
  <tr id="header">
    <td width="250px">annee</td>
    <td class="right" width="90px">2019</td>
    <td class="right" width="90px">2020</td>
    <td class="right" width="90px">2021</td>
    <td class="right" width="90px">2022</td>
    <td class="right" width="90px">2023</td>
    <td class="right" width="90px">Total</td>
  </tr>
  <tr>
    <td>Total Revenue</td>
    <td><input id="edited" type="text" value=5500.0/></td>
    <td><input id="edited" type="text" value=31000.0/></td>
    <td><input id="edited" type="text" value=62700.0/></td>
    <td><input id="edited" type="text" value=92400.0/></td>
    <td><input id="edited" type="text" value=111700.0/></td>
    <td><input id="calc" type="text" value=303300/></td>
    <td class="left_boarder"><input id="calc" type="text" /></td>
  </tr>
  <tr>
    <td>Product Revenue</td>
    <td><input id="edited" type="text" value=5500.0/></td>
    <td><input id="edited" type="text" value=31000.0/></td>
    <td><input id="edited" type="text" value=62700.0/></td>
    <td><input id="edited" type="text" value=92300.0/></td>
    <td><input id="edited" type="text" value=111600.0/></td>
    <td><input id="calc" type="text" value=303100/></td>
    <td class="left_boarder"><input id="calc" type="text" /></td>
  </tr>
  <tr>
    <td>Services Revenue</td>
    <td><input id="edited" type="text" value=0.0/></td>
    <td><input id="edited" type="text" value=0.0/></td>
    <td><input id="edited" type="text" value=0.0/></td>
    <td><input id="edited" type="text" value=100.0/></td>
    <td><input id="edited" type="text" value=100.0/></td>
    <td><input id="calc" type="text" value=200/></td>
    <td class="left_boarder"><input id="calc" type="text" /></td>
 ...

CSS

input#edited, input#calc {
    width: 90px;
    text-align: right;
    border: 0;
}

tr.bold td input[type=text]{
    font-weight: bold;
}

tr.italic td input[type=text]{
    font-style: italic;
}

tr.cyan td input[type=text]{
    background-color: #DBEEF4;
}

td.left_boarder{
    border-left: 1px solid black;
}

.cyan {
    background-color: #DBEEF4;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.right {
    text-align: right;
}

#bp td:first-child {
    border-right: 1px black solid;
}

#header td {
    border-bottom: 1px black solid !important;
}