JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <header>
  </header>
  <section class="table">
    <div class="title">
      ספקים במערכת
      <div class="dib left">
        <a href="?act=add">
          <button class="btn-primary dib middle">
            הוסף ספק חדש
          </button>
        </a>
      </div>
    </div>
    <table>
      <tr>
        <th>שם ספק</th>
        <th>תמונה</th>
        <th>פעולות</th>
      </tr>
      <tr>
        <td> asdasz</td>
        <td class="relative thumb-hover">
          <div class="thumb">
            <img src="../images/suppliers/7.jpg" />
          </div>
          העבר עכבר לראות את התמונה
        </td>
        <td>
          <a href="suppliers.php?act=edit&id=7"><img src="../images/edit.gif" class="middle"> עריכה </a>
          &nbsp;&nbsp; &nbsp;
          <a onclick="return confirm('האם אתה בטוח שברצונך למחוק את הספק?');" href="suppliers.php?del=del&id=7"> <img src="../images/del.gif" class="middle"> מחיקה</a>
        </td>
      </tr>
    </table>
  </section>

</div>

CSS

@import url(http://fonts.googleapis.com/earlyaccess/notosanskannada.css);
body {
  background-color: #f9ebae;
  direction: rtl;
  font-family: 'Noto Sans Kannada', sans-serif;
}

.alert {
  padding: 5px;
  border-radius: 8px;
  margin-bottom: 5px;
  font-weight: bold;
}

.alert img {
  display: inline-block;
  margin: 0 8px;
  vertical-align: middle;
}

.alert-success {
  background-color: #fffac2;
  color: #5e5c40;
}

.right {
  float: right;
}

.left {
  float: left;
}

.dib {
  display: inline-block;
}

.middle {
  vertical-align: middle;
  display: inline-block;
}

.alert-danger {
  background-color: #f3c598;
  color: #ba4c32;
}

.relative {
  position: relative;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
}

.msg .alert {
  width: 95.5%;
}

.exit {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.thumb {
  width: 150px;
  height: 150px;
  padding: 3px;
  display: none;
  position: absolute;
  right: 0;
  transform: translateY(100%);
  bottom: -10px;
}

.thumb-hover:hover .thumb {
  display: inline-block;
  z-index: 8;
}

.thumb img {
  width: 100%;
  height: 100%;
}

.table {
  padding: 1.5px;
  background-color: #fbfcfc;
  border-radius: 5px;
}

.table .title {
  background-color: #ba4c32;
  color: white;
  padding: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.table table tr td {
  padding: 5px;
  border: 1px solid #d2d1cb;
  display: table-cell;
  vertical-align: middle;
}

.table table tr td,
.table table tr td a:link,
.table table tr td a:visited {
  color: #b49cb2;
  text-decoration: none;
}

.table table {
  width: 100%;
}

.table table tr:nth-child(odd) {
  background-color: #fbfcfc;
}

.table table tr:nth-child(odd) {
  background-color: #f8f8f8;
}

.table table tr:first-child {
  background: linear-gradient(#fef4db, #fffcf7);
  color: #818faa;
}

.table table tr:first-child th {
  border: none;
  border-bottom: 1px solid #d2d1cb;
}

.form table {
  width:...