JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div class="wing-container">
  <svg class="wing" viewBox="0 0 100 100">
    <path class="wing-path" d="M20,50 Q50,70 80,50 L50,100 Z"></path>
  </svg>
</div>

CSS

.wing-container {
  width: 100px;
  height: 100px;
}

.wing {
  width: 100%;
  height: 100%;
}

.wing-path {
  fill: #ff0000; /* Replace with your desired color */
  transition: all 0.3s ease-in-out;
}

.wing-container:hover .wing-path {
  transform: rotate(-20deg);
}