JSFiddle - React, Tailwind, and code Playground
HTML
<dl>
<dt><a href="#" class="active">Link to slide down dd</a></dt>
<dd>Text to drop down</dd>
</dl>
CSS
dt::before {
padding-right: .1em;
color: red;
float:left;
content: 'â–¶';
visiblility: visible;
-webkit-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
-o-transition:all 1s ease-in;
transition:all 1s ease-in;
}
dt:hover::before {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}