JSFiddle - React, Tailwind, and code Playground

HTML

<div id="refals_wr" style="font:normal 14px Verdana, Geneva, sans-serif; border-top:2px dashed #CCC;">
      <table width="100%" border="0" cellspacing="5" cellpadding="5">
      <tr>
        <td>
        <div>
        <span>NAME OF SORTING ALGORITHM:</span><br />
    
        <span id="algName">Bubble Sort</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        </td>
        <td>
        <div>
        <span>TOTAL SWAPS:</span><br />
    
        <span id="algTotalSwaps">50</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div></td>
        <td>
        <div>
        <span>SWAP COUNT:</span><br />
    
        <span id="algSwapCount">8</span>
        </div></td>
      </tr>
    </table>
    
      </div>

CSS

#refals_wr span:nth-child(odd){
	color:green;}
	
#refals_wr span:nth-child(even){
	color:orange;}