JSFiddle - React, Tailwind, and code Playground

HTML

<p>Taking a quick look at your profile, it looks like you set the size of the heart here:</p>
<code>
@media screen and (max-width: 767px) {<br>
    .pagedoll-exclamation {<br>
        width: 80px;<br>
    }<br>
}<br>
</code>
<br>
Try setting the width outside media screen. <br>
@media screen is normally used is you want things to change from different screens - the way you have it set up right now, <br>
the width is only set when the screen's width is less than or equal to 767 pixels, which is why it works on mobile and not desktop. <br>
<br>
 Instead, just use this:<br>
<code>
.pagedoll-exclamation { <br>
   width: 80px;<br>
}<br>
</code>
<br>
On the topic on the tape, now things get a little more complex.<br>
As far as I can tell, the main issue stems from this:<br>
<img src="https://files.catbox.moe/5bn367.png"><br>
See how the wrapper contains both the heart and the note?<br>
You are currently positioning the tape based on the wrapper, not on the note. <br>
<img src="https://files.catbox.moe/lu07f8.png"><br>
<br>
There's a couples ways to fix this.<br>
I'm going to give you what I think is the easiest, but it takes a couple steps. <br>
Step 1: Move where the tape div is located. <br>
Put it inside the "pagedoll-note" div. <br>
<img src="https://files.catbox.moe/jj2cn6.png"><br>
<br>
Step 2: Realign it <br>
When I did a quick check, I found top: 15px; and left: 120px; worked pretty well. <br>
<img src="https://files.catbox.moe/4fxcml.png"><br>
<br>
Step 3: Make it visible <br>
Currently, it's getting cropped by the borders of the note. <br>
Luckily, there's an easy fix. <br>
See the "clip-path" property in .pagedoll-note? <br>
<img src="https://files.catbox.moe/mdfivn.png"><br>
Delete it<br><br>
Step 4: There's currently a discrepency on your note size from mobile to desktop <br>
My example assumes the mobile version is the one you want. <br>
<img src="https://files.catbox.moe/bk8jgp.png"><br>
The values in the...