JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Modern+Antiqua&subset=latin,latin-ext" />
<center>

  <div style="background-color: #988974; width: 800px;">

    <table>

      <tbody>

        <tr>

          <td>

            <table>

              <tbody>

                <tr>

                  <td>

                    <div class="czc">
                      izba lordów
                    </div>

                    <div style="background-color: #B2AD9C; width: 360px; margin-top: 10px; margin-left: 10px;">

                      <center>

                        <table>

                          <tbody>

                            <tr>

                              <td background="http://placehold.it/60x90" style="width: 60px; height: 90px;">

                                <div class="znik">
                                  <br /><a href="LINKDOPW">PW</a>
                                  <br />
                                  <br /><a href="LINKPROFILU">PROFIL</a>
                                </div>

                              </td>

                              <td style="width: 10px;">

                              </td>

                              <td background="http://placehold.it/60x90" style="width: 60px; height: 90px;">

                                <div class="znik">
                                  <br /><a href="LINKDOPW">PW</a>
                                  <br />
                                  <br /><a href="LINKPROFILU">PROFIL</a>
                                </div>

                              </td>

                              <td style="width: 10px;">

                              </td>

                              <td background="http://placehold.it/60x90" style="width: 60px; height: 90px;">

                                <div class="znik">
                                  <br /><a href="LINKDOPW">PW</a>
                                  <br />
                ...

CSS

.czc {
  font-family: 'Modern Antiqua', cursive;
  color: #7A6B58;
  font-size: 22px;
  text-align: center;
  letter-spacing: -1px;
  font-weight: bold;
  margin-bottom: -25px;
}

.czca {
  font-family: 'Modern Antiqua', cursive;
  color: #7A6B58;
  font-size: 18px;
  text-align: center;
  letter-spacing: -1px;
  font-weight: bold;
  margin-bottom: -25px;
}

.bela {
  width: 160px;
  background-color: #DAD3CB;
  color: #7A6B58;
  text-align: center;
  font-family: 'Modern Antiqua', cursive;
  font-size: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
  margin-bottom: 3px;
  margin-top: 3px;
}

.bela:hover {
  width: 160px;
  background-color: #7A6B58;
  color: #DAD3CB;
  text-align: center;
  font-family: 'Modern Antiqua', cursive;
  font-size: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}

.belb {
  margin-bottom: 3px;
  margin-top: 3px;
  width: 160px;
  background-color: #7A6B58;
  color: #DAD3CB;
  text-align: center;
  font-family: 'Modern Antiqua', cursive;
  font-size: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}

.belb:hover {
  width: 160px;
  background-color: #DAD3CB;
  color: #7A6B58;
  text-align: center;
  font-family: 'Modern Antiqua', cursive;
  font-size: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}

.znik {
  background-color: white;
  width: 60px;
  height: 90px;
  color: black;
  text-align: center;
  opacity: 0;
  transition: 3s;
  -moz-transition: 3s;
  -o-transition: 3s;
  -htm-transition: 3s;
  -webkit-transition: 3s;
}

.znik:hover {
  transition: 3s;
  -moz-transition: 3s;
 ...