JSFiddle - React, Tailwind, and code Playground

by Alexander Pankov

HTML

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="432px" height="499px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 117.815 135.895"
 xmlns:xlink="http://www.w3.org/1999/xlink">
     
<path class="star" d="M58.9077 0.733783c2.73035,9.62579 5.46103,19.2516 8.19138,28.8774 16.6725,1.57639 33.3448,3.15311 50.0173,4.7295 -6.9711,7.17748 -13.9419,14.3553 -20.913,21.5328 6.9711,15.2269 13.9419,30.4541 20.913,45.681 -9.70145,-2.4483 -19.4029,-4.89629 -29.1044,-7.34459 -9.70145,13.6505 -19.4029,27.301 -29.1044,40.9515 -2.73035,-9.62579 -5.46103,-19.2516 -8.19138,-28.8774 -16.6725,-1.57639 -33.3448,-3.15311 -50.0173,-4.7295 6.9711,-7.17748 13.9419,-14.3553 20.913,-21.5328 -6.9711,-15.2269 -13.9419,-30.4541 -20.913,-45.681 9.70145,2.4483 19.4029,4.89629 29.1044,7.34459 9.70145,-13.6505 19.4029,-27.301 29.1044,-40.9515zm0 58.1285c5.01767,0 9.08519,4.06752 9.08519,9.08519 0,5.01767 -4.06752,9.08519 -9.08519,9.08519 -5.01767,0 -9.08519,-4.06752 -9.08519,-9.08519 0,-5.01767 4.06752,-9.08519 9.08519,-9.08519z"/>
</svg>

CSS

.star {
    fill: #0f0;
    transition: all 0.5s ease;
	 -webkit-transition: all 0.5s ease;
}
.star:hover {
    fill: #000;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}