JSFiddle - React, Tailwind, and code Playground

by abang ichal

HTML

<div class="logo">
   <div class="lingkaran"></div>
   <div class="imtri">
      <div class="hurufi"></div>
      <div class="hurufm"></div>
      <div class="angkatiga"></div>
   </div>
</div>

CSS

body{background:#fff000}
/*Logo IM3 by Ahmad Rizal Samsi*/
.logo{max-width:96%;width:480px;margin:20px auto;}

.lingkaran{position:relative;background:#ff0;width:51px;height:50px;margin:205px 0px -10px 345px;border:9px solid #231917;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;}
.lingkaran::before{position:absolute;content:"";background:#00a1e9;width:94px;height:94px;border:9px solid #231917;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;top:-93px;left:-82px;}
.lingkaran::after{position:absolute;content:"";background:#ef8200;width:130px;height:130px;border:11px solid #231917;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;top:-210px;left:-25px;}

.imtri{width:350px;padding:12px 4px 8px 12px;background:#231917;margin:0px auto;-webkit-transform:skew(-15deg);-moz-transform:skew(-15deg);-o-transform:skew(-15deg);transform:skew(-15deg)}

.hurufi{background:#ffffff;width:44px;height:160px;display:inline-block;margin-right:12px}

.hurufm{position:relative;background:#ffffff;width:132px;height:160px;display:inline-block;margin-right:12px}
.hurufm::before,.hurufm::after{position:absolute;content:"";background:#231917;width:12px;height:120px;bottom:0px;}
.hurufm::before{left:36px}
.hurufm::after{right:36px}

.angkatiga{position:relative;background:#ffffff;width:132px;height:160px;display:inline-block;}
.angkatiga::before{position:absolute;content:"";border-top:25px solid #231917;border-bottom:25px solid #231917;border-left:20px solid #231917;width:75px;height:32px;top:42px;left:-3px}
/*Sampe disini saja kodenya*/