JSFiddle - React, Tailwind, and code Playground

HTML

<br />
<table id="pridat_fotky">
                        <tbody><tr>
                            <td class="empty">
                                <div>
                                  <button class="delete">X</button>
                                    
                                    <button class="rotate_left">X</button>
                                    <button class="rotate_right">X</button>
                                </div>
                            </td>
                            <td class="empty"></td>
                            <td class="empty"></td>
                            <td class="empty"></td>
                        </tr>
                        <tr>
                            <td class="empty"></td>
                            <td class="empty"></td>
                            <td class="empty"></td>
                            <td class="empty"></td>
                        </tr>
</tbody></table>

CSS

table#pridat_fotky td {
  width: 100px;
  height: 100px;
  border: 2px solid grey;
  background-repeat: no-repeat;
    /**TO MAKE THE BUTTON APPEAR RELATIVE?**/
  
}
table#pridat_fotky td div {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  position: relative;  
}

/**THE BUTTON**/
table#pridat_fotky td div button {
  position: absolute;
   opacity: 0.5;
  background-color: transparent;
  font-size: 0px;
  border-style: none;
  border-width: 0px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 20px;
  height: 20px;
  top: 0px;
  cursor: pointer;
}
table#pridat_fotky td:hover div button {
  opacity:1;    
    

}
table#pridat_fotky td div button.delete {
  background-image: url('http://u8.8u.cz/images/delete.png');
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
table#pridat_fotky td div button.rotate_left {
  background-image: url('http://u8.8u.cz/images/rotate_ccw2.png');
  left: 0px;  
}
table#pridat_fotky td div button.rotate_right {
  background-image: url('http://u8.8u.cz/images/rotate_cw2.png');
  right: 0px;  
}

table#pridat_fotky {
  margin-left: 20px;
  border-spacing: 10px 2px;
}
table#pridat_fotky td.empty {
  background-image: url("http://u8.8u.cz/starozitnosti/images/no_pic_available.jpg");
  background-color: #AAA;
  background-position: 0 0;
  background-size: 100% 100%;
}  
table#pridat_fotky td.empty.error {
  background-image: url("http://u8.8u.cz/starozitnosti/images/no_pic_error.png");
}  
table#pridat_fotky td.image {
  background-image: url("http://u8.8u.cz/starozitnosti/ok.svg");
  background-size: contain;
  background-position: center center;
}