JSFiddle - React, Tailwind, and code Playground

by InsaneCoder

HTML

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

  <div class="dashboard clearfix">
      <div class="col1 clearfix">
        <div class="big todos-thumb flip-container vertical" data-page="todos" ontouchstart="this.classList.toggle('hover');">
        <div class="flipper">
			<div class="front" >
				<p>My Todos
          		</p>
			</div>
			<div class="back" >
				You have 5 more tasks to do!
			</div>
		</div>
        </div>
        <div class="small lock-thumb">
          <span class="icon-font  center" aria-hidden="true" data-icon="&#xe00d;"></span>
        </div>
        <div class="small last cpanel-thumb" data-page="random-page">
          <span class="icon-font" aria-hidden="true" data-icon="&#xe016;"></span>
        </div>
        <div class="big notes-thumb" data-page="random-page">
          <span class="icon-font" aria-hidden="true" data-icon="&#xe000;"></span>
          <p> Notes</p>
        </div>
        <div class="big calculator-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon="&#xe017;"></span><p>Calculator</p></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
}

/*



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 furnished to do so, subject to the following...