JSFiddle - React, Tailwind, and code Playground

by spencer1997

HTML

<section class="hex-stuff content">
    <div class="container">
        <ol class="even" data-segment_id="1">
            <li id="s1-1" data-lane_id="1">
            </li>
        </ol>
        <ol class="odd" data-segment_id="2">
            <!-- second row, left -->
            <li id="s2-1" data-lane_id="2-1">
            </li>
            <!-- second row, middle -->
            <li class="empty mid">
            </li>
            <!-- second row, right -->
            <li id="s2-2" data-lane_id="2-2">
        
            </li>
        </ol >
        <ol class="even" data-segment_id="3">
            <!-- third row, left -->
            <li id="s3-1" data-lane_id="3-1">
   
            </li>
            <!-- second third, right -->
            <li id="s3-2" data-lane_id="3-2">
    
            </li>
        </ol>
  </div>
</section>

SCSS

$hex-size: 3em; // Only change size here. Best used with sizes from 5em - 10em.

/* ----------------------------------------- */
.hex-stuff {
  max-width: 700px;
  width: 100%;
}
.hex-stuff .container { 
  line-height: 1.3;
  width: 100%;
}
ol {
  padding: 0 0;
  display: flex;
  flex-wrap: wrap;
}
ol.even {
  position: relative;
}
#s1-1 {
  margin: 0 auto !important;
}
ol.odd {
  position: relative;
}
li,.hex {
  position: relative;
  margin: 1em auto;
  width: $hex-size; height: ($hex-size * 1.7);
  border-radius: 1em/.5em;
  background: #ccc;
  display: inline-block;
  //margin-right: ($hex-size / 1.30);
}

JavaScript

window.addEventListener('DOMContentLoaded', (event) => {
                connect(
                    getId("s1-1"),
                    getId("s2-2"),
                    "red",
                    1
                );
                connect(
                    getId("s2-2"),
                    getId("s3-2"),
                    "blue",
                    2
                );
                connect(
                    getId("s3-2"),
                    getId("s3-1"),
                    "black",
                    5
                );
                connect(
                    getId("s3-1"),
                    getId("s2-1"),
                    "red",
                    2
                );
            });


            function getId(id) {
                const el = document.getElementById(id);
                if(!el) throw Error(`cannot find #${id}`);
                return el;
            }

            function getOffset( el ) {
                var rect = el.getBoundingClientRect();
                return {
                    left: rect.left + window.pageXOffset,
                    top: rect.top + window.pageYOffset,
                    width: rect.width || el.offsetWidth,
                    height: rect.height || el.offsetHeight
                };
            }

            function connect(div1, div2, color, thickness) { // draw a line connecting elements
                var off1 = getOffset(div1);
                var off2 = getOffset(div2);

                // bottom right
                var x1 = off1.left + off1.width / 2;
                //var x1 = off1.left + off1.width;
                var y1 = off1.top + off1.height / 2;
                //var y1 = off1.top + off1.height;
                // top right
                //var x2 = off2.left + off2.width;
                var x2 = off2.left + off2.width / 2;
                //var y2 = off2.top;
                var y2 = off2.top + off2.height / 2;
                // distance
               ...