JSFiddle - React, Tailwind, and code Playground
by kougiland
HTML
<!--
* Copyright (c) 2010 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* Author: Eric Bidelman <[email protected]>
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster|Molengo|Josefin+Sans+Std+Light">
<style type="text/css">
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.linear {
background: -webkit-gradient(linear, left bottom, left top,
from(#eee), color-stop(0.25, #fff),
to(#eee), color-stop(0.75, #fff));
}
.shadow {
-moz-box-shadow: 3px 3px 10px #666666;
-webkit-box-shadow: 3px 3px 10px #666666;
box-shadow: 3px 3px 10px #666666;
}
.center {
display : -webkit-box;
display : -moz-box;
display : box;
-webkit-box-orient : vertical;
-webkit-box-pack : center;
-webkit-box-align : center;
-moz-box-orient : vertical;
-moz-box-pack : center;
-moz-box-align : center;
box-orient: vertical;
box-pack: center;
box-align: center;
}
#thumbnails {
margin: 10px;
}
.thumbnail {
float: left;
text-align: center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.thumbnail:hover {
-webkit-transform: rotateZ(360deg) scale(1.5);
...