JSFiddle - React, Tailwind, and code Playground

HTML

<div class=“product”>
 <div class=“colour-swatches”>
  <ul>
    <li class=“swatch">Red</li>
    <li class=“swatch">Blue</li>
    <li class=“swatch">Green</li>
    <li class=“swatch">Orange</li>
    <li class=“swatch">Yellow</li>
    <li class=“swatch">Black</li>
    <li class=“swatch">Lime</li>
  </ul> 
</div>
</div>
<span id="avail"></span>

CSS

/* Just hiding some of them for testing, this should work with your CSS */
/* Feel free to change the nth-child value */

li:nth-child(n+3) {
      display: none;
}

JavaScript

var visible = $('ul li:visible').length,
    all = $('ul li').length;
if(all - visible > 0) {
    $('#avail').html( (all - visible) + ' more colors available');
}