JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<a href="#" class="btn btn-danger btn-lg">Button</a>
<a class="btn btn-primary">Button</a>
<button class="btn btn-sm">Button</button>

CSS

* {
    font-family:Tahoma;
    box-sizing:border-box;
}
.btn {
    display:inline-block;
    padding:4px 8px;
    font-size:16px;
    border-radius:3px;
    border:1px solid #000;
    text-decoration:none;
    margin:0px;
    color:#000;
    background:#FFF;
    margin:4px;
}

.btn:hover{
    background:#F2F2F2;
    border-color:#232323;
    color:#232323;
    cursor:pointer;
}

.btn-danger {
    border-color:#D94141;
    background:#F24949;
    color:#FFF;
    text-shadow:1px 1px #D94141;
}
.btn-danger:hover {
    border-color:#CC3D3D;
    background:#E64545;
    color:#FFF;
    text-shadow:1px 1px #CC3D3D;
}
.btn-primary {
    border-color:#1698D9;
    background:#0CA6F2;
    color:#FFF;
    text-shadow:1px 1px #1698D9;
}
.btn-primary:hover{
    border-color:#158FCC;
    background:#0B9DE6;
    color:#FFF;
    text-shadow:1px 1px #158FCC;
}
.btn-lg {
    padding:8px 12px;
    border-radius:4px;
    font-size:18px;
}
.btn-sm {
    padding:2px 4px;
    border-radius:2px;
    font-size:12px;
}
.btn-block {
    display:block;
    text-align:center;
    width:100%;
}

@media screen and (max-width:756px) {
    .btn {
        padding:8px 12px;
        border-radius:4px;
        font-size:18px;
    }
    .btn-sm {
        padding:4px 8px;
        border-radius:3px;
        font-size:16px;
    }
    .btn-lg {
        padding:12px 16px;
        border-radius:5px;
        font-size:20px;
}
}