JSFiddle - React, Tailwind, and code Playground

by dk_dragonknight

HTML

<body>
  <div id="wrapper">
		<nav>
   		<ul class="polaroids-menu">
        <li><a href="http://www.example.com" title="My Family"><img src="http://themes.typepad.com/images/polaroid-myfamily.jpg" /></a></li>
        <li><a href="http://www.example.com" title="About Me"><img src="http://themes.typepad.com/images/polaroid-aboutme.jpg" /></a></li>
        <li><a href="http://www.example.com" title="My Shop"><img src="http://themes.typepad.com/images/polaroid-myshop.jpg" /></a></li>
        
       
        <li><a href="http://www.example.com" title="My Shop4"><img src="http://themes.typepad.com/images/polaroid-myshop.jpg" /></a></li>
      </ul>
    </nav>
  </div>
</body>

CSS

html , body 
{
  height : 100%;
}

body{
	margin: 0px;	
  
}

#wrapper{
	background-color: #ffffff;
	height: 100%;
	margin-left:auto;
	margin-right:auto;
	padding: 30px;
	width:940px;
	border: 15px solid #B4D8E7;
	border-radius: 10px;
}


/*---2 Column-Right Layout----------------------*/ 
.layout-two-column-right #alpha { width: 650px; }
.layout-two-column-right #beta { width: 310px; }


ul.polaroids-menu { 
	width: 350px; 
	margin: 30px 0 18px -55px;
	list-style-type: none;
	}

ul.polaroids-menu a, ul.polaroids-menu a:hover { 
	display: inline;
	float: left; 
	width: auto;
	margin: 0 0 27px 30px; 
	padding: 6px 6px 3px; 
	background: #fff; 
	font-family: "Marker Felt", sans-serif; 
	text-align: center; 
	text-decoration: none; 
	color: #333; 
	font-size: 14px; 
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
	/* default/first image rotation */
	-webkit-transform: rotate(-2deg); 
	-moz-transform: rotate(-2deg); 
	-webkit-transition: -webkit-transform .15s linear; 
	}

ul.polaroids-menu img { 
	display: block; 
	width: 80px; 
	margin-bottom: 6px; 
	border-radius: 0; 
	border: 0;
	}

ul.polaroids-menu a:after { content: attr(title); }

/* #2 About Me */		
ul.polaroids-menu li:nth-child(2) a { 
	-webkit-transform: rotate(6deg);  
	-moz-transform: rotate(6deg); 
	margin-left: -8px;
	margin-top: 20px;
  
	}

/* #3 My Shop */
ul.polaroids-menu li:nth-child(3) a { 
	-webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); 
	margin-top: -175px; 
	margin-left: 185px; 
	}
  
 /* 4th Image*/
  ul.polaroids-menu li:nth-child(4) a { 
	-webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); 
	margin-top: -155px; 
	margin-left: 275px; 
	}

/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */		
ul.polaroids-menu li a:hover { 
	-webkit-transform: scale(1.25); 
	-moz-transform: scale(1.25); 
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); 
	-moz-box-shadow: 0 3px...