JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<p>Plotly Help...</p>
<div class="container">
   <div class="panel panel-default">
      <div class="panel-heading text-center">
          <i class="fa fa-info fa-fw"></i> Repeat testing
      </div>
       <div class="panel-body">
         <!-- Plotly -->
         <div id="myDiv" style="width: 480px; height: 400px;">
       </div>
   </div>
</div>

JavaScript

var trace1 = {
  x: [1, 2, 3, 4, 5],
  y: [1, 6, 3, 6, 1],
  mode: 'markers+text',
  type: 'scatter',
  name: 'A',
  marker: { size: 10 }
};

var trace2 = {
  x: [1.5, 2.5, 3.5, 4.5, 5.5],
  y: [4, 1, 7, 1, 4],
  mode: 'markers+text',
  type: 'scatter',
  name: 'B',
  marker: { size: 10 }
};

var data = [ trace1, trace2 ];

var layout = {
  xaxis: {
    range: [ 0.75, 5.25 ]
  },
  yaxis: {
    range: [0, 8]
  },
  legend: {
    y: 0.5,
    yref: 'paper',
    font: {
      family: 'Times New Roman',
      size: 20,
      color: 'black',
    }
  },
  title:'Simple Scatter'
};

Plotly.newPlot('myDiv', data, layout, {displayModeBar: true});