JSFiddle - React, Tailwind, and code Playground

by Lynda333

HTML

<div class="wrapper">
    <div class="top">
        <p>&nbsp;</p>
    </div>
    <div class="container">
    <p>Floating Bar Should not go above this point.</p>
    
    <p>&nbsp;</p>

    </div>
    <p>Floating Bar Should not go below this point.</p>
        <p>&nbsp;</p>
    
</div>

        <div class="add-this-container" >
        <!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<!-- AddThis Button END -->
</div>

CSS

.wrapper{
    height:1500px;
    background: #808080;
    width: 300px;
}
.container{
    background: #111;
    height: 600px;
}
.top{
    height: 400px;
    background: #7e0000;
}
.add-this-container{
	position: absolute;
    left: 350px;
    top: 250px;
}
.addthis_floating_style{
    background: #ccc;
}
p{
    color: white;
}