JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pp">
  <div class="p">
    <p>
    Some text
    </p>
    <div class="c">
      This is the thingy!
    </div>
    <p>
    Some more text
    </p>
  </div>
</div>

<p>
Example with negative margins.
</p>
<div class="pp">
  <div class="p">
    <p>
    Some text
    </p>
    <div class="c" id="neg">
       This is the thingy!
    </div>
    <p>
    Some more text
    </p>
  </div>
</div>

CSS

.pp {
  padding: 0 6px 0 6px;
  width: 100px;
  background-color: black;
}

.p {
  background-color:white;
}

.c {
  background-color:red;
}

#neg {
  margin: 0 -6px 0 -6px;
}