JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
$(function() {
    
    
//STEP 1: initialize colorbox group
$(".attachment-gold-thumbnails").colorbox({
    maxWidth:"90%",
    maxHeight:"90%",
    rel: "myGroup"
});

//Thumb updates main image 
$(".wpcart_gallery a").click(function() {
    var thumb_img_link = $(this),
        thumb_img = thumb_img_link.children().first(),
        product_image = $("#product_image_736"),
        product_image_link = product_image.parent();

    //STEP 2: update data-thumb attribute
    product_image_link.attr("data-thumb", "#" + thumb_img.attr("id"));
    product_image.attr({
        src: thumb_img.attr("href"),
        alt: thumb_img.attr("src"),
        title: thumb_img.attr("src")
    });
    
    return false;
});

//Main image opens colorbox
$(".preview_link").click(function() {
    var thumb_img_id = $(this).attr("data-thumb");
    
    //STEP 3
    $(thumb_img_id).colorbox({open:true});
    
    return false;
});


});

</script>

<style>
img {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
</style>

<body>
    <a class="preview_link" style="text-decoration:none;text-align:center;display:block;margin-top:10%" data-thumb="#thumb1" rel="Teardrop Druzy Amethyst Ring">
        <img id="product_image_736" class="product_image colorbox-736" height="300" src="http://images.picturesdepot.com/photo/s/scenery_wallpaper,_wallpaper-209423.jpg" title="Teardrop Druzy Amethyst Ring" alt="Teardrop Druzy Amethyst Ring">
        <br>
        
        <div style="text-align:center;...