Kylie

use prechoster with a new style inlining template: https://cloudwithlightning.net/random/chostin/prechoster/

under html:

<div id="container">
  <div class="textbox neutral icon"><p></p></div>
  <div class="textbox neutral text">
    <p><span class="name">NAME:</span> text </p>
  </div>
</div>

<div class="credit"><a href="https://cohost.org/werewolfbarista/post/4598597-img-style-position">original</a>, <a href="https://cohost.org/vurren/post/4757010-div-id-container">edits</a> by @vurren, sprites by <a href="https://sprites.pmdcollab.org/">pmd sprite repository</a></div>

under css:

/*original code written by @nekobarista and @nekoraita! from here -> https://cohost.org/werewolfbarista/post/4598597-img-style-position

code modified for pmd usage by @vurren*/

* {
  padding: 0;
  margin: 0;
}

#container {
  display:flex;
  flex-direction: column;
  position: relative;
}

.textbox {
  padding: 15px;
  margin:  7px 0px;
  background-color: #202020;
  border-radius: 5px;
  box-sizing: content-box;
}

.neutral { 
  border: solid #6BD16D;
  border-style: ridge;
}

.male {
  border: solid #67A5F0;
  border-style: ridge;
}

.female {
  border: solid #FD60B7;
  border-style: ridge;
}

.text {

  border-width: 5px 7px;
  min-height: 60px;
}

.icon {
width: 30px;
height: 30px;
  border-width: 5px;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://raw.githubusercontent.com/PMDCollab/SpriteCollab/master/portrait/0778/Normal.png); /*put your icon from https://sprites.pmdcollab.org/#/ here!*/
}

p{
    text-align: justify; 
  font-size: 1.25rem; /*Use rem as font-size unit for accessibility!!! 1rem = ~16px*/
  line-height: 1.25rem; /*Alter this value to make text more or less vertically compact*/
  font-family: "VT323", monospace;
  color: #fff
}

p {
  font-family: "VT323", monospace;
  text-shadow: 2px 1px 0px black;
}

.name {
  color: #54D1CA;
}

.credit {
  font-size: .7rem;
  text-align: right;
}

Had too much fun making an interactable post for this one.
Thank you for sharing OP!!!

My code using prechoster:

Under html:

<details>
  <summary><div class="container" id="001">
    <div class="textbox neutral icon norm"></div>
    <div class="textbox neutral text">
      <p><span class="name">Liz:</span> Woah! For real?
        <br> <br> <span class="right">>></span></p>
    </div>
  </div></summary>
  <details>
    <summary><div class="container" id="002">
      <div class="textbox neutral icon joy"></div>
      <div class="textbox neutral text">
        <p><span class="name">Liz:</span> Hiiiiiii!
          <br> <br> <span class="right"> >> </span></p>
      </div>
    </div></summary>
    <details>
        <summary><div class="container" id="003">
          <div class="textbox neutral icon stun"></div>
          <div class="textbox neutral text">
            <p><span class="name">Liz:</span> Woahhhhhh!
              <br> <br> <span class="right"> >> </span></p>
          </div>
        </div></summary>
        <summary><div class="container" id="003">
          <div class="textbox neutral icon insp"></div>
          <div class="textbox neutral text">
            <p><span class="name">Liz:</span> So cool!!! </p>
          </div>
        </div></summary>
      </details>
  </details>
</details>
<br><br>

<div class="credit"><a href="https://cohost.org/werewolfbarista/post/4598597-img-style-position">original</a>, <a href="https://cohost.org/vurren/post/4757010-div-id-container">edits</a> by @vurren, sprites by <a href="https://sprites.pmdcollab.org/">pmd sprite repository</a>, interactable thanks to <a href="https://cohost.org/blackle/post/31694-tutorial-how-to-mak">blackle's</a> tutorial</div>

under CSS:

/*original code written by @nekobarista and @nekoraita! from here -> https://cohost.org/werewolfbarista/post/4598597-img-style-position

code modified for pmd usage by @vurren*/

* {
  padding: 0;
  margin: 0;
}

details {
  position:relative;
  width:100%;
  height:155px;
  cursor:pointer;
}

summary, .subdiv {
  position:absolute;
  inset:0;
  font-size:0;
}

.container {
  display:flex;
  flex-direction: column;
  position: relative;
}

.textbox {
  padding: 15px;
  margin:  7px 0px;
  background-color: #202020;
  border-radius: 5px;
  box-sizing: content-box;
}

.neutral { 
  border: solid orange;
  border-style: ridge;
}

.text {
  border-width: 5px 7px;
  min-height: 60px;
}

.icon {
  width: 30px;
  height: 30px;
  border-width: 5px;
  background-repeat: no-repeat;
  background-size: cover;
}


/* You can define the reaction images for your character below here! */

.norm {
  background-image: url(https://raw.githubusercontent.com/PMDCollab/SpriteCollab/master/portrait/0179/Normal.png);
}

.joy {
  background-image: url(https://raw.githubusercontent.com/PMDCollab/SpriteCollab/master/portrait/0179/Joyous.png); /*put your icon from https://sprites.pmdcollab.org/#/ here!*/
}

.stun {
  background-image: url(https://raw.githubusercontent.com/PMDCollab/SpriteCollab/master/portrait/0179/Stunned.png); /*put your icon from https://sprites.pmdcollab.org/#/ here!*/
}

.insp {
  background-image: url(https://raw.githubusercontent.com/PMDCollab/SpriteCollab/master/portrait/0179/Inspired.png); /*put your icon from https://sprites.pmdcollab.org/#/ here!*/
}

p{
  text-align: justify; 
  font-size: 1.25rem; /*Use rem as font-size unit for accessibility!!! 1rem = ~16px*/
  line-height: 1.25rem; /*Alter this value to make text more or less vertically compact*/
  font-family: "VT323", monospace;
  color: #fff;
  text-shadow: 2px 1px 0px black;
}

.name {
  color: goldenrod;
}

/* This is used to set the >> arrow to the right of the frame*/
.right {
  margin-left: 90%;
}

.credit {
  font-size: .7rem;
  text-align: right;
}