JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/lines/LineSegmentsGeometry.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/lines/LineGeometry.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/lines/LineSegments2.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/lines/Line2.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/lines/LineMaterial.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;
var geometry, material, mesh;
var controls;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 100 );
    camera.position.z = 10;
    scene = new THREE.Scene();
    controls = new THREE.OrbitControls( camera );
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    const line = getThickLine([[new THREE.Vector3(-10,0,-1), new THREE.Vector3(10, 1, -1)]], 2);
    scene.add( line );
    
    const pointsArray = getPointsArray(5);
  	const line2 = getThickLine(pointsArray, 4);
    scene.add( line2 );
    
  	const line3 = getThickLine(pointsArray, 2);
    line3.position.set(-5, 0, 0);
    scene.add( line3 );
}

function getPointsArray(howMany) {
  return Array(howMany).fill().map((_, i) => [new THREE.Vector3(i, i, 0), new THREE.Vector3(i, i/Math.random(), 0)]);
}

function getThickLine( pointsArray, linewidth ) {

		const segments = 10;
    const buildGeometry = new THREE.Geometry();
    
    pointsArray.forEach(pointAB => {      
      const tempGeometry = new THREE.Geometry();
  		const curve = new THREE.Curve();
    	curve.getPoint = greatCircleFunction( pointAB[0], pointAB[1] );
			tempGeometry.vertices = curve.getPoints( segments );
      buildGeometry.merge( tempGeometry );
    });
    
    const numberVertices = buildGeometry.vertices.length;
		const color = new THREE.Color();
		const positions = new Float32Array( numberVertices * 3 ); // 3 vertices per point
		const colors = new Float32Array( numberVertices * 3 );

		buildGeometry.vertices.forEach((vertice, i) => {
		    positions[ i * 3 ] = vertice.x;
		    positions[ i * 3 + 1 ] = vertice.y;
		    positions[ i * 3 + 2 ] = vertice.z;

        color.setHex ( "0xFFAAFF" );
        colors[ i * 3 ] = color.r;
        colors[ i * 3 + 1 ] = color.g;
        colors[ i * 3 + 2...