JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://github.com/DmitryBaranovskiy/g.raphael/blob/master/min/g.raphael-min.js?raw=true"></script>
<script src="http://github.com/DmitryBaranovskiy/g.raphael/blob/master/min/g.pie-min.js?raw=true"></script>
<body>
    <div id="slider">
        <div class="scroll-wrapper">
            <div class="tabs-structure" id='pie'></div>
        </div>
    </div>
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="38" height="32">
            <image xlink:href="/images/selected01.png" x="0" y="0" width="38" height="32" />
        </pattern>
    </defs>
</body>

CSS

#slider {
            width:48px;
            height:100px;
            margin-left:auto;
            margin-right:0px;
            transition:width 0.5s;
            -webkit-transition:width 0.5s;
            /* Safari */
            overflow-x: hidden;
            border-top-left-radius:50px;
            border-bottom-left-radius:50px;
        }
        #slider:hover {
            width:370px;
            margin-left:auto;
        }
        .scroll-wrapper {
            /*border: 1px solid black;*/
            width: 2400px;
            margin-left:auto;
            margin-right:0px;
            overflow-x: scroll;
            /*making the scroll have momentum on mobile devices
        http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements
        */
            -webkit-overflow-scrolling: touch;
        }
        /*hiding the scrollbar*/
        .scroll-wrapper::-webkit-scrollbar {
            display: none;
        }
        .tabs-structure {
            width: 200%;
            display: table;
            table-layout: fixed;
        }
        body {
            margin:0px
        }
        .sliderPalette {
            background:url('http://s29.postimg.org/z2uluxpn7/selected01.png');
        }

JavaScript

$(document).ready(function () {            

            var colorPalettes = {
                single_A7DBD8: {
                    amount: [100],
                    color: ['#A7DBD8']
                }, //single
                single_C02942: {
                    amount: [100],
                    color: ['#C02942']
                },
                single_FE4365: {
                    amount: [100],
                    color: ['#FE4365']
                },
                single_C7F464: {
                    amount: [100],
                    color: ['#C7F464']
                },
                single_0B486B: {
                    amount: [100],
                    color: ['#0B486B']
                },
                single_3B8686: {
                    amount: [100],
                    color: ['#3B8686']
                },
                single_FFFFFF: {
                    amount: [100],
                    color: ['#FFFFFF']
                },
                single_FA6900: {
                    amount: [100],
                    color: ['#FA6900']
                },
                single_A46583: {
                    amount: [100],
                    color: ['#A46583']
                },
                single_88C425: {
                    amount: [100],
                    color: ['#88C425']
                },
                double_0B486B_A7DBD8: {
                    amount: [30, 70],
                    color: ['#0B486B', '#A7DBD8']
                },
                double_FFFFFF_3B8686: {
                    amount: [30, 70],
                    color: ['#FFFFFF', '#3B8686']
                },
                double_3B8686_FFFFFF: {
                    amount: [70, 30],
                    color: ['#3B8686', '#FFFFFF']
                },
                double_FA6900_C7F464: {
                    amount: [30, 70],
                    color: ['#FA6900', '#C7F464']
                }
            };

            function...