JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
<link rel="stylesheet" href="ttps://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css">
<div id='mapdiv'></div>

CSS

#mapdiv {
    width: 650px;
    height: 600px;
}

JavaScript

const raster = new ol.layer.Tile({
				source: new ol.source.OSM(),
			});

			const source = new ol.source.Vector();
			const p1 = [-12500000, 6500000];
			const p2 = [-10000000, 4000000];
      const line = new ol.geom.LineString([p1, p2]);
			const feature = new ol.Feature({
				geometry: line,
				name: "Line"
			});
			source.addFeature(feature);

			const vector = new ol.layer.Vector({
  				source: source,
			});

			const map = new ol.Map({
				layers: [raster, vector],
				target: 'mapdiv',
				view: new ol.View({
					center: [-11000000, 4600000],
					zoom: 4,
				}),
			});