JSFiddle - React, Tailwind, and code Playground

by Naydenov_it

HTML

<body>
    <header>Color Kitchen</header>
    <aside>
        <nav>
            <header>Featured articles</header>
            <ul>
                <li><a href="ColorKitchen.html#webColors">Web Colors</a></li>
                <li><a href="ColorKitchen.html#webSafeColors">Web Safe Colors</a></li>
                <li><a href="ColorKitchen.html#RGB">RGB Color Mode</a></li>
                <li><a href="ColorKitchen.html#RGBA">RGBA Color Space</a></li>
                <li><a href="ColorKitchen.html#HSLHSV">HSL adn HSV</a></li>
                <li><a href="ColorKitchen.html#lorem">Lorem Ipsum</a></li>
            </ul>
        </nav>
    </aside>
    <section>
        <article>
            <header id="webColors">Web Colors</header>
            <div>Web colors are colors used in designing web pages, and the methods for describing and specifying those colors. Colors may be specified as an RGB triplet or in hexadecimal format (a hex triplet). They may also be specified according to their common English names in some cases. Often a color tool or other graphics software is used to generate color values. In some uses, hexadecimal color codes are specified with notation using a leading number sign (#).[1][2] A color is specified according to the intensity of its red, green and blue components, each represented by eight bits. Thus, there are 24 bits used to specify a web color, and 16,777,216 colors that may be so specified.</div>
            <footer>
                <a href="http://en.wikipedia.org/wiki/Web_colors" target="_blank">Source and more info here!</a>
            </footer>
        </article>
        <article>
            <header id="webSafeColors">Web Safe Colors</header>
            <div>
                At one time many computer displays were only capable of displaying 256 colors. These may be dictated by the hardware or changeable by a "color table". When a color is found (e.g., in an image) that is not one available, a different one has to be used. This can be...

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    background-image: url(images/colorful_dots_on_black.jpg);
    font-family: Calibri;
}

    body > header {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-bottom: 30px;
        width: 100%;
        height: 100px;
        color: #FFFF00;
        text-align: center;
        padding-top: 15px;
        font-size: 3.5em;
        font-weight: bold;
        background: #ff0000;
        background: -moz-linear-gradient(left, #ff0000 34%, #008000 34%, #008000 49%, #008000 67%, #008000 67%, #0000ff 67%, #0000ff 94%, #0000ff 94%);
        background: -webkit-gradient(linear, left top, right top, color-stop(34%,#ff0000), color-stop(34%,#008000), color-stop(49%,#008000), color-stop(67%,#008000), color-stop(67%,#008000), color-stop(67%,#0000ff), color-stop(94%,#0000ff), color-stop(94%,#0000ff));
        background: -webkit-linear-gradient(left, #ff0000 34%,#008000 34%,#008000 49%,#008000 67%,#008000 67%,#0000ff 67%,#0000ff 94%,#0000ff 94%);
        background: -o-linear-gradient(left, #ff0000 34%,#008000 34%,#008000 49%,#008000 67%,#008000 67%,#0000ff 67%,#0000ff 94%,#0000ff 94%);
        background: -ms-linear-gradient(left, #ff0000 34%,#008000 34%,#008000 49%,#008000 67%,#008000 67%,#0000ff 67%,#0000ff 94%,#0000ff 94%);
        background: linear-gradient(to right, #ff0000 34%,#008000 34%,#008000 49%,#008000 67%,#008000 67%,#0000ff 67%,#0000ff 94%,#0000ff 94%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=1 );
    }

    body aside {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 18%;
        height: 250px;
        margin-left: 10px;
        background-color: rgba(255,255,255,0.9);
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
      ...