JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pencilb02"> 
    <div id="linkimg"><img src="images/0017.png" width="142" height="66" alt="0017png"></div> 
    <div class="pencilt01"><a href="somelink">О студии</a></div> 
</div> 

<div id="pencilb03"> 
    <div id="linkimg"><img src="images/0017.png" width="142" height="66" alt="0017png"></div> 
    <div class="pencilt01"><a href="somelink2">Наши услуги</a></div> 
</div>

CSS

#pencilb01,#pencilb02,#pencilb03,#pencilb04,#pencilb05,#pencilb06,#pencilb07,#pencilb08,#pencilb09,#pencilb10,#pencilb11 { 
    position:absolute; 
    width:142px; 
    height:66px; 
    top:125px; 
    z-index:2; 
} 

.pencilt01 { 
    position:absolute; 
    width:100px; 
    -ms-transform: rotate(-30deg); 
    -webkit-transform: rotate(-30deg); 
    transform:rotate(-30deg); 
    color:#ffffff; 
    font-size:13px; 
    font-weight:800; 
    text-align:center; 
    bottom:19px; 
    left:28px; 
    outline:1px solid #ff008d; 
    z-index:4; 
} 

.linkimg a:link,.pencilt01 a:visited {color: #ffffff;text-decoration:none;} 
.linkimg a:hover {color: #ffffff;text-decoration:none;font-size:15px;} 
.pencilt01 a:active {color: #008000;} 

#pencilb01 { 
    left:0; 
} 

#pencilb02 { 
    left:62px; 
}