JSFiddle - React, Tailwind, and code Playground

by Victor Alejandro Arroyo Castro

HTML

<table border="1" id="table">
                <tr>
                    <td align="center">27</td>
                    <td colspan="2" align="center">28</td>
                    <td colspan="2" align="center">29</td>
                    <td colspan="2" align="center">30</td>						
                </tr>				


				<td colspan="3">

					<tr >
						<td align="center" style="height:36px; background-color: blue; color:white;">31<br>32</td>
						<td align="center" nowrap style="height:36px; background-color: blue; color:white;">33</td>
						<td align="center" style="height:36px; background-color: blue; color:white;">00<br>34</td>			
					</tr>

					<tr>
						<td style="background-color: silver; color:white;">35</td>
						<td style="background-color: silver; color:white;">36</td>
						<td style="background-color: silver; color:white;">37</td>						
					</tr>

				</td>


			
				
                    <td align="center" style="height:36px; background-color: green; color:white;">38<br>39</td>
                    <td align="center" nowrap style="height:36px; background-color: green; color:white;">40</td>
                    <td align="center" style="height:36px; background-color: green; color:white;">41<br>42</td>						
            
			
                <tr>
                    <td style="background-color: red; color:white;">43</td>
                    <td style="background-color: red; color:white;">44</td>
                    <td style="background-color: red; color:white;">45</td>						
                </tr>
			
			
				
				
				<tr>
					<td colspan="6">46<br>
					47
					</td>
				</tr>
				
				<tr>
					<td colspan="4" align="center">48</td>
					<td rowspan="3" colspan="2">
					49<br>
					<br>
					<br>
					<br>
					<div style="display: inline-block;">50</div>  <div style="display: inline-block; margin-left: 70px;">51</div>
					</td>
					
				</tr>
				<tr>
					<td colspan="4">52<br><br></td>
				</tr>
				<tr>
					<td...

CSS

table#second,
table#second {
    border-collapse: collapse;
}
table#second,
table#second td, table th {
    border: 1px solid #666;
}
table#second,
table#second tr:first-child td {
    border-top: 0;
}
table#second,
table#second tr:last-child td {
    border-bottom: 0;
}
table#second,
table#second tr td:first-child,
table#second tr th:first-child {
    border-left: 0;
}
table#second,
table#second tr td:last-child,
table#second tr th:last-child {
    border-right: 0;
}