JSFiddle - React, Tailwind, and code Playground

by duncan

HTML

<span id='switch'>switch</span>
<div class='mymessage'>Message div</div>

CSS

#switch{
    margin:0 0 2em;
}

.mymessage{
    position:relative;
    width:40%;
    padding:1em;
    background:#eee;
    margin:0 auto
}
.mymessage:after
{
    content:'';
    width:10px;
    height:10px;
    background:#000;
    right:0;
    position:absolute;
    display:block;
top:20px;
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-ms-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear;
}

.mymessage.active:after
{
top:40px;
}

JavaScript

$('#switch').click(function(){
    $('.mymessage').toggleClass('active')
})