JSFiddle - React, Tailwind, and code Playground

HTML

<div id="image_detail">
            <nav>
              <a href="/events/removee/galleries/all/event_images/107" class="right button" id="prev-image"><span class="fa fa-chevron-left"></span><span>Previous</span></a>
              <a href="/events/removee/galleries/all/event_images/108/rotate" class="button" data-remote="true" id="rotate_image_button">Rotate</a>
              <a href="/events/removee/galleries/all#scroll" class="left button"><span class="fa fa-chevron-left"></span><span>Back to Gallery</span></a>
            </nav>
            <div class="clear"></div>
            <div id="single_image">
              <div class="cropBox">
                <img id="image" alt="Web_ileana-d-cruz" class="" src="https://photochute-dev.s3.amazonaws.com/uploads/event_image/image/108/web_ileana-d-cruz.jpg?c=1435318866">
              </div>
            </div>
            <div class="details">
             
              <header>
                <h1>
                  <span>#5</span>
                </h1>
              </header>
              <div class="clear"></div>
              <dl class="styled bullet">
                <dt>File</dt>
                <dd>
                  ileana-d-cruz.jpg
                  <br>
                </dd>
                <dt>Version</dt>
                <dd>
                  Culled and color-corrected, not ready for production (placeholder text)
                  <br>
                </dd>
                <dt>Shoot date</dt>
                <dd>
                  June  9, 2015
                  <br>
                </dd>
                <dt>Galleries</dt>
                <dd>
                  All, tt
                  <br>
                </dd>
                <dt>Orders</dt>
                <dd>12 orders include this image (placeholder text)</dd>
              </dl>
            </div>
            <div class="clear"></div>
          </div>

CSS

#single_image .cropBox img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  height: auto;
  max-width: 576px;
  max-height: 576px;
}

.rotate-90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

JavaScript

var image = document.getElementById("image");

var rotateButton = document.getElementById("rotate_image_button");
rotateButton.addEventListener("click", function(e) {
    e.preventDefault();
    
    if(image.className === "rotate-90") {
        image.className = "";
    } else {
        image.className = "rotate-90";
    }
    
    return false;
});