JSFiddle - React, Tailwind, and code Playground

by roomyrooms

HTML

<div id='spellviewwrapper'>
		<div id='spellview'>
      <div id='spellviewtext'>
        <div id='tooltipoutline'>
          <div id='spellviewtitle'>
            <div id='spelliconcontainer'>
            <img id='spellviewicon' src='https://i.gyazo.com/14e682627c8c595ff029cf99d8736d80.png'>
            </div>
            Frigid Wind
          </div>
          5s CD / 500 Mana
          <hr>
          
          <span id='regulartext'>
            
            You conjure up a ripping gale, dealing <span id='magicdamage'>50 Magical Damage</span> twice a second for <span id='durationtext'>4</span> seconds.
            
          </span>
          
          <hr>
          
          <span id='detailtip'>Press Alt to see damage details.</span>
        </div>
      </div>
    </div>
    
    <br>
    
		<div id='spellview'>
      <div id='spellviewtext'>
        <div id='tooltipoutline'>
          <div id='spellviewtitle'>
            <div id='spelliconcontainer'>
            <img id='spellviewicon' src='https://i.gyazo.com/9fe8f27bb328b9808e74ffb9bcbb579c.png'>
            </div>
            True Shot
          </div>
          5s CD / 500 Mana
          <hr>
          
          <span id='regulartext'>
            
            You fire a shot directly toward the target's heart, dealing <span id='physicaldamage'>50 Physical Damage</span> on impact.
            
          </span>
          
          <hr>
          
          <span id='detailtip'>Press Alt to see damage details.</span>
        </div>
      </div>
    </div>
    
    <br>
    
		<div id='spellview'>
      <div id='spellviewtext'>
        <div id='tooltipoutline'>
          <div id='spellviewtitle'>
            <div id='spelliconcontainer'>
            <img id='spellviewicon' src='https://i.gyazo.com/9fe8f27bb328b9808e74ffb9bcbb579c.png'>
            </div>
            True Shot
          </div>
          5s CD / 500 Mana
          <hr>
          
          <span id='regulartext'>
            
      ...

CSS

#regulartext {
  color: White;
}
#detailtip {
  color: LightGray;
}
#magicdamage {
  color: #438be8;
}
#physicaldamage {
  color: #d6482f;
}
#durationtext {
  color: DarkGray;
}
#detailtext {
  color: DarkGray;
}
























hr {
  border: 1px solid #071c16;
}

#spellviewwrapper {
  margin-top: 10px;
  top: 0%;
  position: absolute;
  pointer-events: none;
  max-width: 320px;
}
#spellview {
  border: 10px solid transparent;
  padding: 0px;
  border-image: url(https://i.imgur.com/hlmyRf3.png) 10 round;
  background-color: #6d6f7f;
  image-rendering: pixelated;
  border-radius: 5px;
  font-family: Consolas;
}
#spellviewtext {
  top: 0px;
  margin-top: 0px;
  text-align: center;
  font-size: 12px;
}
#spellviewtitle {
  float: center;
  font-size: 13px;
}
#spellviewicon {
  image-rendering: pixelated;
  width: 32px;
  height: 32px;
  display: inline-block;
  float: left;
  position: relative;
}
#spellviewborder {
  image-rendering: pixelated;
  width: 32px;
  height: 32px;
  float: left;
  position: relative;
  margin-left: -32px;
}
#tooltipoutline { 
  text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
  color: #fff;
  user-select: none;
  padding-left: 1px;
  padding-right: 1px;
  font-size: 11px;
}