JSFiddle - React, Tailwind, and code Playground

by qwweee7467

HTML

<table cellspacing='0'>
    <!-- cellspacing='0' is important, must stay -->
    <tr>
        <th>Task Details</th>
        <th>Progress</th>
        <th>Vital Task</th>
    </tr>
    <!-- Table Header -->
    <tr>
        <td>Create pretty table design</td>
        <td>100%</td>
        <td>Yes</td>
    </tr>
    <!-- Table Row -->
    <tr class='even'>
        <td>Take the dog for a walk</td>
        <td>100%</td>
        <td>Yes</td>
    </tr>
    <!-- Darker Table Row -->
    <tr>
        <td>Waste half the day on Twitter</td>
        <td>20%</td>
        <td>No</td>
    </tr>
    <tr class='even'>
        <td>Feel inferior after viewing Dribble</td>
        <td>80%</td>
        <td>No</td>
    </tr>
    <tr>
        <td>Wince at "to do" list</td>
        <td>100%</td>
        <td>Yes</td>
    </tr>
    <tr class='even'>
        <td>Vow to complete personal project</td>
        <td>23%</td>
        <td>yes</td>
    </tr>
    <tr>
        <td>Procrastinate</td>
        <td>80%</td>
        <td>No</td>
    </tr>
    <tr class='even'>
        <td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a>
        </td>
        <td>80%</td>
        <td><a href="#inexistent-id">Another</a>
        </td>
    </tr>
</table>

CSS

/*
This was made by João Sardinha
Visit me at http://johnsardine.com/

The table style doesnt contain images, it contains gradients for browsers who support them as well as round corners and drop shadows.

It has been tested in all major browsers.

This table style is based on Simple Little Table By Orman Clark,
you can download a PSD version of this at his website, PremiumPixels.
http://www.premiumpixels.com/simple-little-table-psd/

PLEASE CONTINUE READING AS THIS CONTAINS IMPORTANT NOTES

*/

/*
Im reseting this style for optimal view using Eric Meyer's CSS Reset - http://meyerweb.com/eric/tools/css/reset/
------------------------------------------------------------------ */

body, html {

    height: 100%;

}

html, body, div, span, applet, object, iframe,

/*h1, h2, h3, h4, h5, h6,*/

p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    font-size: 100%;

    vertical-align: baseline;

    background: transparent;

}

body {

    line-height: 1;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after, q:before, q:after {

    content:'';

    content: none;

}

:focus {

    outline: 0;

}

del {

    text-decoration: line-through;

}

table {

    border-spacing: 0;

}

/* IMPORTANT, I REMOVED border-collapse: collapse; FROM THIS LINE IN ORDER TO MAKE THE OUTER BORDER RADIUS WORK */

/*
Table Style - This is what you want
------------------------------------------------------------------ */

table a:link {

    color: #666;

    font-weight: bold;

    text-decoration:none;

}

table a:visited {

    color: #999999;

    font-weight:bold;

    text-decoration:none;

}

table a:active, table a:hover {

    color:...

JavaScript

/* Table Style - Based in Simple Little Table
http://johnsardine.com/example/simple-little-table/
*/