JSFiddle - React, Tailwind, and code Playground
HTML
<div class="contactdiv">
<div class="ppdiv">
<button class="ppenvelope">
<img src="http://i.imgur.com/QU5CvxC.jpg" alt="Slika">
</button>
<button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span>
</button>
</div>
<!--Zatvoren ppdiv-->
<div class="button2">
<button class="ppenvelope">
<img src="http://i.imgur.com/QU5CvxC.jpg" alt="Slika">
</button>
<button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span>
</button>
</div>
<!--Zatvoren button2-->
<div class="button2">
<button class="ppenvelope">
<img src="http://i.imgur.com/QU5CvxC.jpg" alt="Slika">
</button>
<button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span>
</button>
</div>
<!--Zatvoren button2-->
<div class="button2">
<button class="ppenvelope">
<img src="http://i.imgur.com/QU5CvxC.jpg" alt="Slika">
</button>
<button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span>
</button>
</div>
<!--Zatvoren button2-->
<div class="button2">
<button class="ppenvelope">
<img src="http://i.imgur.com/QU5CvxC.jpg" alt="Slika">
</button>
<button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span>
</button>
</div>
<!--Zatvoren button2-->
</div>
<!--Zatvoren contactdiv-->
CSS
.contactdiv {
width:271px;
}
.ppdiv {
overflow: hidden;
margin-top:20px;
margin-left: 20px;
}
.ppenvelope, .pptext {
float: left;
border: none;
height: 48px;
}
.ppenvelope {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
}
.ppdiv img {
padding:10px;
}
.button2 img {
padding:10px;
}
.pptext {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
color:#4c6974;
}
.pptext2 {
display: inline-block;
color:#4c6974;
padding-top: 13px;
padding-bottom:13px;
padding-left: 13px;
padding-right: 13px;
}
.button2 {
margin-top: 10px;
margin-left:20px;
overflow: auto;
}