JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<body>
    <a href='http://kom4.blogspot.com/' id='header-logo' itemprop='url'>
        <span aria-hidden='true' class='accessible-hidden' itemprop='name'></span>
        <span aria-hidden='true' class='char-d'></span>
        <span aria-hidden='true' class='char-b'></span></a>
</body>

CSS

#header-logo {
  position:relative;
  width:84px;
  height:35px;
  display:block;
  margin:10px 30px 5px;
}
#header-logo span,#header-logo span:before,#header-logo span:after {
  content:"";
  position:absolute;
  display:block;
}
#header-logo .char-d {
  width:7px;
  border:7px solid white;
  top:0;
  bottom:0;
  left:0;
}

#header-logo .char-d:after {
  border:2px solid transparent;
  top:-7px;
  right:-7px;
  border-color:#333 #333 transparent transparent;
}
#header-logo .char-b:after {
  border:2px solid transparent;
  top:-7px;
  right:-7px;
  border-color:#333 #333 transparent transparent;
}
#header-logo .char-b {
  width:7px;
  top:0;
  bottom:0;
  left:22px;
  border-left:7px solid white;
  border-right:7px solid white;
  border-top:7px solid white;
  border-bottom:7px solid white;
}
#header-logo .char-b:before {
  width:7px;
  height:0;
  top:7px;
  border-top:7px solid white;
  left:0;
  right:0;
}

body {background:#333;}