JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
CSS
#result p {
font-family:"Lucida Console", Monaco, monospace;
line-height: 1em;
font-size: 12px;
}
JavaScript
jQuery(document).ready(function ($) {
$.ajax({
url: "http://reqr.es/api/unknown/2",
cache: false,
dataType: "json",
success: function (response) {
var data = response.data;
var result =
"<div id='result'>" +
"<p>Product Id : " + data.id + "</p>" +
"<p>Product Name : " + data.name + "</p>" +
"<p>Pantone : " + data.pantone_value + "</p>" +
"<p>Year : " + data.year + "</p>" +
"</div>";
$.fancybox(result, {
type: "html"
}); // show formated response
}
})
}); // ready