JSFiddle - React, Tailwind, and code Playground

by evpozdniakov

HTML

<html>
<body>
    <div class="wrapper">
        <table class="rct-tbl">
            <thead>
                <tr>
                    <th class="">Description</th>
                    <th class="">Color 1</th>
                    <th class="">Color 2</th>
                    <th class="">Preview</th>
                </tr>
            </thead>
            <tbody>
                <tr class="row-odd ">
                    <td>Note</td>
                    <td data-atqa="org.noteTextColor">#333333</td>
                    <td data-atqa="org.noteBgColor">#FFFF00</td>
                    <td data-atqa="org.preview" rowspan="100%">
                        <div class="acs-smpl-box">
                        </div>
                    </td>
                </tr>
                <tr class="row-even ">
                    <td>Operation</td>
                    <td data-atqa="org.operationTextColor">#333333</td>
                    <td data-atqa="org.operationBgColor">#00C9F9</td>
                </tr>
                <tr class="row-odd ">
                    <td>Critical dimension</td>
                    <td data-atqa="org.criticalDimensionTextColor">#FFFFFF</td>
                    <td data-atqa="org.criticalDimensionBgColor">#CC0000</td>
                </tr>
                <tr class="row-even ">
                    <td>Quality Check</td>
                    <td data-atqa="org.qualityCheckTextColor">#FFFFFF</td>
                    <td data-atqa="org.qualityCheckBgColor">#FF6600</td>
                </tr>
                <tr class="row-odd ">
                    <td>Text</td>
                    <td data-atqa="org.textTextColor">#FFFF00</td>
                    <td data-atqa="org.textBgColor">#000000</td>
                </tr>
                <tr class="row-even ">
                    <td>Other annotations</td>
                    <td data-atqa="org.otherAnnotationsTextColor">#000000</td>
                    <td data-atqa="org.otherAnnotationsBgColor">#FFFF00</td>
       ...

CSS

.wrapper {
      padding: 30px;
    }

    .rct-tbl {

      width: 100%;
      border-radius: 5px;
    }

    .rct-tbl thead {
      background-color: #888D94;
      color: #fff;
      border-radius: 5px 5px 0 0;
    }

    .rct-tbl thead,
    .rct-tbl tbody {
      padding: 10px;
      display: block;
      text-align: justify;
    }

    .rct-tbl tr {
      display: block;
      padding: 10px;

    }

    .rct-tbl td,
    .rct-tbl th {
      width: 100px;
    }

    .rct-tbl tbody {
      background: #fff;
      padding: 20px;
      border: solid 1px #888D94 !important;
      border-radius: 0 0 5px 5px;
    }

    tbody tr {
      border-bottom: 1pt solid #E7E8E9;
    }

    tbody tr:hover {
      background: #BDC3C7;
      color: #FFFFFF;
    }

    tr td:first-child {
      color: #888D94;
    }

 .acs-smpl-box {
   width: 300px;
   height: 300px;
   background: red;
 }