JSFiddle - React, Tailwind, and code Playground

by Christopher Pearson

HTML

<div class="listing-template">
    <div class="gallery">
        
<h3>Simple HTML Photo Gallery with JavaScript</h3>

        <div class="thumbnails">
            <img onmouseover="preview.src=img1.src" name="img1" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-01-m_zps3e6ef52c.jpg" alt="" />
            <img onmouseover="preview.src=img2.src" name="img2" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-02-m_zps96e3dcab.jpg" alt="" />
            <img onmouseover="preview.src=img3.src" name="img3" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-03-m_zps8bb91beb.jpg" alt="" />
            <img onmouseover="preview.src=img4.src" name="img4" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-04-m_zps595b8594.jpg" alt="" />
            <img onmouseover="preview.src=img5.src" name="img5" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-05-m_zps62bb858c.jpg" alt="" />
            <img onmouseover="preview.src=img6.src" name="img6" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-06-m_zpsd938087b.jpg" alt="" /><br>
        </div>
        <div class="preview" align="center">
            <img name="preview" src="http://placehold.it/400" alt="" />
        </div>
    </div>
    <!-- Close the gallery div -->
</div>

CSS

.listing-template {
    background: #7496a7;
    width:750px;
    margin-left:auto;
    margin-right:auto;
}
.gallery {
    /* border: 1px solid #333; */
    padding: 5px;
    width: 450px;
    text-align:center;
}
.thumbnails img {
    height: 80px;
    max-width:55px;
    border: 1px solid #D7E3E9;
    padding: 1px;
    margin: 0 5px 5px 0;
}
.thumbnails img:hover {
    border: 1px solid #2B596F;
    cursor:pointer;
}
.preview img {
    border: 4px solid #D7E3E9;
    padding: 1px;
    max-height: 600px;
    max-width: 400px;
}