JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<div id="app"></div>
http://codepen.io/jackoliver/pen/JKqAYp

SCSS

@import 'https://fonts.googleapis.com/css?family=Share+Tech+Mono';

// Colors
$seaserpent: #59C3C3;
$gunmetal: #2B293D;
$isabelline: #EBEBEB;
$pastelgray: #CAD2C5;
$darkseagreen: #84A98C;

// Styles
body {
	background: $isabelline;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	font-family: 'Share Tech Mono';
}

.App {
	height: 400px;
	width: 300px;
	// overflow: hidden;
	// border-radius: 10px;
	// box-shadow: 0 5px 10px rgba(black, .1);
	perspective: 0 200px;
	background: $isabelline;
	transform: scale(.8) rotateX(45deg) rotateZ(45deg) ;
	transition: transform .5s ease .5s;
	position: relative;
	
	&:hover {
		transform: scale(1.5) rotateX(0) rotateZ(0);
		
		&::before {
			opacity: 0;
			height: 0;
		}
		
		&::after {
			opacity: 0;
			width :0;
		}
	}
	
	&::before {
		position: absolute;
		content: '';
		background: darken($pastelgray, 5);
		width: 100%;
		height: 10px;
		top: 100%;
		left: 10px;
		transform: skewX(45deg);
		opacity: 1;
		transform-origin: 0 100%;
		perspective: 0 200px;
		transition: transform .5s ease .5s, height .5s ease .5s, opacity .5s ease .5s;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 1px;
	}
	
	&::after {
		position: absolute;
		content: '';
		background: lighten($pastelgray, 5);
		width: 10px;
		height: 100%;
		bottom: 0;
		left: 100%;
		transform: skewY(45deg);
		transform-origin: 0 100%;
		perspective: 0 200px;
		opacity: 1;
		transition: transform .5s ease .5s, width .5s ease .5s, opacity .5s ease .5s;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 1px;
	}
}

// Display
.Display {
	background: $gunmetal;
	color: $seaserpent;
	text-shadow: 0 0 5px rgba($seaserpent, .5);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0 29px;
	box-sizing: border-box;
	height: 20%;
	overflow: hidden;
	font-size: 24px;
	position: relative;
	
	&::after {
		/* Permalink - use to edit and share this gradient:...

Babel + JSX

var App = React.createClass({
	getInitialState: function() {
		return ({
			operations: []
		});
	},
	calculateOperations: function() {
		var result = '';
		var operation = '';
		this.state.operations.map(function(operation, i) {
			result += operation;
			console.log(result);
		});
		
		result = String(eval(result));
		console.log(result);
		this.setState({ result: result });
	},
	handleClick: function(e) {
		var value = e.target.getAttribute('data-value');
		
		switch (value) {
			case 'clear':
				this.setState({ operations: [], result: '' });
				break;
			case 'equal':
				this.calculateOperations();
				break;
			default:
				if(this.state.result) {
					this.setState({ result: '', operations:[]}, function() {
						this.state.operations.push(value);
						this.forceUpdate();
					});
				} else {
					this.state.operations.push(value);	
				}
				break;
		}
		
		// console.log(operations);
		this.forceUpdate();
	},
	render: function() {
		return (
			<div className="App">
				<Display data={this.state.operations} result={this.state.result} />
				<Buttons>
					<Button onClick={this.handleClick} label="C" value="clear" />
					<Button onClick={this.handleClick} label="7" value="7" />
					<Button onClick={this.handleClick} label="4" value="4" />
					<Button onClick={this.handleClick} label="1" value="1" />
					<Button onClick={this.handleClick} label="0" value="0" />
					
					<Button onClick={this.handleClick} label="/" value="/" />
					<Button onClick={this.handleClick} label="8" value="8" />
					<Button onClick={this.handleClick} label="5" value="5" />
					<Button onClick={this.handleClick} label="2" value="2" />
					<Button onClick={this.handleClick} label="." value="." />
					
					<Button onClick={this.handleClick} label="X" value="*" />
					<Button onClick={this.handleClick} label="9" value="9" />
					<Button onClick={this.handleClick} label="6" value="6" />
					<Button onClick={this.handleClick} label="3" value="3" />
					<Button...