JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<div class="subtyt1">pierwsze subforum</div>
<div class="sub1baz">
  <table>
    <tr>
      <td>
        <div class="subbel">pierwsza</div>
        <div class="subbel">druga</div>
        <div class="subbel">trzecia</div>
        <div class="subbel">czwarta</div>
        <div class="subbel">piąta</div>
        <div class="subbel">szósta</div>

      </td>
      <td>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</td>
    </tr>
  </table>
</div>

CSS

body {
  background-color: #343536;
}

.sub1baz {
  width: 500px;
  height: auto;
  border: 4px double #0ff;
  color: white;
  font-family: Calibri, sans-serif;
  font-size: 10pt;
  text-align: justify;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 2px;
  padding-bottom: 2px;

}

.subbel {
  width: 100px;
  height: auto;
  font-size: 12px;
  background-color: black;
  padding: 2px;
  margin: 1px;
  text-align: center;
  transition: all 1s;
}

.subbel:hover {
  background-color: #0ff;
  color: black;
}

.subtyt1 {
  font-size: 14pt;
  letter-spacing: 2px;
  color: yellow;
  margin-bottom: -4px;
  margin-left: 20px;

}

JavaScript

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.