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'>
            <img id='spellviewborder' src='https://i.gyazo.com/14e682627c8c595ff029cf99d8736d80.png'>
            </div>
            Frigid Wind
          </div>
          5s CD / 500 Mana
          <hr>
          ttttttttttttttttttttttttttttttttt ttttttttttttttttttttttttttttttttt ttttttttttttttttttttttttttttttttt
          <hr>
          <span cla;'>Press Alt to see damage details.</span>
        </div>
      </div>
    </div>
</div>

CSS

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;
}




#regulartext {
  
}
#detailtip {
  color: LightGray;
}
#regulartext {
  
}
#regulartext {
  
}
#regulartext {
  
}