JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="left">fds gsdf</div>
    <div class="line"></div>
    <div class="right">fds gsdf</div>
    <div class="clear"></div>
</div>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    outline: none !important;
}
* {
    -webkit-text-size-adjust: auto !important;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
a {
    border: none;
    outline: none;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input, textarea {
    outline: none !important;
}
:focus {
    outline-color: transparent;
    outline-style: none;
}
.clear {
    clear: both;
}
body {
    background: url(../images/pattern.jpg) repeat;
    margin: 0;
    padding: 0;
}
.container {
    background: rgba(0, 0, 0, 0.42);
    width: 1024px;
    margin: 0 auto;
}
.left {
    float: left;
    width: 500px;
}
.right {
    float: left;
    width: 500px;
}
.line {
    float: left;
    width: 24px;
    position: relative;
}
.line .lines_type {
    width: 14px;
    height: 150px;
    background: orange;
    margin: 0 0 0 5px;
    position: relative;
}
.line .arrowLeft {
    border-bottom: 7px solid transparent;
    border-left: 12px solid orange;
    border-top: 7px solid transparent;
    content:"";
    height: 0;
    margin-right: -4px;
    margin-top:70px;
   ...

JavaScript

var createLines = function () {


    for (var i = 0; i <= 10; i++) {
        var colors = ['#5B4F35', '#D1652F', '#B1C482', '#6DBACC', '#EAB83D'];
        var random_color = colors[Math.floor(Math.random() * colors.length)];


        $(".line").append("<div class='arrowLeft' style='border-left:12px solid " + random_color + ";'></div><div class='arrowRight' style='border-right:12px solid " + random_color + ";'></div><div class='lines_type' style='background:" + random_color + ";'></div>");
    }
}

createLines();