JSFiddle - React, Tailwind, and code Playground

by rulin shyu

HTML

<button class="btn">Default</button>
<button class="btn primary">Primary</button>
<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn link">Link</button>

CSS

.btn {
    /* 預設顏色是 default 的顏色 */
    --text-color: #333;
    --theme-color--main: #fff;
    --theme-color--second: #ccc;

    margin: 5px 0;
    outline: 0;
    border: 1px solid;
    padding: 6px 12px;
    color: var(--text-color);
    border-color: var(--theme-color--second);
    background: var(--theme-color--main);
    border-radius: 4px;
    cursor: pointer;
}

.btn:hover {
    /* 預設顏色是 default 的顏色 */
    --theme-color--main: #e6e6e6;
    --theme-color--second: #adadad;
}