JSFiddle - React, Tailwind, and code Playground
HTML
<div></div>
<div class="active"></div>
SCSS
$size: 1.2em;
div {
float: left;
border: 1px solid;
&:after {
transition: transform 0.3s ease;
}
&.active {
left: $size;
}
}
div {
&:after {
content: '\232a';
display: block;
height: $size;
width: $size;
line-height: $size;
vertical-align: middle;
text-align: center;
}
&.active:after {
transform: rotate(90deg);
}
}
JavaScript
$('div').click(function() {
$(this).toggleClass('active');
});