JSFiddle - React, Tailwind, and code Playground

by Kasumi

HTML

<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
    <td>1.4</td>
    <td>1.5</td>
    <td>1.6</td>
    <td>1.7</td>
    <td>1.8</td>
    <td>1.9</td>
    <td>1.10</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
    <td>2.4</td>
    <td>2.5</td>
    <td>2.6</td>
    <td>2.7</td>
    <td>2.8</td>
    <td>2.9</td>
    <td>2.10</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
    <td>3.4</td>
    <td>3.5</td>
    <td>3.6</td>
    <td>3.7</td>
    <td>3.8</td>
    <td>3.9</td>
    <td>3.10</td>
  </tr>
  <tr>
    <td>4.1</td>
    <td>4.2</td>
    <td>4.3</td>
    <td>4.4</td>
    <td>4.5</td>
    <td>4.6</td>
    <td>4.7</td>
    <td>4.8</td>
    <td>4.9</td>
    <td>4.10</td>
  </tr>
  <tr>
    <td>5.1</td>
    <td>5.2</td>
    <td>5.3</td>
    <td>5.4</td>
    <td>5.5</td>
    <td>5.6</td>
    <td>5.7</td>
    <td>5.8</td>
    <td>5.9</td>
    <td>5.10</td>
  </tr>
  <tr>
    <td>6.1</td>
    <td>6.2</td>
    <td>6.3</td>
    <td>6.4</td>
    <td>6.5</td>
    <td>6.6</td>
    <td>6.7</td>
    <td>6.8</td>
    <td>6.9</td>
    <td>6.10</td>
  </tr>
  <tr>
    <td>7.1</td>
    <td>7.2</td>
    <td>7.3</td>
    <td>7.4</td>
    <td>7.5</td>
    <td>7.6</td>
    <td>7.7</td>
    <td>7.8</td>
    <td>7.9</td>
    <td>7.10</td>
  </tr>
  <tr>
    <td>8.1</td>
    <td>8.2</td>
    <td>8.3</td>
    <td>8.4</td>
    <td>8.5</td>
    <td>8.6</td>
    <td>8.7</td>
    <td>8.8</td>
    <td>8.9</td>
    <td>8.10</td>
  </tr>
  <tr>
    <td>9.1</td>
    <td>9.2</td>
    <td>9.3</td>
    <td>9.4</td>
    <td>9.5</td>
    <td>9.6</td>
    <td>9.7</td>
    <td>9.8</td>
    <td>9.9</td>
    <td>9.10</td>
  </tr>
  <tr>
    <td>10.1</td>
    <td>10.2</td>
    <td>10.3</td>
    <td>10.4</td>
    <td>10.5</td>
    <td>10.6</td>
    <td>10.7</td>
    <td>10.8</td>
    <td>10.9</td>
    <td>10.10</td>
  </tr>
</table>

CSS

table{
  border-collapse:collapse;
  text-align: center;
}
td {
    border: 1px solid #000;
    padding: 10px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.selected{
  background:green;
  color:#fff;
}

JavaScript

$('td')
  .mousedown(function(){
    $(this).toggleClass('selected');
    $('td').on('mouseenter',function(){
      $(this).toggleClass('selected');
    });
  })
  .mouseup(function(){
    $('td').off('mouseenter');
  });