JSFiddle - React, Tailwind, and code Playground

by jpraden

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://madeas.ru/css/jsfiddle-layouts.css">
<! - jsfiddle-layouts.css ->
<!-- jsfiddle-layouts.css -->
<div class="rec invers">
  <em>Recommended layout</em>
  <div class="layout">
    <label>
        <input name="editor_mode" type="radio" value="grid_3">
        <span class="gridMode grid_3"></span>
        Bottom results
    </label>
  </div>
</div>
<!--/ jsfiddle-layouts.css --->

<div id="gradient-1" class="iconscontainer">
<a href="https://github.com/madeas/JSFiddle-layouts" target="_blank">
<div class="icon">
<i class="fa fa-github colored-text"></i>
<span>GitHub</span>
</div></a>
<h1>
JSFiddle Recommended Layouts
</h1>
<h2>
The JSFiddle layouts - can be used as a tooltip<br /> for a more convenient viewing of your creation<br /> on JSFiddle.
</h2>
</div>

CSS

* {
  box-sizing: border-box;
}
body {
    overflow: hidden;
}
.iconscontainer {
    width: 100%;
    height: 100vh;
    position: relative;
}
.icon {
  width:150px;
  height:150px;
  background-color: #fff;
  margin:75px 0 0 75px;
  border-radius:50%;
  -webkit-box-shadow:0 15px 35px rgba(0,0,0,.1),0 3px 10px rgba(0,0,0,.07);
  box-shadow:0 15px 35px rgba(0,0,0,.1),0 3px 10px rgba(0,0,0,.07);
  cursor: pointer;
  }

.icon,
.icon span {
  position:absolute;
  will-change:transform,opacity;
}
.icon span {
  left:50%;
  bottom:-40px;
  padding:5px 12px;
  background:#fff;
  -webkit-box-shadow:0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);
  box-shadow:0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);
  border-radius:50px;
  white-space:nowrap;
  font-size:16px;
  font-weight:500;
  color:#566b78;
  pointer-events:none;
  -webkit-user-select:none;-moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-transform:translate(-50%,-10px);
  transform:translate(-50%,-10px);
  opacity:0;
  -webkit-transition-property:opacity,-webkit-transform;
  transition-property:opacity,-webkit-transform;
  transition-property:opacity,transform;
  transition-property:opacity,transform,
  -webkit-transform;-webkit-transition-duration:.25s;
  transition-duration:.25s;
  -webkit-transition-timing-function:ease-out;
  transition-timing-function:ease-out;
  }
.icon:hover span {
  opacity:.9;
  -webkit-transform:translate(-50%);
  transform:translate(-50%);
}
 
	#gradient-1 {
		background: rgb(255,174,39); /* Old browsers */
		background: -moz-linear-gradient(-45deg,  rgba(255,174,39,1) 0%, rgba(222,73,109,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,174,39,1)), color-stop(100%,rgba(222,73,109,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(-45deg,  rgba(255,174,39,1) 0%,rgba(222,73,109,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(-45deg, ...