JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
    <rect class="bar" x="10" y="10" fill="DarkOrange" width="10" height="50"></rect>
</svg>

CSS

rect {
        -webkit-transform: rotate(0);
	    -moz-transform: rotate(0);
        -o-transform: rotate(0);
	    -ms-transform: rotate(0);
	    transform: rotate(0);
    }

@media (max-width: 480px) {
    rect {
         fill: red;
        -webkit-transform: rotate(10deg);
	    -moz-transform: rotate(10deg);
        -o-transform: rotate(10deg);
	    -ms-transform: rotate(10deg);
	    transform: rotate(10deg);
    }
}