JSFiddle - React, Tailwind, and code Playground

HTML

<body>
 
<div class="demo-wrapper">

  
      <div class="col1 clearfix vertical1">
        <div class="big todos-thumb flip-container1 vertical1" data-page="todos" >
        <div class="flipper1">
			<div class="front1" >
				<p>My Todos
          		</p>
			</div>
			<div class="back1" >
				You have 5 more tasks to do!
			</div>
		</div>
          
           
        </div>
        <div class="small lock-thumb flip-container2 vertical2">
        <div class="flipper2">
			<div class="front2" >
				<p><span class="icon-font  center" aria-hidden="true" data-icon="&#xe00d;"></span>
          		</p>
			</div>
			<div class="back2" >
				LOCK
			</div>
		</div>
        </div>
        <div class="small last cpanel-thumb flip-container3 vertical3" data-page="random-page">
        <div class="flipper3">
			<div class="front3" >
				<span class="icon-font" aria-hidden="true" data-icon="&#xe016;"></span>
			</div>
			<div class="back3" >
				Notes
			</div>
		</div>
          
        </div>
        <div class="big notes-thumb flip-container4 vertical4" data-page="random-page">
        <div class="flipper4">
			<div class="front4" >
				 <span class="icon-font" aria-hidden="true" data-icon="&#xe000;"></span>
			</div>
			<div class="back4" >
				<p> Notes</p>
			</div>
		</div>
        </div>
        <div class="big calculator-thumb flip-container5 vertical5" data-page="random-page">
        	<div class="flipper5">
			<div class="front5" >
			<span class="icon-font" aria-hidden="true" data-icon="&#xe017;"></span>
			</div>
			<div class="back5" >
				<p>Calculator</p>
			</div>
		</div>
        </div>
      </div>
    
</div>

  
</body>

CSS

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff')
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff')
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff')
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')
}

@font-face {
  font-family: 'demo-icomoon';
  src: url('../fonts/demo-icomoon.eot');
  src: url('../fonts/demo-icomoon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/demo-icomoon.woff') format('woff'),
    url('../fonts/demo-icomoon.ttf') format('truetype'),
    url('../fonts/demo-icomoon.svg#demo-icomoon') format('svg');
  font-weight: normal;
  font-style: normal
}

[data-icon]:before {
  font-family: 'demo-icomoon';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased
}

.demo-wrapper
{
  margin-top:30px;
}

/*



Copyright © 2013 Sara Soueidan

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is...