JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

##########
 #..,.,,.,#
 ]<span class="emoji">🐸</span>,.<span class="emoji">🦇</span>..#
 ###.,.,,.#
   #..,..,#
   ###[]###
   #..<span class="emoji">🧙🏼</span>..#
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+----------------+
| Rusty Sword    |
| (Weapon)       |
| Deal 1 damage  |
| ......         |
| .<span class="emoji">🧙🏼</span><span class="emoji">⚔️</span>.         |
| ......         |
|                |
+----------------+
+----------------+
| Fireball       |
| (Spell)        |
| Deal 4 damage, |
| explode on hit |
| for 2 damage.  |
| ......         |
| .<span class="emoji">🧙🏼</span>☄️.         |
| ......         |
|                |
+----------------+
+----------------+
| Firestorm      |
| (Spell)        |
| Deal 2 damage  |
| ..........     |
| .......<span class="emoji">🔥</span>.     |
| .....<span class="emoji">🔥</span><span class="emoji">🔥</span>.     |
| .<span class="emoji">🧙🏼</span><span class="emoji">🔥</span><span class="emoji">🔥</span><span class="emoji">🔥</span>.     |
| .....<span class="emoji">🔥</span><span class="emoji">🔥</span>.     |
| .......<span class="emoji">🔥</span>.     |
| ..........     |
+----------------+
+----------------+
| Health Potion  |
| (Consumable)   |
| Heal 8         |
|                |
+----------------+

CSS

body{
    font-family: Monaco, monospace;
    font-size: 20px;
    white-space: pre;
    color: #332;
    background: #ccccdd;
    line-height: 1.1;
}

.emoji{
    width: 2ch;
    display: inline-block;
    text-align: center;
}