JSFiddle - React, Tailwind, and code Playground

by Blink

HTML

<div style="text-align: center;">
    <a rel="lightbox" href="images/bingbong_layout.jpg"></a>
    <span style="text-decoration: underline;">
        <img style="width: 100px; height: 91px;" alt="lightbox/images/bingbong_thumb.jpg" src="../../lightbox/images/bingbong_thumb.jpg">
    </span>
    <br>
</div>
        
<!-- 

The above is your code, notice how the <a> is empty. It's supposed to wrap around the image to make it clickable. 

The version below has the <a> wrapping the image so that you can click it.
When I load your website here the thumbnail works fine, but the path to bingbong_layout.jpg doesn't work, so make sure you have the image in the right place
-->
        
 <div style="text-align: center;">
    <a rel="lightbox" href="../../lightbox/images/bingbong_layout.jpg">
    <span style="text-decoration: underline;">
        <img style="width: 100px; height: 91px;" alt="lightbox/images/bingbong_thumb.jpg" src="../../lightbox/images/bingbong_thumb.jpg">
    </span>
    </a>
    <br>
</div>