JSFiddle - React, Tailwind, and code Playground

by Dyaa Eldin Moustafa

HTML

<script src="http://plugins.topdevs.net/before-after-viewer/wp-includes/js/jquery/jquery.js"></script>
<script src="http://plugins.topdevs.net/before-after-viewer/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>
<script src="http://plugins.topdevs.net/before-after-viewer/wp-content/plugins/smart-before-after-viewer/includes/twentytwenty/js/jquery.event.move.min.js?ver=4.0"></script>
<script src="http://plugins.topdevs.net/before-after-viewer/wp-content/plugins/smart-before-after-viewer/includes/twentytwenty/js/jquery.twentytwenty.min.js?ver=4.0"></script>
<link rel="stylesheet" href="http://plugins.topdevs.net/before-after-viewer/wp-content/plugins/smart-before-after-viewer/includes/twentytwenty/css/twentytwenty.min.css?ver=4.0">
<div id="twentytwenty-cbj0vx" class="sbav-container twentytwenty-move-on-hover sbav-home-bottom"><div class="twentytwenty-container"><img src="http://topdevs.net/assets/sbav/code.png" alt=""/><img src="http://topdevs.net/assets/sbav/design.png" alt=""/></div></div>

CSS

#twentytwenty-cbj0vx {
    width: 100%;
    max-width: 100%;
}
#twentytwenty-cbj0vx.twentytwenty-hover .twentytwenty-overlay:hover {
    background: rgba(0,0,0, 0.5);
}
#twentytwenty-cbj0vx .twentytwenty-before-label:before, 
#twentytwenty-cbj0vx .twentytwenty-after-label:before {
    background: rgba(255,255,255, 0.3);
}
#twentytwenty-cbj0vx .twentytwenty-before-label:before {
    content: "Before"; 
}
#twentytwenty-cbj0vx .twentytwenty-after-label:before {
    content: "After";
}
#twentytwenty-cbj0vx .twentytwenty-horizontal .twentytwenty-handle:before, 
#twentytwenty-cbj0vx .twentytwenty-horizontal .twentytwenty-handle:after, 
#twentytwenty-cbj0vx .twentytwenty-vertical .twentytwenty-handle:before, 
#twentytwenty-cbj0vx .twentytwenty-vertical .twentytwenty-handle:after {
    background: #ffffff;
}
#twentytwenty-cbj0vx .twentytwenty-before-label:before, 
#twentytwenty-cbj0vx .twentytwenty-after-label:before {
    color: #ffffff;
}
#twentytwenty-cbj0vx .twentytwenty-handle {
    border: 3px solid #ffffff;
}
#twentytwenty-cbj0vx .twentytwenty-horizontal .twentytwenty-handle:before {
    -webkit-box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); 
}
#twentytwenty-cbj0vx .twentytwenty-horizontal .twentytwenty-handle:after {
    -webkit-box-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); 
}
#twentytwenty-cbj0vx .twentytwenty-vertical .twentytwenty-handle:before {
    -webkit-box-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
#twentytwenty-cbj0vx .twentytwenty-vertical .twentytwenty-handle:after {
   ...

JavaScript

jQuery(window).load(function(){
    jQuery("#twentytwenty-cbj0vx .twentytwenty-container").twentytwenty({
        default_offset_pct: 0.5, 
        orientation: 'horizontal',
        move_on_hover: true,
        is_wiggle: false,
        wiggle_timeout: 1000				});
});