JSFiddle - React, Tailwind, and code Playground

by swoogie

HTML

<div class="header">
    <table style='width:80%'>
        <tbody>
            <tr>
                <td>Name:</td>
                <td>1234</td>
            </tr>
            <tr>
                <td>Number:</td>
                <td>1234</td>
            </tr>
            <tr>
                <td>Age:</td>
                <td>1234</td>
            </tr>
            <tr>
                <td>Count:</td>
                <td>1234</td>
            </tr>
            <tr>
                <td>Thing:</td>
                <td>1234</td>
            </tr>
            <tr>
                <td>Urgh:</td>
                <td>1234</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.header {
    margin:40px;
    background-color:white;
    text-align:center;
    width:198px;
}
.header:after {
    content:" ";
    display:block;
    position: relative;
    top:0px;
    left:0px;
    width:100%;
    height:36px;
    background: linear-gradient(white 0%, transparent 0%), -webkit-linear-gradient(135deg, grey 33.33%, transparent 33.33%) 0 0%, grey -webkit-linear-gradient(45deg, grey 33.33%, white 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
}
body {
    background-color: grey;
}
tr td:nth-child(odd){
    text-align: left;
    font-weight:bold;
}
tr td:nth-child(odd){
    text-align: right;
}