JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title></title>

  </head>
  
  <body>
    <h1>Spanish</h1>
    <div id="main">
      <h1 id="topic_name">Subject Pronouns</h1>
      <p>Type the word/phrase below in the opposite language</p>
      <p>If there is an accent or ~ above a letter, put ^ before that letter. Example: diecis^eis</p>
      <hr id="margin-bottom">
      <h1 id="question"></h1>
      <input id="answer_box"/>
      <button id="next"></button>
      <button id="answer">Show Answer</button>
    </div>
    
  </body>
</html>

CSS

#main{
  border:3px solid blue;
  height:500px;
  width:600px;
  top:50%;
  left:50%;
  position:fixed;
  margin-top:-230px;
  margin-left:-300px;
  border-radius:5%;
}

h1{
  text-align:center;
}


p{
  text-align:center;
}

#margin-bottom{
  margin-bottom:80px;
}

#next{
  display:block;
  margin:0 auto;
}

#answer_box{
  display:block;
  margin:0 auto;
  margin-bottom:20px;
}

#answer{
  display:block;
  margin:0 auto;
}

JavaScript

$(document).ready(function(){
	
	var lvl1=
	[
	  [["I"],["yo"]],
	  [["you (formal)"],["usted"]],
	  [["you (informal)"],["t^u"]],
	  [["he"],["^el"]],
	  [["she"],["ella"]],
	  [["we (masculine)"],["nosotros"]],
	  [["we (feminine)"],["nosotras"]],
	  [["you all (formal)"],["ustedes"]],
	  [["you all (informal)"],["vosotros"]],
	  [["they (masculine or mixed)"],["ellos"]],
	  [["they (feminine)"],["ellas"]],
	  ];
	  
  var lvl2=
  [
    [["yo"],["I"]],
    [["usted"],["you (formal)"]],
    [["t^u"],["you (informal)"]],
    [["^el"],["he"]],
    [["ella"],["she"]],
    [["nosotros"],["we (masculine)"]],
    [["nosotras"],["we (feminine)"]],
    [["ustedes"],["you all (formal)"]],
    [["vosotros"],["you all (informal)"]],
    [["ellos"],["they (masculine)"]],
    [["allas"],["they (feminine)"]],
    ];
    
  var lvl3=
  [
    [["yo soy"],["I am"]],
    [["tú eres"],["you (informal) are"]],
    [["él es"],["he is"]],
    [["ella es"],["she is"]],
    [["usted es"],["you (formal) are"]],
    [["nosotros somos"],["we are"]],
    [["vosotros sois"],["you all (informal) are"]],
    [["ellos/ellas son"],["they are"]],
    [["ustedes son"],["you all (formal) are"]],
    ];
	      
  var lvl4=
  [
    [["I am"],["yo soy"]],
    [["you (informal) are"],["t^u eres"]],
    [["he is"],["^el es"]],
    [["she is"],["ella es"]],
    [["you (formal) are"],["usted es"]],
    [["we are"],["nosotros somos"]],
    [["you all (informal) are"],["vosotros sois"]],
    [["you all (formal) are"],["ustedes son"]],
    ];
	
	next(1);
	
  function next(level){
    random=(Math.floor(Math.random()*10));
    
    switch(level){
      case 1:
        question=lvl1[random][0];
        answer=lvl1[random][1];
        $('#next').text("Level 2");
        break;
      case 2:
        question=lvl2[random][0];
        answer=lvl2[random][1];
        $('#next').text("Level 3");
        break;
      case 3:
        random=(Math.floor(Math.random()*9));
        question=lvl3[random][0];
       ...