JSFiddle - React, Tailwind, and code Playground

by Murat Kezli

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&amp;subset=latin-ext" rel="stylesheet" />
<style type="text/css">
table.kezli {
  font-family: 'Roboto', sans-serif; font-weight: 300;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
table.kezli td, table.kezli th {
  border: 1px solid #ffffff;
  padding: 8px 2px;
}
table.kezli tbody td {
  font-size: small;
  color: #000000;
}
table.kezli tr:nth-child(even) {
  background: #e2e2e2;
}
table.kezli thead {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  background: #fbba00;
  
}
table.kezli thead td {
  font-size: 14px;
  color:#000000;
}
.sol{ text-align:left;margin-left:6px;}
#sayfalama { margin-top:10px; margin-left: -10px;}
#sayfalama .sayfalar { width:30px !important; height:30px !important; font-size:normal; line-height:30px; text-align:center; border:1px solid #cccccc; margin-left:10px; margin-bottom: 10px; cursor:pointer; float:left;}
#sayfalama .sayfalar:hover{ background-color:#fbba00;}
.aktif{background-color:#fbba00;}
.gizle{display:none !important;}
.goster{display:block !important; }
.temiz{clear:both !important}


#mk-modal-back{background-color:black; opacity: 0.8;z-index: 1000; left:0px; top:0px; position: fixed;}
#mk-modal-contanier{margin-top: 5px; min-height:300px; z-index: 1001; tab-index:-1; position:fixed;  font-family: 'Roboto', sans-serif; font-weight: 300; line-height: 180%; top:50px !important; }
#mk-modal-contanier a{ text-decoration: none; color: black;}
#mk-modal-contanier a:hover{color:#CD2027 }
#mk-modal-contanier a:active{color:black;}

.mk-modal-header{ background:url("https://yapifuariistanbul.com/www_yapi-istanbul/media/Campaign-Assets/Banners/popup/color-bant2.png"); height:14px; }
.mk-modal-header::before{content:url('https://yapifuariistanbul.com/www_yapi-istanbul/media/Campaign-Assets/Banners/popup/home.png');  position:relative;  z-index:1002;  left:0px; ...