JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/alex-ray/qna/master/dist/qna.min.js"></script>
<div class="snippet-wrapper question">
    <p class="question">
        <span class="snippet"></span>
        <span class="snippet"></span>
    </p>

    <form id="form" name="question">
        <span class="input-cursor">
            <input name="name" type="text" placeholder="Your Name" />
        </span>
    </form>
</div>

<div class="snippet-wrapper answer">
    <p class="answer">
        <span class="snippet"></span>
        <br/>
        <span class="snippet"></span>
    </p>
</div>

CSS

html, body {
    font-family: 'Helvetica Neue';
    color: #2D2F31;
}

.snippet-wrapper {
    margin: 0 auto;
    font-size: 1.5em;
}

.snippet-wrapper.question,
.snippet-wrapper.answer { margin: 50px; }

input {
    position: relative;
    overflow: hidden;
    outline: none;
    border: none;
    font-size: 1.125em;
    display: inline-block;
    width: 200px;
    padding: 0.25em 0;
    color: #5D97F5;
    border-bottom: 2px solid #2D2F31;
}

.is-typing,
.is-waiting {
    position: relative;
    overflow: hidden;
}

.is-waiting input:focus { z-index: 3; }

.is-waiting:before, 
.is-typing:before {
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index:1;    
}

.is-typing:after,
.is-waiting:before {
  -webkit-animation-name: cursor-blink;
  animation-name: cursor-blink;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  color: #9178E2;
  border-right: 3px solid #5D97F5;
  content: '';
}

@-webkit-keyframes cursor-blink {
    1%{opacity:0}
    40%{opacity:0}
    60%{opacity:1}
    100%{opacity:1}
}
@keyframes cursor-blink{
    1%{opacity:0}
    40%{opacity:0}
    60%{opacity:1}
    100%{opacity:1}
}

JavaScript

var questionText = [
  {str: 'Hello, '},
  {str: 'What\'s your name?', pauseDelay: 50}
];

var defaultAnswerText = [
  {str: 'It\'s, great to meet you'}
];

var formEl         = document.querySelector('.question form');
var nameInputEl    = formEl.querySelector('input');
var cursorEl       = formEl.querySelector('.input-cursor');	
var aSnippetElList = document.querySelectorAll('.answer .snippet');
var qSnippetElList = document.querySelectorAll('.question .snippet');

var answerOpts = {responder: answerResponder};
var questionOpts = {form: formEl};

var answer   = new qna(aSnippetElList, defaultAnswerText, answerOpts);
var question = new qna(qSnippetElList, questionText, questionOpts);

question.bindAnswer(answer) ;
question.respond(function () {
  cursorEl.classList.add('is-waiting');
  nameInputEl.focus();
});
    
function answerResponder ( event, form ) {
  event.preventDefault();        
  cursorEl.classList.remove('is-waiting');
  nameInputEl.blur();

  var name = nameInputEl.value.trim();
                 
  return [
    {str: 'Hello, '+name+'.'},
    {str: 'It\'s great to meet you!'}
  ];
}