JSFiddle - React, Tailwind, and code Playground

by karinafotocollectiondemo

HTML

<ul id="Imagetip">
<li><a href="https://lh6.googleusercontent.com/-03QKsJUkcV8/TY2ly3UVyhI/AAAAAAAAAew/fW3PWnO7aZM/s1600/1.jpg " class="preview" title="Lake and a mountain">
<img width="100px" height="75px" src="https://lh6.googleusercontent.com/-03QKsJUkcV8/TY2ly3UVyhI/AAAAAAAAAew/fW3PWnO7aZM/s1600/1.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://lh5.googleusercontent.com/--YBF3BHoimI/TY2l2z90BNI/AAAAAAAAAe4/TT_n1DYdaUs/s1600/2.jpg" class="preview" title="Fly fishing"><img width="100px" height="75px" src="https://lh5.googleusercontent.com/--YBF3BHoimI/TY2l2z90BNI/AAAAAAAAAe4/TT_n1DYdaUs/s1600/2.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://lh3.googleusercontent.com/-TemuZjaX5YI/TY2l78o61xI/AAAAAAAAAfA/hrs2T9Px7Q8/s1600/3.jpg" class="preview" title="Autumn"><img width="100px" height="75px" src="https://lh3.googleusercontent.com/-TemuZjaX5YI/TY2l78o61xI/AAAAAAAAAfA/hrs2T9Px7Q8/s1600/3.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://lh3.googleusercontent.com/-M1XDI2YFVTw/TY2mCmsHraI/AAAAAAAAAfI/dsEPh29oUBE/s1600/4.jpg" class="preview" title="Skiing on a mountain"><img  width="100px" height="75px" src="https://lh3.googleusercontent.com/-M1XDI2YFVTw/TY2mCmsHraI/AAAAAAAAAfI/dsEPh29oUBE/s1600/4.jpg" alt="gallery thumbnail" /></a>
</li>
    </ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"  type="text/javascript"></script> <script  src="http://kangdadang.googlecode.com/files/main2.js"  type="text/javascript"></script>

CSS

/* --------------- Easiest Tooltip and Image Preview with jQuery  ---------------------------------- */ #Imagetip{     margin:0;      padding:0; } #Imagetip li{     list-style:none;     float:left;      display:inline;     margin-right:10px; }    /*  */  #preview{      position:absolute;     border:1px solid #ccc;     background:#333;      padding:5px;     display:none;     color:#fff;     }