JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<div class="logo"> <span class="right"></span>
 <span class="center">
         <span class="center-in"></span>
 <span class="center-up">
           <span class="left-in"></span>
 <span class="center-down"></span>
</span>
    </span> <span class="left">
         <span class="left-down"></span>
 <span class="left-down-in"></span>
</span>
    <div class="text">
        <div class="G">
            <div class="L"></div>
            <div class="Y"></div>
            <div class="D"></div>
            <div class="E"></div>
            <div class="Lone"></div>
        </div>
    </div>
</div>

CSS

html {
    padding:50px;
}
.logo {
    width:100%;
    height:100%;
    margin:0 auto;
    margin-left:25%;
}
.right {
    position: relative;
    background: #fff;
    left:55px;
}
.right:after, .right:before {
    border: solid transparent;
    content:" ";
    position: absolute;
}
.right:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #fff;
    border-width: 10px 25px;
    left: 3px;
    top: 5px;
}
.right:before {
    border-color: #fff;
    border-left-color: #e74f1c;
    border-width:15px 0px 15px 35px;
}
/*Common Styles*/
 .center:after, .center:before, .center-in:after, .center-in:before, .center-up:after, .center-up:before, .center-down:after, .center-down:before, .left:before, .left-in:before, .left-down:after, .left-down-in:before {
    content:" ";
    position:absolute;
    pointer-events: none;
    background:#fff;
    top: 0;
    left:0;
    transform-origin: 0 0;
    box-sizing: border-box;
}
/*--center style---*/
 .center-in {
    display: block;
    position: relative;
    background: #fff;
    z-index: 3;
    left: 5px;
    top: -78px;
}
.center-in:after {
    width: 40px;
    height: 45px;
    top: -1px;
    left: -2px;
    border-bottom: 5px solid #e04e5e;
    border-left: 5px solid #e04e5e;
    transform: rotate(105deg) skew(39deg, 18deg);
}
.center-in:before {
    width: 53px;
    height: 57px;
    border-top: 3px solid #e04e5e;
    border-right: 3px solid #e04e5e;
    transform: rotate(140deg) skew(37deg, -45deg);
}
.center {
    top:78px;
    left:48px;
    position:relative;
    z-index:3;
}
.center:after {
    width: 0px;
    height: 57px;
    left: -10px;
    top: 0;
    border-bottom: 5px solid #e04e5e;
    border-left: 5px solid #e04e5e;
    transform: rotate(142deg) skew(38deg, 0deg);
}
.center:before {
    width: 63px;
    height: 63px;
    top: 2px;
    left: -10px;
    border-top: 3px solid #e04e5e;
    border-right: 3px solid #e04e5e;
    transform: rotate(168deg) skew(23deg, -40deg);
}
.center-up {
   ...