JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

<div class="container">

  <table>
    <caption>
      Front-end web developer course 2021
    </caption>
    <thead>
      <tr>
        <th scope="col">Person</th>
        <th scope="col">Most interest in</th>
        <th scope="col">Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Chris</th>
        <td>HTML tables</td>
        <td>22</td>
      </tr>
      <tr>
        <th scope="row">Dennis</th>
        <td>Web accessibility</td>
        <td>45</td>
      </tr>
      <tr>
        <th scope="row">Sarah</th>
        <td>JavaScript frameworks</td>
        <td>29</td>
      </tr>
      <tr>
        <th scope="row">Karen</th>
        <td>Web performance</td>
        <td>36</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row" colspan="2">Average age</th>
        <td>33</td>
      </tr>
    </tfoot>
  </table>


</div>

CSS

html,
body {
  color: #454545;
}

.container {
  margin-top: 5% !important;
}

input,
textarea,
button,
table {
  color: inherit;
}

table {
  width: 100% !important;
}

/* table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
  width: 100%;
}*/

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

thead,
tfoot {
  background-color: rgb(228 240 245);
}

th,
td {
   text-align: center !important;
}


td:last-of-type {
  text-align: center;
}

tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

JavaScript

const html_tags = {
    'a': {
        'attributes': {
            'download': {
                'value': 'filename',
                'description': "Specifies that the target will be downloaded when a user clicks on the hyperlink",
                'optional': true,
            },
            'href': {
                'value': 'url',
                'description': "Specifies the URL of the page the link goes to",
                'optional': false,
            },
            'hreflang': {
                'value': 'language_code',
                'description': "Specifies the language of the linked document",
                'optional': true,
            },
            'media': {
                'value': 'media_query',
                'description': "Specifies what media/device the linked document is optimized for",
                'optional': true,
            },
            'ping': {
                'value': 'list_of_URLs',
                'description': "Specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking.",
                'optional': true,
            },
            'referrerpolicy': {
                'value': [
                    'no-referrer',
                    'no-referrer-when-downgrade',
                    'origin',
                    'origin-when-cross-origin',
                    'same-origin',
                    'strict-origin-when-cross-origin',
                    'unsafe-url'
                ],
                'description': "Specifies which referrer information to send with the link",
                'optional': true,
            },
            'rel': {
                'value': [
                    'alternate',
                    'author',
                    'bookmark',
                    'external',
                    'help',
                   ...