JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<div class="ac" id="ac">
  <div class="info" id="info">
  Hover over a pin for more information.
  </div>
</div>

CSS

div.ac{
  background-image: url(http://i.imgur.com/2yChkJd.png);
  width: 1608px;
  height: 1316px;
}
div.ac .info {
  color:#000;
  position:relative;
  left: 310px;
  top:354px;
  width: 500px;
  height: 500px;
  border: 4px double rgba(0,0,0,1);
  padding: 10px;
  font-size: 2em;
  background-color: rgba(0,0,0,0.2);
}
span.pin {
  width: 28px;
  height: 28px;
  background-color: rgba(0,0,0,0.3);
  position:absolute;
  z-index: 10;
  border-radius: 180px;
  transition: background-color 0.5s;
}
body {
  margin:0px;
  padding: 0px;
  zoom: 0.75; 
}

JavaScript

var ac = document.getElementById("ac");
var info = document.getElementById("info");
var ds = {
  "1": { "Symbol":"DVDD0", "IO":"—", "x":"", "Description":"Digital power supply"},
  "2": { "Symbol":"XRST", "IO":"I", "x":"", "Description":"System reset. Reset when low."},
  "3": { "Symbol":"MUTE", "IO":"I", "x":"", "Description":"Mute input (low: off, high: on)"},
  "4": { "Symbol":"DATA", "IO":"I", "x":"", "Description":"Serial data input from CPU"},
  "5": { "Symbol":"XLAT", "IO":"I", "x":"", "Description":"Latch input from CPU. Serial data is latched at the falling edge."},
  "6": { "Symbol":"CLOK", "IO":"I", "x":"", "Description":"Serial data transfer clock input from CPU."},
  "7": { "Symbol":"SENS", "IO":"O", "x":"1, 0", "Description":"SENS output to CPU."},
  "8": { "Symbol":"SCLK", "IO":"I", "x":"", "Description":"SENS serial data readout clock input."},
  "9": { "Symbol":"ATSK", "IO":"I/O", "x":"1, 0", "Description":"Anti-shock input/output."},
  "10": { "Symbol":"WFCK", "IO":"O", "x":"1, 0", "Description":"WFCK output."},
  "11": { "Symbol":"XUGF", "IO":"O", "x":"1, 0", "Description":"XUGF output. MNT0 or RFCK is output by switching with the command."},
  "12": { "Symbol":"XPCK", "IO":"O", "x":"1, 0", "Description":"XPCK output. MNT1 is output by switching with the command"},
  "13": { "Symbol":"GFS", "IO":"O", "x":"1, 0", "Description":"GFS output. MNT2 or XROF is output by switching with the command."},
  "14": { "Symbol":"C2PO", "IO":"O", "x":"1, 0", "Description":"G2PO output. MNT3 or GTOP is output by switching with the command."},
  "15": { "Symbol":"SCOR", "IO":"O", "x":"1, 0", "Description":"Outputs a high signal when either subcode sync S0 or S1 is detected."},
  "16": { "Symbol":"C4M", "IO":"O", "x":"1, 0", "Description":"4.2336MHz output. 1/4 frequency division output for V16M in CAV-W mode\nor variable pitch mode."},
  "17": { "Symbol":"WDCK", "IO":"O", "x":"1, 0", "Description":"Word clock output. f = 2Fs. GRSCOR is output by the command...