JSFiddle - React, Tailwind, and code Playground

by alirokni

HTML

<ol>
    <li>repeating gradient
        <div id="grad1"></div>
    </li>
    <li>Zebra pattern
        <div id="grad2"></div>
    </li>
</ol>

CSS

#grad1 {
    background-image: repeating-linear-gradient(180deg, rgb(26, 198, 204), rgb(26, 198, 204) 7%, rgb(100, 100, 100) 10%);
}
#grad2 {
    background-color: #eaeaea;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255, 255, 255, 1) 25px, rgba(255, 255, 255, 1) 50px);
}
div {
    display: block;
    width: 50%;
    height: 80px;
    border-color: #000000;
    padding: 10px;
}

JavaScript

function tryMe(a, callback) {
    setTimeout(function () {
        console.log("hi");
        callback();
    }, a);
    //console.log("hi");
}

function sayBye() {
    console.log("bye now!");
}

tryMe(1000, sayBye);

function MyClass(a, b) {
    this.a = a;
    this.b = b;
}

MyClass.prototype.plus = function () {
    return this.a + this.b;
};

var test1 = new MyClass(10, 11);
console.log(test1.plus());
/*
 */
var MyNewClass = function (c, d) {
    this.a = c;
    this.b = d;
};

MyNewClass.prototype = {
    plus: function () {
        return this.a + this.b;
    },
    minus: function () {
        return this.a - this.b;
    },
    multi: function () {
        return this.a * this.b;
    }
};

var test2 = new MyNewClass(16, 17);
console.log(test2.minus());

var test3 = new MyNewClass(5, 6);
console.log(test3.multi());

var test4 = new MyNewClass(2, 2);
console.log(test4.plus());