JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!DOCTYPE html> 
<html>
    <head>
        <title>Rotated Thumbnails with CSS3</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
<body>
 
<div id="wrapper">
 
    <h1>Rotated Thumbnails with CSS3</h1>   
    <label>Transform Angle: </label> 
    <input id="rotation_amount" value="15" /> 
    <button>Update</button> 
    <span id="error_message"> Number values only</span> 
    <br />
     
    <a href="1.jpg" class="mask"><img src="1.jpg" /></a>
    <a href="2.jpg" class="mask"><img src="2.jpg" /></a>
    <a href="3.jpg" class="mask"><img src="3.jpg" /></a>
     
    <a href="4.jpg" class="mask"><img src="4.jpg" /></a>
    <a href="5.jpg" class="mask"><img src="5.jpg" /></a>
    <a href="6.jpg" class="mask"><img src="6.jpg" /></a>
     
    <a href="7.jpg" class="mask"><img src="7.jpg" /></a>
    <a href="8.jpg" class="mask"><img src="8.jpg" /></a>
    <a href="9.jpg" class="mask"><img src="9.jpg" /></a>
     
     
    <div style="clear:both;"></div>
     
</div> <!-- #/wrapper -->
</body>
</html>