JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://nillabean.com/images/1140.css">
<div class="container">                        
            <div class="row">
                    
                    <ol class="flexslider-nav">
                        <li class="threecol">
                            <img id="discover" class="btn-workflow" src="http://nillabean.com/images/circle-225.png" alt="#" />
                        </li>
                        <li class="threecol">
                            <img id="design" class="btn-workflow" src="http://nillabean.com/images/circle-225.png" alt="#" />
                        </li>
                        <li class="threecol">
                            <img id="develop" class="btn-workflow" src="http://nillabean.com/images/circle-225.png" alt="#" />
                        </li>
                        <li class="threecol last">
                            <img id="deploy" class="btn-workflow" src="http://nillabean.com/images/circle-225.png" alt="#" />
                        </li>                
                    </ol>
                
                </div><!--end row-->
                
                <!-- WORKFLOW: DESC. SLIDER -->
                <div class="row">
                
                    <div class="twelvecol last">
                    
                         <div class="arrow-wrap">
                            <div class="arrow"></div>
                         </div><!--end arrow-wrap -->
                                        
                        <div class="flexslider">
                            <ul class="slides">
                                <li>
                                    <p>Test Content</p>
                                </li>
                                <li>
                                    <p>Test Content</p>
                                </li>
                                <li>
                                    <p>Test Content</p>
                               ...

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    
    .container p {
    color: #fff;
    line-height: 100px;
    background: #000;
    text-align: center;
    margin: 20px 0 0 0;
    }
    
    .flexslider p {
        margin-top:0px;
        background:transparent;
        color:#000000;
    }
    
    .flexslider {
        border-bottom:1px #000 solid;
        border-left:1px #000 solid;
        border-right:1px #000 solid;
    }
    
    h1, h2, h3 {
        text-align:center;
    }
    
    .flexslider-nav li img {
        display:block;
        margin:0px auto;
    }
    
    .arrow {
      position:absolute;
      background:transparent url(http://nillabean.com/images/arrow.png) repeat-x bottom center;
      width:2200px;
      height:40px;
    }
    
    .arrow-wrap {
        position:relative;       
        height:35px;
        border:1px #C00 solid;
    }

JavaScript

var start_pos = $("#discover").offset().left + $("#discover").parent().width()/2 - $(".arrow").width()/2;
        
        $(".arrow").css("left", start_pos);
        
        $(".btn-workflow").click(function(event){
            var x = $(this).offset().left;
            
            var img_width = $(this).parent().width();
            var arrow_width = $(".arrow").width();
          
            var arrow_x = x + img_width/2 - arrow_width/2 - ($(window).width() * .030);
            
            $(".arrow").animate({
                "left": arrow_x
            }, "slow");
        });