JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<span class="glyphicon glyphicon-pushpin" id="btn1"></span>

<span class="glyphicon glyphicon-pushpin" id="btn2"></span>

CSS

body{font-size:25px;margin:20px;}


.pinned{
  /* Safari */
-webkit-transform: rotate(45deg);

/* Firefox */
-moz-transform: rotate(45deg);

/* IE */
-ms-transform: rotate(45deg);

/* Opera */
-o-transform: rotate(45deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}
.gray{
  color:#dddddd;
}

JavaScript

$('#btn1').click(function(){
    $('#btn1').toggleClass('pinned'); 
}
)
$('#btn2').click(function(){
    $('#btn2').toggleClass('gray'); 
}
)