JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>Freelance Programmer and Web Developer | Louisville, KY</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<style type="text/css">
p, li{
    color: #444;
    font-family: Arial, Sans-serif;
}

body{
    background: #e6e6e6;
}

#container{
    margin-left:auto;
    margin-right:auto;
    width: 1000px;
}

    #main_box1{
        width: 830px;
        height: 250px;
        margin-left:auto;
        margin-right:auto;
        position: relative;
        margin-top: 30px;
    }
        
        /*arrow is 33, so 33 + 'top margin' of .box*/
        #left_arrow{
            position: absolute;
            left: 0px;
            margin: 87px 50px 0 0;
            z-index: 3;
        }
        
        #right_arrow{
            position: absolute;
            right: 0px;
            margin: 87px 0 0 50px;
        }
        
        #main_boxholder{
            margin-left: auto;
            margin-right: auto;
            width: 640px; 
            position: relative;
        }
        
            .box{
                background: grey;
                width: 200px;
                height: 200px;
                margin: 20px 0px 20px 0px;
                position: absolute;
                z-index: 2;
        }
            /*
            switch these to left property and change the body onload
            from rightTest to leftTest
            */
            #box1{
                left: 0px;
            }
        
            #box2{
                left: 220px;
            }
        
            #box3{
                left: 440px;
            }
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body onload="leftTest()">
    <div id="container">
            <div id="main_box1">
                <img id="left_arrow" src="images/layout/left_arrow.png" alt="Left Arrow" />
                <div id="main_boxholder">
                    <a...