JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<form action="~/Home/Register" method="post" data-abide>
    <div class="row">
        <div class="twelve columns">
            <label class="myColor"><span class="has-tip" data-tooltip aria-haspopup="true" title="Password must contain at least 1 uppercase, 1 lower case, 1 number, and 1 special character">Password</span>

                <input type="password" name="password" id="password" placeholder="Password..." pattern="password" required /> <small class="error">Password must contain at least 1 uppercase, 1 lower case, 1 number, 1 special character and be at least 8 characters.</small>

            </label>
        </div>
    </div>
    <!--Password-->
    <div class="text-center">
        <button type="submit" class="text-center myButton registerButton">Submit</button>
    </div>
</form>

JavaScript

$(document).foundation();

$(document).foundation({
    abide: {
        patterns: {
            password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,15}$/
        }
    }
});