JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<form>
                            <div class="form-group">
                                <input type="email" class="form-control" placeholder="Email" autofocus required>
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Username">
                            </div>
                            <div class="form-group form-row">
                                <div class="col">
                                    <input type="password" class="form-control" placeholder="Password">
                                </div>
                                <div class="col">
                                    <input type="password" class="form-control" placeholder="Confirm Password">
                                </div>

                                <div class="sign__forms__password__strength">
                                    <div class="strength__meter__fill">

                                    </div>
                                </div>


                            </div>
                        </form>

SCSS

.sign__forms__password__strength {
    position: relative;
    height: 3px;
    background: #DDD;
    margin: 10px auto 20px;
    border-radius: 3px;
    width: 100%;

    &::before,
    &::after {
        content: '';
        height: inherit;
        background: transparent;
        display: block;
        border-color: #FFF;
        border-style: solid;
        border-width: 0 5px 0 5px;
        position: absolute;
        width: 80px;
        z-index: 10;
    }
    
    &::before{
      left: 70px;
    }
    
    &::after {
      right: 70px;
    }

    .strength__meter__fill {
        background: transparent;
        height: inherit;
        position: absolute;
        width: 0;
        border-radius: inherit;
        transition: width 0.5s ease-in-out, background 0.25s;
    }
}