JSFiddle - React, Tailwind, and code Playground

by Jed Mao

HTML

<div class="logo">
    <div class="logo__background"></div>
    <div class="logo__foreground"></div>
</div>

CSS

body {
    background-color: #262626;
}

.logo {
    position: relative;
    width: 110px;
    height: 30px;
    overflow: hidden;
}

.logo__background {
    position: absolute;
    width: 10000px;
    height: 100%;
    background: #ffffff;
    background: -moz-linear-gradient(left,  #ffffff 0%, #de2329 14%, #e6315a 29%, #ef9418 43%, #f7bd29 57%, #73b552 71%, #29a5db 86%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(14%,#de2329), color-stop(29%,#e6315a), color-stop(43%,#ef9418), color-stop(57%,#f7bd29), color-stop(71%,#73b552), color-stop(86%,#29a5db), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(left,  #ffffff 0%,#de2329 14%,#e6315a 29%,#ef9418 43%,#f7bd29 57%,#73b552 71%,#29a5db 86%,#ffffff 100%);
    background: -o-linear-gradient(left,  #ffffff 0%,#de2329 14%,#e6315a 29%,#ef9418 43%,#f7bd29 57%,#73b552 71%,#29a5db 86%,#ffffff 100%);
    background: -ms-linear-gradient(left,  #ffffff 0%,#de2329 14%,#e6315a 29%,#ef9418 43%,#f7bd29 57%,#73b552 71%,#29a5db 86%,#ffffff 100%);
    background: linear-gradient(to right,  #ffffff 0%,#de2329 14%,#e6315a 29%,#ef9418 43%,#f7bd29 57%,#73b552 71%,#29a5db 86%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
}

.logo__foreground {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-image:...