JSFiddle - React, Tailwind, and code Playground

by Florin Pop

HTML

<button class="btn btn1">button1</button>
<button class="btn btn2">button2</button>
<button class="btn btn3">button3</button>
<button class="btn btn4">button4</button>
<button class="btn btn5">button5</button>

CSS

.btn {
    font-size: 15px;
    font-weight: bold;
    padding: 15px 20px;
    border-radius: 10px 0;
    background-color: white;
    border-width: 1px 2px 5px 1px;
}
.btn:hover {
    color:white;
}
.btn:focus {
    outline: none;
}
.btn1 {
    color: #FF851B;
    border-color: #FF851B;
}
.btn1:hover {
    background-color:#FF851B;
}
.btn2 {
    color: #55bada;
    border-color: #55bada;
}
.btn2:hover {
    background-color:#55bada;
}
.btn3 {
    color: #BADA55;
    border-color: #BADA55;
}
.btn3:hover {
    background-color:#BADA55;
}
.btn4 {
    color: #FF4136;
    border-color: #FF4136;
}
.btn4:hover {
    background-color:#FF4136;
}
.btn5 {
    color: #FFDC00;
    border-color: #FFDC00;
}
.btn5:hover {
    background-color: #FFDC00;
}
}