JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

tables of dragon combos.

<h3>Eye Colour Locations</h3>

<table>
    <tr>
        <td class='empty'></td>
        <td class='header'>E^w<br><sub>Wing</sub></td>
        <td class='header'>E^s<br><sub>Swirl</sub></td>
        <td class='header'>E^b<br><sub>Butterfly</sub></td>
        <td class='header'>E^f<br><sub>Fade</sub></td>
        <td class='header'>e+<br><sub>None</sub></td>
    </tr>
    <tr>
        <td class='header'>E^w<br><sub>Wing</sub></td>
        <td>E^w/E^w<br><sub>Double Wing</sub></td>
        <td>E^w/E^s<br><sub>Swirl Wing</sub></td>
        <td>E^w/E^b<br><sub>Butterfly Wing</sub></td>
        <td>E^w/E^f<br><sub>Fading Wing</sub></td>
        <td>E^w/e+<br><sub>Wing</sub></td>
    </tr>
    <tr>
        <td class='header'>E^s<br><sub>Swirl</sub></td>
        <td>E^w/E^s<br><sub>Swirl Wing</sub></td>
        <td>E^s/E^s<br><sub>Double Swirl</sub></td>
        <td>E^s/E^b<br><sub>Butterfly Swirl</sub></td>
        <td>E^s/E^f<br><sub>Fading Swirl</sub></td>
        <td>E^s/e+<br><sub>Swirl</sub></td>
    </tr>
    <tr>
        <td class='header'>E^b<br><sub>Butterfly</sub></td>
        <td>E^w/E^b<br><sub>Butterfly Wing</sub></td>
        <td>E^s/E^b<br><sub>Butterfly Swirl</sub></td>
        <td>E^b/E^b<br><sub>Double Butterfly</sub></td>
        <td>E^b/E^f<br><sub>Fading Butterfly</sub></td>
        <td>E^b/e+<br><sub>Butterfy</sub></td>
    </tr>
    <tr>
        <td class='header'>E^f<br><sub>Fade</sub></td>
        <td>E^w/E^f<br><sub>Fading Wing</sub></td>
        <td>E^s/E^f<br><sub>Fading Swirl</sub></td>
        <td>E^b/E^f<br><sub>Fading Butterfly</sub></td>
        <td>E^f/E^f<br><sub>Double Fade</sub></td>
        <td>E^f/e+<br><sub>Fade</sub></td>
    </tr>
    <tr>
        <td class='header'>e+<br><sub>None</sub></td>
        <td>E^w/e+<br><sub>Wing</sub></td>
        <td>E^s/e+<br><sub>Swirl</sub></td>
        <td>E^b/e+<br><sub>Butterfly</sub></td>
        <td>E^f/e+<br><sub>Fade</sub></td>
       ...

CSS

table {
    width: 100%;
    border-collapse: collapse;
}
table td {
    border: 1px solid #ddd;
    padding: 5px;
    text-align: center;
}
table .empty {
    border: none;
}
table .header {
    background-color: #ddd;
    border: 1px solid #bbb;
    font-weight: bold;
}
table sub {
    font-style: italic;
}