JSFiddle - React, Tailwind, and code Playground

by Daniel Brose

HTML

<!-- <div id="hcontainer" style="width: 600px;"> -->
    <div id="inner_container" style="overflow: auto; width: 2500px;">
        
        <div class="image-wrap">
            <img src="1.jpg" width="400px" height="200px" /><span>My new_1 text</span>
        </div>
        <div class="image-wrap">
            <img src="2.jpg" width="400px" height="200px" /><span>My new_2 text</span>

        </div>
        <div class="image-wrap">
            <img src="3.jpg" width="400px" height="200px" /><span>My new_3 text</span>

        </div>
        <div class="image-wrap">
            <img src="4.jpg" width="400px" height="200px" /><span>My new_4 text</span>

        </div>
        <div class="image-wrap">
            <img src="5.jpg" width="400px" height="200px" /><span>My new_5 text</span>

        </div>
        <div class="image-wrap">
            <img src="6.jpg" width="400px" height="200px" /><span>My new_6 text</span>

        </div>
    </div>
<!-- </div> -->

CSS

.image-wrap { 
   position: relative; 
   width: 400px; /* for IE 6 */
    /* float:left; */
    display:inline-block;
}

.image-wrap > span { 
   position: absolute; 
   /*
    margin-top: -175px; 
   margin-left: 10px; 
    */
   top: 175px; 
   left: 10px; 
   width: 100%; 
   display:block;
    z-index:99;
}