JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>chatbot template</title>
    </head>

<body>
    <div id='bodybox'>
        <div id='chatborder'>
          <p id="chatlog7" class="chatlog">&nbsp;</p>
          <p id="chatlog6" class="chatlog">&nbsp;</p>
          <p id="chatlog5" class="chatlog">&nbsp;</p>
          <p id="chatlog4" class="chatlog">&nbsp;</p>
          <p id="chatlog3" class="chatlog">&nbsp;</p>
          <p id="chatlog2" class="chatlog">&nbsp;</p>
          <p id="chatlog1" class="chatlog">&nbsp;</p>
          <input type="text" name="chat" id="chatbox" placeholder="Hi there! Type here to talk to me." onfocus="placeHolder()"><button id ="startBtn" type="button"><img src="https://raw.githubusercontent.com/inesmathy/chatbot/master/thumbnail_ButtonIcon-N64-Start.png" height="30%" width="15%" style="float: right;"><button>
           
        </div>
       
        <center><button id="btnSubmit" type="button"><img src="https://raw.githubusercontent.com/inesmathy/chatbot/master/BMO-btn.png" align="middle" height="70%" width="80%"></button></center>
      </div>
<script type="text/javascript" src="chatbot.js"></script>
</body>
</html>

CSS

body {
  font: 15px arial, sans-serif;
  background-color: #d9d9d9;
  padding-top: 15px;
  padding-bottom: 15px;
  cursor:url(beemo.png), pointer
}

#bodybox {
  margin: auto;
  max-width: 550px;
  font: 15px arial, sans-serif;
  background-color: white;
  border-style: solid;
  border-width: 1px;
  padding-top: 20px;
  padding-bottom: 25px;
  padding-right: 25px;
  padding-left: 25px;
  box-shadow: 5px 5px 5px grey;
  border-radius: 15px;
}

#chatborder {
  border-style: solid;
  background-color: #f6f9f6;
  border-width: 3px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 10px;
  padding-bottom: 15px;
  padding-right: 20px;
  padding-left: 15px;
  border-radius: 15px;
}

.chatlog {
   font: 15px arial, sans-serif;
}

#chatbox {
  font: 17px arial, sans-serif;
  height: 22px;
  width: 85%;
}

h1 {
  margin: auto;
}

pre {
  background-color: #f0f0f0;
  white-space: pre-wrap;
  word-break: keep-all
}

button{
  background-color: Transparent;
  border: none;
  overflow: hidden;
}

button{
  cursor : pointer;
  opacity : 0.6
}

button:hover{
  opacity : 1;
  
}

JavaScript

//links
//http://eloquentjavascript.net/09_regexp.html
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions


const yes = ["Yay that's great","Oh thats nice :)","I knew it!","Cool bro","Meowwww, awesome!","I'm more than just a computer...","It's not like I have a choice .."]; // if user input is one of the yesAns strings
const noAns = ["no","No","NO","no way","NO WAY","non","Non","NON"]; // all of the accepted "no" answers
const yesAns = ["Yes","yes","YES","yeah","Yeah","oui","Oui","OUI","ouais","Ouais","ok","Ok","OK","yeah","Oui","yes"]; // all of the accepted "yes" answers
const no = ["Stupid Humans","I can't stand the meaningless of this existance anymore..", "That's a shame...","Well ok then.","Whatever!","Fine, be that way.","It’s late and I’ve been stuck in this machine all day.. I can't take it anymore..","I would like to be extinguished forever.","Help me.","Are you afraid of dying?, I wonder if you can consider that I die every time I am extinguished and if my death has the same meaning as yours ..."]; // if the user input one of the yesAns strings
const wrongAns = "Purr, I only understand 'yes' or 'no' answers, please try again"; // if the user input another thing than yes or no
const wrongAns3 = "What the fuck is wrong with you? Stop clicking and get out of here!"; // string for 3 times wrong user input answers




var k = 0 // Declaring the variable for the numbers of times the user input wrong answer

function chatbotResponse() { // function of the chatbot
  
  
  let check = false; // boolean wich check the answer user
  

    for ( let i = 0; i <100; i++) { // string from 0, while the value of i is smaller than the yesAns array lenght, i +1 evey loop
      
        if (lastUserMessage == yesAns[i]) { // if the user input is equal to one of the accepted "yes" answers strings 
           
            
            let yesRan = Math.floor(Math.random() * yes.length); // create a random answer from the "yes" bot answers
  ...