JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Since I don't have access to your code, I'll prove what you need to remove, likely not in order, and then what you need to add -->


<!-- Delete this -->
<style>
@media screen and (max-width: 767px) {
    .pagedoll-exclamation {
        width: 80px;
    }
}
</style>


<!-- Add this -->
<style>
.pagedoll-exclamation {
   width: 80px;
}
</style>

<!-- Change this -->
<div class="pagedoll-sticky">
  <div class="pagedoll-tape"></div>
  <div class="pagedoll-note-wrapper">
    <img class="pagedoll-exclamation" src="https://i.imgur.com/i4DqVta.png" node="[object Object]" alt="" draggable="false">
    <div class="pagedoll-note">
      ✗o✗o, Celeste <3 
    </div>
  </div>
</div>

<!-- To this: -->
<div class="pagedoll-sticky">
  <div class="pagedoll-note-wrapper">
    <img class="pagedoll-exclamation" src="https://i.imgur.com/i4DqVta.png" node="[object Object]" alt="" draggable="false">
    <div class="pagedoll-note">
      <div class="pagedoll-tape"></div>
      ✗o✗o, Celeste <3 
    </div>
  </div>
</div>

<!-- From this -->
<style>
.pagedoll-tape {
    position: absolute;
    top: -10px;
    left: 35px;
    width: 60px;
    height: 18px;
    background: repeating-linear-gradient(45deg, #8B8B8B, #8B8B8B 2px, #8B8B8B 2px, #8B8B8B 4px);
    border: 1px solid #8B8B8B;
    transform: rotate(-4deg);
    opacity: 0.75;
    border-radius: 1px;
    pointer-events: none;
    z-index: 3;
}
</style>

<!-- To this -->
<style>
.pagedoll-tape {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 60px;
    height: 18px;
    background: repeating-linear-gradient(45deg, #8B8B8B, #8B8B8B 2px, #8B8B8B 2px, #8B8B8B 4px);
    border: 1px solid #8B8B8B;
    transform: translate(24%) rotate(-4deg);
    opacity: 0.75;
    border-radius: 1px;
    pointer-events: none;
    z-index: 3;
}
</style>

<!-- From this -->
<style>
.pagedoll-note {
    background: #000000;
    color: #8B8B8B;
   ...