JSFiddle - React, Tailwind, and code Playground

HTML

<div class="A">
  <div class="B">
    <div class="C">
          <p class='P1'>
            "JAJA P1"
          </p>
          <p class='P1'>
            "JAJA P1"
          </p>
          <p class='P2'>
            "JAJA P2"
          </p>
          <p class='P2'>
            "JAJA P2"
          </p>
    </div>
  </div>
</div>

CSS

.A>.B>.C>.P1:first-child {
  font-weight: bold;
}
.A>.B>.C>.P2:first-child {
  font-style: italic;
};