JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<div class="box pos type-rectangle" id="p-13-box-102" style="width: 100px; height: 100px;">
    <style>#p-13-box-102 .inner-rec { border: 20px solid #1E4072; border-radius: 0px; }</style>
    <div class="inner-rec"></div>
</div>

CSS

.type-rectangle .inner-rec {
	width: 100%; height: 100%;
	
}

JavaScript

$('#p-13-box-102').click(function(){
    
    var t = new TimelineMax({
    })
    
     t.add(TweenMax.to($("#p-13-box-102 .inner-rec"), 1, { css:{'borderTopColor': '#ff0000','borderBottomColor': '#ff0000','borderLeftColor': '#ff0000','borderRightColor': '#ff0000'}}), 1);

});