JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
        <table class="bordered">
          <thead>
            <tr>
                <th>#</th>        
                <th>IMDB Top 10 Movies</th>
                <th>Year</th>
            </tr>
          </thead>
          <tbody>
                <tr>
              <td>1</td>        
              <td>The Shawshank Redemption</td>
               <td>1994</td>
            </tr>        
            <tr>
                <td>2</td>         
                <td>The Godfather</td>
                <td>1972</td>
            </tr>
            <tr>
                <td>3</td>         
                <td>The Godfather: Part II</td>
                <td>1974</td>
            </tr>    
            <tr>
                <td>4</td> 
                <td>The Good, the Bad and the Ugly</td>
                <td>1966</td>
            </tr>            
            </tbody>
        </table>
        <p style="height: 50px"></p>
            <table class="zebra">
              <thead>
                <tr>
                     <th>#</th>        
                  <th>IMDB Top 10 Movies</th>
                  <th>Year</th>
                </tr>
              </thead>
            <tbody>
                    <tr>
                <td>1</td>        
                <td>The Shawshank Redemption</td>
                <td>1994</td>
                </tr>        
                <tr>
                <td>2</td>         
                <td>The Godfather</td>
                <td>1972</td>
                </tr>
                <tr>
                <td>3</td>         
                <td>The Godfather: Part II</td>
                <td>1974</td>
                </tr>    
                <tr>
                <td>4</td> 
                <td>The Good, the Bad and the Ugly</td>
                <td>1966</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                <td>&nbsp;</td>        
                <td></td>
                <td></td>
  ...

CSS

*{margin: 0;padding: 0;}
    body {
        padding: 40px 100px;
    }
    .demo {
    width: 600px;
    margin: 40px auto;
    font-family: 'trebuchet MS', 'Lucida sans', Arial;
    font-size: 14px;
    color: #444;
    }
    
    table {
        *border-collapse: collapse; /* IE7 and lower */
        border-spacing: 0;
        width: 100%;
    }
    /*========bordered table========*/
    .bordered {
        border: solid #ccc 1px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 1px 1px #ccc;
        -moz-box-shadow: 0 1px 1px #ccc;
        box-shadow: 0 1px 1px #ccc;
    }
    
    .bordered tr {
        -o-transition: all 0.1s ease-in-out;
        -webkit-transition: all 0.1s ease-in-out;
        -moz-transition: all 0.1s ease-in-out;
        -ms-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;        
    }
    .bordered .highlight,
    .bordered tr:hover {
        background: #fbf8e9;        
    }
    .bordered td, 
    .bordered th {
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        padding: 10px;
        text-align: left;
    }
    .bordered th {
        background-color: #dce9f9;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
        background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
        background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
        background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
        background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
        background-image: linear-gradient(top, #ebf3fc, #dce9f9);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ebf3fc, endColorstr=#dce9f9);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ebf3fc, endColorstr=#dce9f9)";
        -webkit-box-shadow: 0 1px 0...