JSFiddle - React, Tailwind, and code Playground

by OwenMelbz

HTML

<div id="ribbon">
    <span>
        <a class="instagram-link" href="#"></a>
        <a class="facebook-link" href="#"></a>
        <a class="twitter-link" href="#"></a>
    </span>
</div>
<div id="logo"></div>
<div id="menu">
    <img src="http://i42.tinypic.com/2ci88rb.jpg" class="btn-find">
    <img src="http://i41.tinypic.com/dct312.jpg" class="btn-saved">
    <img src="http://i42.tinypic.com/16lk57m.jpg" class="btn-how">
</div>

CSS

body {background-image: url(http://i41.tinypic.com/jjbswi.jpg);width:100%}
#ribbon {
width: 47px;
height: 690px;
position: absolute;
right: 10%;
top: -330px;
}
#ribbon span {
    width: 47px;
    height: 399px;
    position: absolute;
    left:0;
    top:-1px;
    background-image: url(http://i42.tinypic.com/el49jt.png);
    background-repeat: no-repeat;
    background-position: top;
}
#ribbon span a {display: block;width: 45px; height:35px;position: absolute; left:0;cursor: pointer;}
#ribbon span .instagram-link {
    bottom: 155px;
}
#ribbon span .facebook-link {
    bottom: 120px;
}
#ribbon span .twitter-link {
    bottom: 82px;
}
#logo {
width:311px;
height:146px;
background-image: url(http://i43.tinypic.com/aot08l.jpg);
margin-left: auto;
margin-right: auto;
margin-top: 10%;
}
#menu {
width: 191px;
height: 45px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
#menu img {display: block;float:left;cursor: pointer;}

JavaScript

$(function() {
    $('#ribbon span').draggable({
        distance: 1,
        containment: '#ribbon'
    });
});