JSFiddle - React, Tailwind, and code Playground

HTML

<select id="monsters">
  <option>Fly</option>
  <option>Mouse</option>
  <option>Rat</option>
  <option>Rabbid Rabbit</option>
  <option>Baby Ent</option>
  <option>Murloc</option>
  <option>Ent</option>
</select>

<button type="button" id="battle">Battle!</button>

<p id="dam">

</p>

CSS

body {
  background-color: #000;
}

select {
  background-color: rgba(0, 0, 0, 0);
  border-color: #81ff14;
  color: #81ff14;
  margin-left: 100px;
}

button {
  background-color: rgba(0, 0, 0, 0);
  border-color: #81ff14;
  color: #81ff14;
  border-radius: 10%;
  float: right;
  margin-right: 100px;
}

#dam {
  color: #81ff14;
  font-family: sans-serif;
  font-size: 18px;
  max-width: 60%;
  text-align: center;
  float: right;
  margin-top: 25px;
}

JavaScript

var mon = document.getElementById('monsters');
var monster =mon.options[mon.selectedIndex].text;

$('#battle').click(function() {
	document.getElementById('dam').innerHTML = "You have hit the " + monster + " for 5 damage";
});