JSFiddle - React, Tailwind, and code Playground

by Santharam N R

HTML

<div id = "overlay"></div>
    <div id = "frame"></div>
    <img src = "" alt = ""/>

<div id = "work">
        <h1>Here is my portfolio</h1>
        <p>This has some paragraphes in this</p>
        <ul id = "portfolio">
            <li><img src = "images/nxfwXYK.jpg" alt = "img"/></li>
            <li><img src = "images/demo.jpg" alt = "img"/></li>
            <li><img src = "images/demo.jpg" alt = "img"/></li>
            <li><img src = "images/demo.jpg" alt = "img"/></li>
        </ul>
    </div>

JavaScript

$("#portfolio img").click(function(){
        var src = $(this).attr("src");
        $("#frame img").attr("src", src);
        $("#frame").fadeIn();
        $("#overlay").fadeIn();
    });