JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="wcpas-product-attributes" id="wcpas-product-attributes-pa_color">
  <li class="wcpas-product-attribute" id="wcpas-product-attribute-pa_color-blue"><a href="https://example.com/shop/?filter_color=blue" class="wcpas-product-attribute-link">Blue</a></li>
  <li class="wcpas-product-attribute" id="wcpas-product-attribute-pa_color-gray"><a href="https://example.com/shop/?filter_color=gray" class="wcpas-product-attribute-link">Gray</a></li>
  <li class="wcpas-product-attribute" id="wcpas-product-attribute-pa_color-green"><a href="https://example.com/shop/?filter_color=green" class="wcpas-product-attribute-link">Green</a></li>
  <li class="wcpas-product-attribute" id="wcpas-product-attribute-pa_color-red"><a href="https://example.com/shop/?filter_color=red" class="wcpas-product-attribute-link">Red</a></li>
  <li class="wcpas-product-attribute" id="wcpas-product-attribute-pa_color-yellow"><a href="https://example.com/shop/?filter_color=yellow" class="wcpas-product-attribute-link">Yellow</a></li>
</ul>

CSS

.wcpas-product-attributes {
  /* These remove the list styling */
  list-style: none;
  margin: 0;
  padding: 0;
}

.wcpas-product-attributes li {
  display: inline-block; /* Makes the terms display horizontally */
}

.wcpas-product-attributes li:not( :last-of-type ):after {
  content: ', '; /* Adds a comma after each term, except the last one */
}