JSFiddle - React, Tailwind, and code Playground

by kissyLearning

HTML

<link rel="stylesheet" href="http://g.tbcdn.cn/kissy/k/1.4.4/css/dpl/base.css">

<div id="btn"></div>

<script src="http://g.tbcdn.cn/kissy/k/1.4.4/seed-min.js"></script>

CSS

* {
    font-family: 微软雅黑;
}

html {
    font-size: 16px;
}

.ks-button {
    font-size: 18px;
    display: inline-block;
    background: #09c;
    color: #fff;
    cursor: pointer;
    margin: 0 0 1.11111rem;
    padding: 0.88889rem 1.77778rem 0.94444rem 1.77778rem;
    text-decoration: none;
    transition: background-color 300ms ease-out;
}

.ks-button:hover {
    background-color: #08c;
}

JavaScript

KISSY.use('button', function (S, Button) {
    
    var btn = new Button({
        content: "点我",
        render: "#btn",
        tooltip: "点击我有惊喜~"
    });
    
    btn.render();
    
});