JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cl">
  <p>lorem01</p>
  <p>lorem02</p>
  <p>lorem03</p>
  <p>lorem03</p>
  <p>lorem03</p>
  <div class="d1f1" id="di1">lorem01m1</div>
  <div class="d2f2" id="di2">lorem02m2</div>
  <div class="d3f3" id="di3">lorem03m3</div>
  <div class="d4f4" id="di4">lorem04m4</div>
  <div class="d5f5" id="di5">lorem05m5</div>
  <ul class="qq">
    <li>sad1*1</li>
    <li>sad2*2</li>
    <li>sad3*3</li>
    <li>sad4*4</li>
    <li>sad5*5</li>
    <li>sad6*6</li>
  </ul>
  <p>lorem04</p>
</div>
<div class="demo">
  <p>lorem01</p>
  <p>lorem02</p>
  <p>lorem03</p>
  <p>lorem03</p>
  <p>lorem03</p>
  <div class="d1f1" id="di1">lorem01m1</div>
  <div class="d2f2" id="di2">lorem02m2</div>
  <div id="di3">lorem03m3</div>
  <div class="d4f4" id="di4">lorem04m4</div>
  <div class="d5f5" id="di5">lorem05m5</div>
  <ul class="qq">
    <li>sad1*1</li>
    <li>sad2*2</li>
    <li>sad3*3</li>
    <li>sad4*4</li>
    <li>sad5*5</li>
    <li>sad6*6</li>
  </ul>
  <p>lorem04</p>
</div>

CSS

/* body > div {
  display: none;
} */

JavaScript

var classes = {};
var elems = document.querySelectorAll('*');

elems.forEach((elem) => {
	if (elem.classList) {
  	elem.classList.forEach((name) => {
    	if (!classes[name]) {
      	classes[name] = 0;
      }
      
      classes[name]++;
    });
  }
});

Object.keys(classes).forEach((key) => {
	console.log('с таким классом .'+ key +': ', classes[key]);
});