JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div>
     <a href="" class="spoiler_link"><span>X</span></a>                
          <div class="spoiler_body">
               содержимое спойлера...
          </div>
</div>

CSS

.spoiler_link span {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #333;
    text-align: center;
    line-height: 30px;
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
.spoiler_link .rotate_but {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

JavaScript

$(document).ready(function(){
    $('.spoiler_link').click(function(){
        $(this).parent().children('div.spoiler_body').toggle('normal');
        $('span',this).toggleClass('rotate_but');
        return false;
    });
});