JSFiddle - React, Tailwind, and code Playground

by James Gill

HTML

<div class="logo">
    <div class="logo-cont">
        <div class="letter-a leftA">
            <div class="cover-tri"></div>
            <div class="A-top"></div>
            <div class="left-tri"></div>
            <div class="right-tri"></div>
            <div class="A-left"></div>
            <div class="A-left-bg"></div>
            <div class="A-right"></div>
        </div>
        <div class="letter-a rightA">
            <div class="cover-tri"></div>
            <div class="A-top"></div>
            <div class="left-tri"></div>
            <div class="right-tri"></div>
            <div class="A-left"></div>
            <div class="A-left-bg"></div>
            <div class="A-right"></div>
        </div>
        <div class="cover-circle"></div>
        <div class="hemi-cont leftHemi">
            <div class="hemi-inner">
                <div class="hemi-bg"></div>
            </div>
        </div>
        <div class="hemi-cont rightHemi">
            <div class="hemi-inner">
                <div class="hemi-bg"></div>
            </div>
        </div>
    </div>
</div>

CSS

.logo{
    height:540px;
    width:540px;
    overflow:hidden;
    -webkit-border-radius: 270px;
	-moz-border-radius: 270px;
    border-radius:270px;
}
.logo-cont{
    background:white;
    height:500px;
    width:500px;
    position:relative;
    margin:20px;
    -webkit-border-radius: 250px;
	-moz-border-radius: 250px;
    border-radius:250px;
}
.letter-a{
    position:absolute;
    height:403px;
    width:256px;
    z-index:50;
}
.leftA{
    left:72px;
    top:85px;
}
.rightA{
    top:8px;
    left:167px;
    -webkit-transform: rotate(-180deg);  
    -moz-transform: rotate(-180deg);  
    -o-transform: rotate(-180deg);  
    -ms-transform: rotate(-180deg);
    transform:rotate(-180deg);
}
.cover-tri{
    position:absolute;
    top:127px;
    left:105px;
    height:0;
    width:0;
    border-left:27px solid transparent;
    border-right:27px solid transparent;
    border-bottom:90px solid white;
    z-index:50;
}
.A-top{
    position:absolute;
    background:#0E1216;
    width:67px;
    left:95px;
    top:0;
    height:140px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    border-radius:10px;
}
.left-tri{
    top:7px;
    left:23px;
    position:absolute;
    width:0;
    height:0;
    border-left:72px solid transparent;
    border-right:72px solid transparent;
    border-bottom:273px solid #0E1216;
}
.right-tri{
    position:absolute;
    top:7px;
    left:82px;
    width:0;
    height:0;
    border-left:80px solid transparent;
    border-right:80px solid transparent;
    border-bottom:273px solid #0E1216;
}
.A-left{
    position:absolute;
    top:250px;
    left:18px;
    width:52px;
    height:127px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    border-radius:10px;
    background:#0E1216;
    -webkit-transform: skew(-16deg, 34deg);
    -moz-transform: skew(-16deg, 34deg);
    -o-transform: skew(-16deg, 34deg);
    -ms-transform: skew(-16deg, 34deg);
    transform: skew(-16deg, 34deg);
    z-index:10;
}
.A-left-bg{
   ...