JSFiddle - React, Tailwind, and code Playground

by trivender

HTML

<div class="flowChartContainer">
    <div class="arrow"></div>
    <div id="flowChartBox1" class="flowChartBox"><span class="flowChartText">Text</span><span class="spanPercentInput"><input class = "percentInput"></input>%</span>

    </div>
    <div class="arrow"></div>
    <div id="flowChartBox2" class="flowChartBox"><span class="flowChartText">Text</span><span class="spanPercentInput"><input class = "percentInput"></input>%</span>

    </div>
    <div class="arrow"></div>
    <div id="flowChartBox3" class="flowChartBox"><span class="flowChartText">Text</span><span class="spanPercentInput"><input class = "percentInput"></input>%</span>

    </div>
    <div class="arrow"></div>
    <div id="flowChartBox4" class="flowChartBox"><span class="flowChartText">Text</span><span class="spanPercentInput"><input class = "percentInput"></input>%</span>

    </div>
    <div class="arrow"></div>
    <div id="flowChartBox5" class="flowChartBox"><span class="flowChartText">Text</span><span class="spanPercentInput"><input class = "percentInput"></input>%</span>

    </div>
    <div class="arrow"></div>
    <div id="flowChartBox6" class="flowChartBox"><span class="flowChartText">Text</span><span class="spanPercentInput"><input class = "percentInput"></input>%</span>

    </div>
    <div class="arrow"></div>
    <div id="flowChartBox7" class="flowChartBox"><span class="flowChartText">Text</span><span class="spanPercentInput"><input class = "percentInput"></input>%</span>

    </div>
    <div>

CSS

div.flowChartContainer {
    width: 450px;
    margin: auto;
}
div.arrow {
    height: 80px;
    background: url(http://biinfotech.com/confirmit/Jobs/misMultiMedia/flowArrow.jpg) no-repeat;
    background-position:center;
}
div.flowChartBox {
    height: 40px;
    border: 1px solid;
}
input.percentInput {
    width: 30px;
}
span.spanPercentInput {
    float: right;
    display: inline-block;
    padding: 9px 0px;
}