JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/maykinmedia/dual-listbox/master/dist/dual-listbox.css">
<script src="https://cdn.rawgit.com/maykinmedia/dual-listbox/master/dist/dual-listbox.js"></script>
    <body>
    <div style="background-color:#FFFFFF;width:100%;height:100%">
    
        <select class="select1" multiple>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
            <option value="7">Seven</option>
            <option value="8">Eight</option>
            <option value="9">Nine</option>
            <option value="10">Ten</option>
        </select>
    </div>
    </body>

JavaScript

new DualListbox('.select1',{
    addEvent: function(value) {
        console.log(value);
    },
    removeEvent: function(value) {
        console.log(value);
    },
    availableTitle: 'Available options',
    selectedTitle: 'I want to use this',
    addButtonText: '>',
    removeButtonText: '<',
    addAllButtonText: '>>',
    removeAllButtonText: '<<'
});