JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="stage">
  <div class="content-block" id="project-from">
    <h2 class="title"><span>Block Title</span></h2>
    <p>Sed hendrerit. Nullam cursus lacinia erat.</p>
    <p>Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Duis vel nibh at velit scelerisque suscipit. Nam at tortor in tellus interdum sagittis. Vestibulum dapibus nunc ac augue.</p>
    <p>Quisque malesuada placerat nisl. Nullam accumsan lorem in dui.</p>
    <p>Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Pellentesque auctor neque nec urna.</p>
  </div>
  <div class="content-block" id="project-to">
    <h2 class="title"><span>Block Title</span></h2>
    <p>In ut quam vitae odio lacinia tincidunt. Morbi vestibulum volutpat enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Proin faucibus arcu quis ante.</p>
  </div>
</div>

<p>Phasellus dolor. Praesent venenatis metus at tortor pulvinar varius. Phasellus gravida semper nisi. Ut leo. Suspendisse eu ligula.</p>
<p>Aliquam eu nunc. Nam adipiscing. Fusce ac felis sit amet ligula pharetra condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. In ut quam vitae odio lacinia tincidunt.</p>
<p>Sed fringilla mauris sit amet nibh. In ut quam vitae odio lacinia tincidunt. Pellentesque dapibus hendrerit tortor. Sed fringilla mauris sit amet nibh. Praesent nec nisl a purus blandit viverra.</p>

<p>Phasellus dolor. Praesent venenatis metus at tortor pulvinar varius. Phasellus gravida semper nisi. Ut leo. Suspendisse eu ligula.</p>
<p>Aliquam eu nunc. Nam adipiscing. Fusce ac felis sit amet ligula pharetra condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. In ut quam vitae odio lacinia...

SCSS

@import url(https://fonts.googleapis.com/css?family=PT+Serif|Montserrat:700);

html,body{
  margin: 0;
  position: relative;
  min-height: 100%;
  font-family: 'PT Serif', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #333;
  background-color: #BFE8CF;
  line-height: 1.4;
}

body{
  margin: 2em;
}

*,
*:before,
*:after{
  box-sizing: border-box;
}

p{
  margin: 0 0 1em;
  
  &:last-child{
    margin-bottom: 0;
  }
  
}

h1,h2,h3,h4,h5{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 0 0 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stage{
  position: relative;
  margin-bottom: 2em;
  
  & > * + *{
    margin-top: 2em;
  }
  
}

.content-block{
  background-color: #A77BAA;
  color: #FFF;
  padding: 1em;
  border-bottom: 0.25em solid #B3B2BD;
  position: relative;
  
  h1,h2,h3,h4,h5{
    text-align: center;
    
    &:before{
      content: '';
      display: block;
      border-bottom: 1px solid currentColor;
      opacity: 0.25;
      position: relative;
      z-index: 0;
      top: 0.72em;
    }
    
    span{
      background-color: #A77BAA;
      padding: 0 0.5em;
      position: relative;
    }
    
  }
  
}

@media only screen and (min-width: 800px){
  
  .stage{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    
    & > * + *{
      margin-top: 0;
      margin-left: 3em;
    }
    
  }
  
  .content-block{
    max-width: 450px;
  }
  
}

JavaScript

function _project(options){
	var conf,
  		_getAngle,
  		_polygonCoords,
      _pointCalc,
      _renderProjection,
      _bindEvt,
      _process,
      POINT_RANGES,
      RAD2DEG_MOD;
      
  RAD2DEG_MOD = 180 / Math.PI;
  POINT_RANGES = [
  	[[-90, 0], [90, 180]],
  	[[-180, -90], [0, 90]],
  	[[-90, 0], [90, 180]],
  	[[-180, -90], [0, 90]]
  ];
    
  /**
   * Merge options
   */
  conf = {
    from: null,
    to: null,
    zIndex: 0,
    fill: '#eee'
  }
  for(prop in options){
    conf[prop] = options[prop];
  }  
  
  _bindEvt = function(){
  	window.addEventListener('resize', _process);
  	document.addEventListener('scroll', _process);
  }
  
  _process = function(){
    console.log(_polygonCoords(_pointCalc()));
  }
  
  _pointCalc = function(){
  	var FROM,
    		FROM_RECT,
        TO,
        TO_RECT;
        
    FROM_RECT = conf.from.getBoundingClientRect();
    FROM = [
      [FROM_RECT.left, FROM_RECT.top],
      [(FROM_RECT.left + FROM_RECT.width), FROM_RECT.top],
      [(FROM_RECT.left + FROM_RECT.width), (FROM_RECT.top + FROM_RECT.height)],
      [FROM_RECT.left, (FROM_RECT.top + FROM_RECT.height)]
    ];
    
    TO_RECT = conf.to.getBoundingClientRect();
    TO = [
      [TO_RECT.left, TO_RECT.top],
      [(TO_RECT.left + TO_RECT.width), TO_RECT.top],
      [(TO_RECT.left + TO_RECT.width), (TO_RECT.top + TO_RECT.height)],
      [TO_RECT.left, (TO_RECT.top + TO_RECT.height)]
    ];
    
    return {
    	from: FROM,
      to: TO
    }
  }
  
  _polygonCoords = function(points){
  	var transceivers = [],
    		xcoords = [],
    		ycoords = [];
    
    for(var i = 0; i < points.from.length; i++){
    	var angle = _getAngle(points.from[i], points.to[i]);
      if(
      	(angle >= POINT_RANGES[i][0][0] && angle < POINT_RANGES[i][0][1]) ||
        (angle >= POINT_RANGES[i][1][0] && angle < POINT_RANGES[i][1][1])
      ){
      	transceivers[transceivers.length] = i;
      }
    }
    console.log(transceivers);
    xcoords = [
   ...