JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow">#slideshow

    <div id="pictures" style="background: #ccc; height: 200px; width: 100%;">#pictures
    
    
    <div class="subscribe" style="background: #f00; height: 60px; width: 60px;">.subscribe</div>
    </div>
    
    

    <div id="menu" style="background: #00f; height: 60px; width: 60px;">#menu</div>
</div>

CSS

#slideshow * {
    margin: 0;
    padding: 0;
}
#slideshow {
    position: relative;
    padding: 14px 0 15px;
    /*width: 926px;*/
    height: 335px;
}
#slideshow #pictures {
    background: url('images/bg.jpg');
    /*width: 926px;*/
    height: 335px;
    left: 0;
    overflow: hidden;
    z-index: 1;
    position: absolute;
}
#slideshow #pictures li {
    display: block;
    position: absolute;
    top: 0;
    /*width: 926px;*/
}
#slideshow #pictures li img {
    display: block;
    position: relative;
    bottom: 0;
}
#slideshow #menu {
    list-style-type: none;
    right: 0;
    padding-top: 290px;
padding-right:20px;
    position:relative;
    float:right;
    z-index: 0;
}
#slideshow #menu li {
    display: block;
}
#slideshow #menu li a {
    display: block;
    font: 11px "Lucida Grande", "Verdana";
    text-decoration: none;
    padding: 7px 0 7px 28px;
    z-index: 3;
    color: #ccc;
    line-height: 14px;
    vertical-align: middle;
}
#slideshow #menu li a:hover {
    color: #fff;
}
#slideshow #menu li.current a {
    font: 15px "Georgia";
    color: #fff;
    padding: 5px 0 5px 28px;
    line-height: 18px;
}
#slideshow #pictures .subscribe {
    height:91px;
    width:252px;
    position:absolute;
    margin-top:100px;
    float:left;
    bottom: 0;
    z-index: 2;
    background: url('images/SubscribeButton.png');
}
#slideshow #pictures .subscribe:hover {
    background: url('images/SubscribeButton-Dark.png');
}