JSFiddle - React, Tailwind, and code Playground

HTML

<title>OceanMeasure</title>
    <!-- favicon -->

  <body>
    <div id="banner">
      <div id="banner-content">
        <img src="img/oceanMeasureIconWS.png" />
      </div>
    </div>
    <div id="main-content">
    </div>
    <div id="Zlayer">
      <div id="hero" class="clearfix">
        <img src="img/header.jpg" id="bgvid" />
    </div>
    <div class="row">
      <div class="large-12 columns">
        <h1>Welcome to Ocean Measure</h1>
        <h3>Your Florida Fishing Head Quarters</h3>
      </div>
    </div>
    <div id="wrapper">
      <div class="row">
        <div class="large-12 columns">
          <div id="license">
            <p>Do you have a fishing license for saltwater fishing?</p>
            <button class="button" type="button" value="yes" id="licenseYes">Yes</button>
            <button class="button" type="button" value="no" id="licenseNo">No</button>
            <div id="licenseOutput"></div>
          </div>
          <div id="oceanDrop">
            <form method="POST" class="dataForm" id="dataForm">
              <fieldset>
                <!-- OCEAN VALUE -->
                
                <legend>Where will you be fishing?</legend>
                <input type="radio" name="oceanVal" value="atlantic" id="oceanVal" required><label for="oceanVal">Atlantic</label>
                <input type="radio" name="oceanVal" value="gulf" id="oceanVal"><label for="oceanVal">Gulf of Mexico</label>
                
              </div>
              <div id="fishDrop">
                <p>What fish would you like to look up?</p>
                <!-- FISH VALUE -->
                <label>
                  <select class="custom-dropdown__select custom-dropdown__select--white" name="fishVal" id="fishVal">
                    <option value="" disabled="disabled" selected="selected">Please select</option>
                    <option value="barracuda">Barracuda</option>
                    <option value="black drum">Black Drum</option>
                   ...

CSS

@charset "UTF-8";
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html...

JavaScript

(function(){
//------Set variables

var userOcean = getRadioVal( document.getElementById('dataForm'), 'oceanVal' );
var userFish  = document.getElementById("fishVal");
var buttonInfo  = document.getElementById("getInfo");
var output  = document.getElementById("oceanOutput");
var btnLicenseY = document.getElementById('licenseYes');
var btnLicenseN = document.getElementById('licenseNo');
var licenseOutput  = document.getElementById("licenseOutput");

//------Start function on click
buttonInfo.addEventListener('click', function() {
var ocean = userOcean.options[userOcean.checked].value;
var kind = userFish.options[userFish.selectedIndex].value;
var fishImg = jsonObject.ocean_measure[ocean]['fish'][kind].image;
output.innerHTML = "<h2>Fish On!</h2><div id=\"fishInfo\">"+
	"<img src='" +fishImg+ "' />" +
	"<p>fish:  "+jsonObject.ocean_measure[ocean]['fish'][kind].name+"</p>"+
	"<p>length:  "+jsonObject.ocean_measure[ocean]['fish'][kind].length+"</p>"+
	"<p>closed:  "+jsonObject.ocean_measure[ocean]['fish'][kind].closed+"</p>"+
	"<p>limit:  "+jsonObject.ocean_measure[ocean]['fish'][kind].limit+"</p>"+
	"<p>remarks:  "+jsonObject.ocean_measure[ocean]['fish'][kind].remarks+"</p>";
	console.log(
	"<img src='" +fishImg+ "' />" +
	"\n\nfish:  "+jsonObject.ocean_measure[ocean]['fish'][kind].name+
	"\n\nlength:  "+jsonObject.ocean_measure[ocean]['fish'][kind].length+
	"\n\nclosed:  "+jsonObject.ocean_measure[ocean]['fish'][kind].closed+
	"\n\nlimit:  "+jsonObject.ocean_measure[ocean]['fish'][kind].limit+
	"\n\nremarks:  "+jsonObject.ocean_measure[ocean]['fish'][kind].remarks+
"</div>"
);
});
//------end info function
//------start license function

btnLicenseY.addEventListener('click', function(){
licenseOutput.innerHTML = "<h3>Lets Fish!</h3>"+ "<p>You're all set go ahead and select which coast you'll be fishing, and your target species.</p>"
});
//------end yes license function
btnLicenseN.addEventListener('click', function(){
licenseOutput.innerHTML = "<h3>Uh Oh!</h3>"+...