JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
<div class="team-intro">
  <p>XXXX is a Free to use, Invite your team and get started today</p>
  <button class="team-btn">Invite Now</button>
</div>

<div class="team-invite" style="display:none;">
  <p>Enter emails and we will invite your mates to join you.</p>
  <input type="text" id='invite-emails' name='email' placeholder='enter emails here' size="30">
  <br>
  <!--<div data-value=""  id='style-email' style="padding-left: 12px; padding-right: 12px;">-->
  <p id='subtext'>You can enter multiple emails with comma</p>
</div>

CSS

#invite-emails_tag {
  placeholder: 'asdads';
}

.badtag {
  border: solid 1px red !important;
  background-color: #d24a4a !important;
  color: white !important;
}

.badtag a {
  color: #ad2b2b !important;
}

JavaScript

$('#invite-emails').tagsInput({
  'width': 'auto',
  'delimiter': ',',
  'defaultText': 'Enter email',
  onAddTag: function(item) {
    $($(".tagsinput").get(0)).find(".tag").each(function() {
      if (!ValidateEmail($(this).text().trim().split(/(\s+)/)[0])) {
        $(this).addClass("badtag");
      }
    });
  },
  'onChange': function(item) {
		$($(".tagsinput").get(0)).find(".tag").each(function() {
      if (!ValidateEmail($(this).text().trim().split(/(\s+)/)[0])) {
        $(this).addClass("badtag");
      }
    });
  }

});

$('.team-btn').click(function() {
  $('.team-intro').replaceWith($(".team-invite").clone(true, true).show());

});



function ValidateEmail(mail) {
  if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)) {
    return (true)
  }
  return (false)
}