JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<table border="1">
    <tr>
        <td><input type="button" value=" Wo " /></td>
        <td><input type="button" value=" Wer1 " /></td>
        <td><input type="button" value=" Wer2 " /></td>
    </tr>
     
    <tr class="b7">
        <td>Entenhausen</td>
        <td>Donald Duck</td>
        <td>Mickey Mouse</td>    
    </tr>
     
    <tr class="b7">
        <td>Entenhausen</td>
        <td>Donald Duck</td>
        <td>
            <div class="hrow">Tick</div>
            <div class="hrow">Trick</div>
        </td>
    </tr>
</table>

CSS

* {margin: 0px; padding: 0px; border-collapse: collapse;}
div.hrow {width: 100%; height: 100%; text-align: center; vertical-align: middle;}
tr{
    background-image: url('http://www.imagemagick.org/Usage/anim_mods/glitter_blue.gif'); 
    background-position: center; 
    background-repeat: repeat-x;
}
tr:first-child{
    background-image: none; 
}
tr input{
    width: 100%;
}
td{
    padding: 0px 5px 0px 5px;
    color: white;
} 
.b7 {
    border-left: 1px solid #888; 
    border-top: 1px solid #888; 
    border-bottom: 1px solid #888;
}
.b7:hover{
    -moz-box-shadow: 0px 0px 10px #ff6600; 
    -webkit-box-shadow: 0px 0px 10px #ff6600; 
    box-shadow: inset 0px 0px 10px #ff6600;    
}