JSFiddle Recommended Layouts

JSFiddle-layouts.css

by Andrej Sharapov

HTML

<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 -->
<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>
    <small>JSFiddle-layouts — <a href="https://github.com/madeas/JSFiddle-layouts" title="" target="_blank">GitHub</a></small>
</div>
<!--/ jsfiddle-layouts.css -->

<div id="gradient-14" 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

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-14 { 
  background: #2ab5ce;
  background: -moz-linear-gradient(left, #2ab5ce 0%, #4875d0 100%);
  background: -webkit-linear-gradient(left, #2ab5ce 0%, #4875d0 100%);
  background: linear-gradient(to right, #2ab5ce 0%, #4875d0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2ab5ce', endColorstr='#4875d0', GradientType=1);
}
.icon  i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
 ...