JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Conditional Formatting</title>
  </head>
  <body>
    <h1>Conditional Formatting</h1>
    <div class="col">
      <h2>Cases</h2>
      <table>
        <tr>
          <th>Variant 1</th>
          <th>Variant 2</th>
          <th>Variant 3</th>
          <th>Variant 4</th>
          <th>Variant 5</th>
          <th>Variant 6</th>
          <th>Variant 7</th>
          <th>Variant 8</th>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>10</td>
          <td>10</td>
          <td>10</td>
          <td>2</td>
        </tr>
        <tr>
          <td>2</td>
          <td>1</td>
          <td>1</td>
          <td>2</td>
          <td>2</td>
          <td>5</td>
          <td>9</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>5</td>
          <td>5</td>
          <td>2</td>
        </tr>
        <tr>
          <td>4</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>0.75</td>
          <td>5</td>
          <td>5</td>
          <td>2</td>
        </tr>
        <tr>
          <td>5</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>0.65</td>
          <td>5</td>
          <td>5</td>
          <td>2</td>
        </tr>
        <tr>
          <td>6</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>0.5</td>
          <td>5</td>
          <td>5</td>
          <td>2</td>
        </tr>
        <tr>
          <td>7</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>0.35</td>
          <td>5</td>
          <td>5</td>
          <td>2</td>
        </tr>
        <tr>
          <td>8</td>
          <td>1</td>
          <td>1</td>
         ...