JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div id="message" class="message">Click "Talk" and begin speaking.</div>
  <div class="todo"> <span id="final_span" class="final"></span>
    <span id="interim_span" class="interim"></span>
  </div>
  <div class="controls">
    <button type="button" class="btn btn-default talk_button">Talk</button>
    
    <select class="select language">
      <option selected="selected">Select Your Language</option>
    </select>
  </div>
</div>

<div class="container">
  <div id="message" class="message">Click "Talk" and begin speaking.</div>
  <div class="todo"> <span id="final_span" class="final"></span>
    <span id="interim_span" class="interim"></span>
  </div>
  <div class="controls">
    <button type="button" class="btn btn-default talk_button">Talk</button>
    
    <select class="select language">
      <option selected="selected">Select Your Language</option>
    </select>
  </div>
</div>

CSS

.message {
    color:#999;
    padding: 1em 0;
}
.todo, .response {
    min-height:50px;
    background-color: #fff;
    margin-bottom: 0.5em;
    padding: 1px;
    color:#555;
    -webkit-box-shadow: 0 0px 3px #BDBDBD;
    box-shadow: 0 0px 3px #BDBDBD;
    transition: all 0.3s ease-in-out;
}

JavaScript

var final_transcript = '';
var recognizing = false;
var ignore_onend;
var start_timestamp;
var activeButton;

//get languages
// https://gist.githubusercontent.com/onigetoc/d5dc63320c4d08633eb7b7daf6c1ddeb/raw/e9c3da4a40db8edf4992db9219526617da811c4c/lang.json
$.get("//raw.githubusercontent.com/the-creature/language-json/master/data.json", function(data) {
  var cList = $('.language');
  var data = $.parseJSON(data);

  $.each(data, function(i) {
    var option = $('<option/>')
      .attr('value', data[i].code)
      .html(data[i].name);

    $(option).appendTo($(cList));
  });

  var userLang = navigator.language || navigator.userLanguage;
  $(cList).val(userLang);
});

// Speech Recognition
if (!('webkitSpeechRecognition' in window)) {
  message.innerHTML = 'Web Speech API is not supported by this browser. Upgrade to <a href="//www.google.com/chrome">Chrome</a> version 25 or later.';
} else {
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onstart = function() {
    recognizing = true;
    activeButton.parent().parent().find(".message").html("Speak Now.");
    activeButton.html("Listen");
  };

  recognition.onresult = function(event) {
    var interim_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
        vc_search(final_transcript);
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    activeButton.parent().parent().find(".final").html(final_transcript);
    activeButton.parent().parent().find(".interim").html(interim_transcript);
  };

  recognition.onend = function() {

    recognizing = false;
    if (ignore_onend) {
      return;
    }
    speechMyText(final_transcript);
    if (!final_transcript) {
      activeButton.parent().parent().find(".message").html('Click "Talk" and begin...