JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<body>
		<div>
			<table>
				<tr style="background-color: rgba(54, 100, 139 , 1)"><td style="color:white;padding-right:50px; ">14.0 VERY ALKALINE</td></tr>
				<tr style="background-color: rgba(79,148,205 , 1)"><td style="color:white;padding-right:50px;">13.0</td></tr>
				<tr style="background-color: rgba( 92 ,172 ,238 , 1)"><td style="color:white;padding-right:50px;">12.0</td></tr>
				<tr style="background-color: rgba( 99 ,184 ,255 , 1)"><td style="color:white;padding-right:50px;">11.0</td></tr>
				<tr style="background-color: rgba( 135,206,250  , 1)"><td style="color:white;padding-right:50px;">10.0</td></tr>
				<tr style="background-color: rgba( 176, 226, 255  , 1)"><td style="color:white;padding-right:50px;">9.0</td></tr>
				<tr style="background-color: rgba( 164, 211, 238  , 1)"><td style="color:white;padding-right:50px;">8.0</td></tr>
				<tr style="background-color: rgba( 0 ,199, 140   , 1)"> <td style="color:white;padding-right:50px;">7.0 NEUTRAL</td></tr>
				<tr style="background-color: rgba( 255, 181, 197    , 1)"><td style="color:white;padding-right:50px;">6.0</td></tr>		
				<tr style="background-color: rgba( 238, 169, 184     , 1)"><td style="color:white;padding-right:50px;">5.0</td></tr>
				<tr style="background-color: rgba( 255, 130, 171    , 1)"><td style="color:white;padding-right:50px;">4.0</td></tr>
				<tr style="background-color: rgba( 238, 121, 159    , 1)"><td style="color:white;padding-right:50px;">3.0</td></tr>
				<tr style="background-color: rgba( 255,110, 180   , 1)"><td style="color:white;padding-right:50px;">2.0</td></tr>
				<tr style="background-color: rgba( 255, 105, 180   , 1)"><td style="color:white;padding-right:50px;">1.0</td></tr>
				<tr style="background-color: rgba(  255, 62, 150    , 1)"><td style="color:white;padding-right:50px;">0.0 VERY ACID</td></tr>
			</table>
		</div>
	</body>