JSFiddle - React, Tailwind, and code Playground

by vucko

HTML

<div class="block-33-33-33-33">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
</div>

CSS

.block__col--33{
  font-size: 20px;
  color: red;
}

JavaScript

var pClass = document.querySelector('div[class^=block]').classList.value.split('-');
pClass.shift(); // remove the first item

document.querySelectorAll('div.card').forEach(function(el, i){
  el.classList.add('block__col--'+ pClass[i]);
});