JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div">
    <table class="outerouterouter"> <!-- 太爷爷容器 -->
        <tbody>
            <tr class="outerouter"> <!-- 爷爷容器 -->
                <td class="outer"> <!-- 父容器 -->
                    <div class="inner"> <!-- 子容器 -->
                        ... <!-- 子容器内部内容 -->
                    </div>
                    <!-- 父容器内其他的子元素 -->
                </td>
                 <td class="outer"> <!-- 父容器 -->
                    <div class="inner"> <!-- 子容器 -->
                        ... <!-- 子容器内部内容 -->
                    </div>
                    <!-- 父容器内其他的子元素 -->
                </td>

                <td class="outer"> <!-- 父容器 -->
                    <div class="inner"> <!-- 子容器 -->
                        ... <!-- 子容器内部内容 -->
                    </div>
                    <!-- 父容器内其他的子元素 -->
                </td>
                 <td class="outer"> <!-- 父容器 -->
                    <div class="inner"> <!-- 子容器 -->
                        ... <!-- 子容器内部内容 -->
                    </div>
                    <!-- 父容器内其他的子元素 -->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="div1" margin-top="0">
    <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
    </table>
</div>

CSS

.div{ margin:40% auto;width:200px; height:200px; background: orange; border:2px solid #ccc;}
.outerouterouter {margin:0 15%; width:55px; height: 100%; background: blue; border:4px solid pink;}
.outer { width: 55px; vertical-align: middle; background: yellow; border:4px solid purple;}
.inner { height: 80px; width:50%; vertical-align: middle; background: green; border:4px solid black;}


.div1{border:2px double black;}

JavaScript

//function time(date){
//return date.getFullYear()+"年"+ (date.getMonth()+1)+"月"+date.getDate()+"日 星期"+(date.getDay()?0:"日")+ date.getHours()+":"+ date.getMinutes()+":"+ date.getSeconds()+":"+date.getMilliseconds()
//}
//setInterval(function(){document.write(time(new Date())+"\n")},1000)