JSFiddle - React, Tailwind, and code Playground

HTML

// register
				$STRING .= $b_f.'<a href="" data-toggle="modal" data-target="#myModalJoin" class="ua6 '.$linkclass.'">'.$CORE->_e(array('head','6','flag_link')).'</a>'.$b_a;

				?> <!-- Button trigger modal -->
<!-- Modal -->
<div class="modal modal-backdrop fade" id="myModalJoin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-contentJoin">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><span class="glyphicon glyphicon-remove-sign"></span></button>
        <h2 class="modal-title join" id="myModalLabel">XXXXXXXXXXXXXXXXXXXXXXXXX</h2>
        <p class="joinText">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> 
        	<p class="moreJoinText">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
      </div>
      <div class="modal-body">
      	<?php if (!defined('THEME_VERSION')) {	header('HTTP/1.0 403 Forbidden'); exit; } ?>

		<?php global $CORE, $errortext; ?>

		<?php get_header($CORE->pageswitch()); ?>

		<?php if(get_option('users_can_register') == 1 || defined('WLT_DEMOMODE')){ ?><?php } ?>

		<?php if(strlen($errortext) > 1){ ?>
     <div class="bs-callout bs-callout-danger">
      <button type="button" class="close" data-dismiss="alert">x</button>
      <?php echo $errortext; ?>
    </div>
    <?php } ?>

    <div class="socialConnect">
    <button class="btn btn-facebook col-md-4 joinF">Connect with <i class="fa fa-facebook"></i></button>
    <button class="btn btn-twitter col-md-4 joinT">Connect with <i class="fa fa-twitter"></i></button>
    <button class="btn btn-google-plus col-md-4 joinG">Connect with <i class="fa fa-google-plus"></i></button>
    <br />
    <hr class="orConnect"></hr>
    <span class="or">or</span>
<hr class="orConnect1"></hr>
<br />
</div>

    <?php echo stripslashes(do_shortcode($GLOBALS['CORE_THEME']['register_text'])); ?>

    <form class="registerform"...