JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<li>
<div>Slide</div>
</li>
Width: <button class="resize" data-css="width" data-value="100">+100</button> <button class="resize" data-css="width" data-value="10">+10</button> <button class="resize" data-css="width" data-value="-10">-10</button> <button class="resize" data-css="width" data-value="-100">-100</button><br />
Height: <button class="resize" data-css="height" data-value="100">+100</button> <button class="resize" data-css="height" data-value="10">+10</button> <button class="resize" data-css="height" data-value="-10">-10</button> <button class="resize" data-css="height" data-value="-100">-100</button>

CSS

li {
    padding: 0 20% 0 0;
    display: block;
    overflow: hidden;
    height: 50px;
    width: 200px;
    position: relative;
}
div {
    background: orange;
    position: relative;
    height: 100%;
}
div:after {
    width:23.57%;
    height: 23.57%;
    content: '';
    background: orange;
    position:absolute;
    top: 47%;
    right:0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -ms-transform-origin:  100% 100% 0;
    -moz-transform-origin:  100% 100% 0;
    -o-transform-origin:  100% 100% 0;
    -webkit-transform-origin:  100% 100% 0;
    transform-origin: 100% 100% 0;
}

JavaScript

$('.resize').click(function() {
    var val = $(this).data('value');
    var css = $(this).data('css');
    $('li').css(css, parseInt($('li').css(css)) + val);
});