JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<body>
 
<center>
<h1>Futterlisten Schicht 3</h1>
<table style="text-align: center" border="0">
 
  <tbody>
 
    <tr>
 
      <th>Lieferant</th>
 
      <th>Telefon</th>
</tr>
<tr>
      <td style="height: 15px;"></td>
      <td style="height: 15px;"></td>
</tr>
<tr>
      <td><a href="N:\PCS\PT\UER\MP\Schichten\30-Schicht3\FrühstückTagesgericht07.03.16.xls" class="class1">Frühstücksliste</a></td>
      <td><p></p></td>
</tr>
<tr>
      <td><a href="http://www.grillbazar.de/speisekarte" class="class1" target="_blank">Grill-Bazar</a></td>
      <td><p title="Mo - Sa:
11.00-22.00 Uhr
Sonntag:
12.00 - 22.00 Uhr">02151-153175</p></td>
</tr>
<tr>
      <td><a href="http://www.pizzeriadagiorgio-krefeld.de/" class="class1" target="_blank">Da Gorgio</a></td>
      <td><p title="Mo - Do:
11.00-22.30 Uhr
Freitag:
11.00-23.00 Uhr
Samstag, Sonntag & Feiertage:
13.30 - 23.00 Uhr">02151-542928</p></td>
</tr>
<tr>
      <td><a href="./memo.pdf" class="class1" target="_blank">Memo</a></td>
      <td><p title="Mo - Sa:
12.00-22.00 Uhr
Sonntag & Feiertage:
12.00-22.00 Uhr">02151-652992</p></td>
</tr>
<tr>
      <td><a href="https://www.pizza-taxi.de/speisekarte/pizza-taxi---das-originale-47441-moers-roemerstr-400.pdf" class="class1" target="_blank">Das Orginale</a></td>
      <td><p title="Mo - Do:
11.30-23.45 Uhr
Freitag:
11.30-22.45 Uhr
Samstag:
11.30-23.45 Uhr
Sonntag & Feiertage:
11.30-23.45 Uhr">02841-51239</p></td>
</tr>
<tr>
      <td><a href="http://www.asia-express-rheinhausen.de/speisekarte.html" class="class1" target="_blank">Asia-Express</a></td>
      <td><p title="Täglich:
11.30-22.30
Heiligabend, 1. Weihnachtstag
und Silvester geschlossen">02065-53583</p></td>
</tr>
<tr>

<tr>
      <td><a href="http://www.asia-express-rheinhausen.de/speisekarte.html" class="class1" target="_blank">Was ganz neues</a></td>
      <td><p title="Täglich:
11.30-22.30
Heiligabend, 1. Weihnachtstag
und Silvester geschlossen">02065-53583</p></td>
</tr>
<tr>
      <td><a...

CSS

html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
 
 
 
/* Tabelleneigenschaften */
th {
   
border: 0px;
    font-weight: bold;
    text-decoration: underline;
    height: 34px;
    width: 180px;
    font-size: 110%;
    text-align: center;
    color: black;
 
}
 
td {
   
border: 0px;
    height: 34px;
    width: 180px;
    text-align: center;
 
}
 
 
 
/* Link-Eigenschaften */
      a.class1 {
            background-color: #c2c9d1;
            color: black;
            width: 160px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            border-radius: 9px;
        }
 
a.class1:hover, a.class1:active {
    background-color: #DEF2FC;
}
 
.not-active {
    pointer-events: none;
    cursor: default;
}
 
#openModal1:hover{
  color:red;
  cursor:pointer;
}
 
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
 display:none;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
}
 
.modalDialog > div {
    width: 70%;
  top:25%;
    position: relative;
    margin: 0% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px...