JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar">
    <ul>
        <li class="GLnavBlog"><a href="#">htech blog</a></li>
        <li class="GLnavBlog"><a href="#">sport blog</a></li>
        <li class="GLnavSpecial"><a href="#">geo news</a></li>
        <li class="GLnavSpecial"><a href="#">rss</a></li>
        <li class="GLnavSpecial"><a href="#">upload corner</a></li>
    </ul>
</div>

CSS

*{outline:none}a{outline:0;color:#009388;text-decoration:none}body{color:#454D53;font-family:'pt_sansregular',sans-serif;background-color:#000}a:hover,a:focus{text-decoration:none;-webkit-transition:all 200ms ease-out;-moz-transition:all 200ms ease-out;-o-transition:all 200ms ease-out;-ms-transition:all 200ms ease-out;transition:all 200ms ease-out;color:#67b7b1}a:visited{text-decoration:none;outline:0}ul,ol{padding:0}i{color:#383F43}:focus{outline:none}#sidebar{text-transform:uppercase}

/*some problem here???*/
#sidebar li.GLnavBlog:first-child a {
  border-top: 1px solid #747577;
}
#sidebar li.GLnavSpecial a {
  text-transform: capitalize;
}
#sidebar li.GLnavSpecial:first-child a {
  border-top: 1px solid #747577;
}
#sidebar li.GLnavSpecial:last-child a {
  border-bottom: 1px solid #747577;
}