JSFiddle - React, Tailwind, and code Playground

by JordanBlount

HTML

<div class="s256 sflickr"></div>
<div class="s128 sflickr"></div>
<div class="s64 sflickr"></div>
<div class="s32 sflickr"></div>
<div class="s16 sflickr"></div>

CSS

/* global settings */
body {
    background: #eee;
}
div {
    margin: 10px;
}
/* icons settings */
.s256,
.s128,
.s64,
.s32,
.s16 {
    color: transparent;
    display: block;
    position: relative;
    box-shadow:
        0px 1px 4px rgba(0, 0, 0, 0.4),
        inset 0px 0px 1px rgba(255, 255, 255, 0.4);
    -moz-box-shadow:
        0px 1px 4px rgba(0, 0, 0, 0.4),
        inset 0px 0px 1px rgba(255, 255, 255, 0.4);
    -webkit-box-shadow:
        0px 1px 4px rgba(0, 0, 0, 0.4),
        inset 0px 0px 1px rgba(255, 255, 255, 0.4);
}
.s256 {
    width: 256px;
    height: 256px;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
}
.s128 {
    width: 128px;
    height: 128px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
}
.s64 {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
.s32 {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.s16 {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}
/* Flickr */
.sflickr {
    background: #fff;
    border: 1px solid #fefefe;
    background: -moz-linear-gradient(
        top,
        #fefefe 0%,
        #d6dde1);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#fefefe),
        to(#d6dde1));
}
.sflickr::before,
.sflickr::after {
    content: "";
    position: absolute;
    background: #5c82c1;
}
.sflickr::after {
    background: #f92f93;
}
.s256.sflickr::before,
.s256.sflickr:after {
    width: 96px;
    height: 96px;
    top: 80px;
    left: 22px;
    border-radius: 48px;
    -moz-border-radius: 48px;
    -webkit-border-radius: 48px;
    box-shadow: inset 8px 8px 16px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 8px 8px 16px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 8px 8px 16px rgba(0,...