JSFiddle - React, Tailwind, and code Playground

by hobobne

HTML

<div id="hero_wrapper">
    <div id="hero_prev">&lt;</div>
    <div id="hero_next">&gt;</div>
    <div id="hero_images"></div>
</div>

CSS

#hero_wrapper {float: left; border: 1px dotted blue; padding: 0px 60px;}
    /* Note that almost everything is being dependent on the #hero_images and nothing else */
    #hero_images {border: 1px dotted red; width: 500px; height: 300px;}
    #hero_prev,
    #hero_next {position: relative; margin-top: 110px; padding: 20px; font-size: 30px; font-weight: bold; border: 1px dotted green; /* #hreo_next special: */ float: left; margin-left: -60px;}
    #hero_next {float: right; margin-right: -60px;}