JSFiddle - React, Tailwind, and code Playground

by Muhammad Azeem

HTML

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

        </div>
        <div class="image">
            <img src="2.jpg" width="400px" height="200px" /><span>My new_2 text</span>

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

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

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

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

        </div>
    </div>
</div>

CSS

.image {
    position: relative;
    width: 100%;
    /* for IE 6 */
}
.image span {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
}