JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<div class="nav__primary nav__alt white nav__full-width">
    Activeer 
    <b class="icon icon--x2 icon--right" aria-label="chevron">&#61706;</b>
</div>

CSS

.product-group .product .icon--plus {
  -ms-transition: rotate 0.5s ease-out; /* IE 9 */
  -webkit-transition: rotate 0.5s ease-out; /* Chrome, Safari, Opera */
  transition: rotate 0.5s ease-out;
  position: relative;
  display: inline-block;
  text-align: center;
  padding-left: 7px;
  width: 24px;
  height:24px;
  left: -7px;
}

.product-group .product:hover .product__device {
  color: #fff;
}

.product-group .product:hover .icon--plus {
  -ms-transform: rotate(360deg); /* IE 9 */
  -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
  transform: rotate(360deg);
}

JavaScript

// Transitions on transform Rotate