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 alt="Web_ileana-d-cruz" class="rotate-90" src="https://softcover.s3.amazonaws.com/636/ruby_on_rails_tutorial_3rd_edition/images/figures/riding_rails_3rd_edition.png">
</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);
}