JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="body">
    <div id="main">
      <div class="post-meta">category: 
        <span class="category">
        <a href="#">AKB</a> | <a href="#">SKE</a> | <a href="#">NMB</a> | <a href="#">HKT</a> | <a href="#">NGT</a>
        </span>
      </div>
    </div>
  </div>
</div>

CSS

*,*::before, *::after {
  box-sizing: border-box;
}

#container {
  width: 100vw;
  height: 100vh;
  background-color: #00f;
}

#body {
  width: 100%;
  height: 100%;
  background-color: #ccc;
  position:relative;
  padding-top: 10%;
}

#main {
  width: 80%;
  height: 80%;
  background-color: #fff;
  position: relative;
  margin: 0 auto;
}

#main::after {
  content: "main";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
}

#container .div_pc {
  width: 50px;
  height: 50px;
  background-color: #f00;
}

JavaScript

(function($){
	$(function(){
  	$("#main .category a").each(function(){
    	var group = $(this).text();
      if ( group === "SKE" ) {
      	$("#container").prepend("<div class='div_pc'>");
      }
    });
  });
})(jQuery);