JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
   



<!--Bottom Row-->
<div class="w3-cell-row">
    <div class="w3-red w3-cell w3-third">
        <p>Bottom Left Corner</p>
    </div>
    <div class="w3-purple w3-cell w3-third">
        <img class="mySlides2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqnGbmwBv__oIFxVyZ4oMJrr-oJMjD_LIg3PR4RVebFsRJ9C01" style="width:100%">
        <img class="mySlides2" src="http://utkanos.net/_pu/4/89984867.jpg" style="width:100%">
        <img class="mySlides2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpUkRP7zjKQt1PEdPByz-pVZkzQmxlXuPik4Fjsdu8GiNQqzfO" style="width:100%">
    </div>
    <div class="w3-amber w3-cell w3-third">
        <p>Bottom Right Corner</p>
    </div>
</div>

JavaScript

var myIndex1 = 0;
carousel1();

function carousel1() {
    var i;
    var x = document.getElementsByClassName("mySlides2");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex1++;
    if (myIndex1 > x.length) {myIndex1 = 1}    
    x[myIndex1-1].style.display = "block";  

    setTimeout(carousel1, 4000);// Change image every 2 seconds
}