JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<div id="bs">
        <button class="btn btn-primary" ></button>
        <button class="btn btn-secundary" ></button>
        <button class="btn btn-normal" ></button>
        <button class="btn btn-secundary" ></button>
        <button class="btn btn-two" ></button>
      </div>

CSS

button.btn-primary:before {
          content: 'Botão';
          } button.btn-primary:hover:before {
          content: 'Botão com hover';
          }
        button.btn-secundary:after {
        content: 'Botão 2';
        } button.btn-secundary:hover:after {
        content: 'Botão com hover 2';
        }
        button.btn-normal:after {
        content: 'Botão normal';
        } button.btn-normal:hover:after {
        content: 'Button normal';
        }
        button.btn-two:before {
        content: 'Botão two';
        } button.btn-two:hover:before { 
        content: 'Two botão';
        }

        /*****
        Estilo dos botões
        ******/
        .btn {
    padding: 8px;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
box-shadow: rgba(92, 92, 92, 0.2) 1px 1px 3px;
-moz-box-shadow: rgba(92, 92, 92, 0.2) 1px 1px 3px;
-webkit-box-shadow: rgba(92, 92, 92, 0.2) 1px 1px 3px;
-o-box-shadow: rgba(92, 92, 92, 0.2) 1px 1px 3px;
} .btn:hover {
    transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
}
        
.btn-primary {
    background: rgb(119, 215, 225);
    border: 1px solid rgb(118, 179, 239);
    color: #fff;
} .btn-primary:hover {
    background: rgb(88, 169, 177);
    border: 1px solid rgb(94, 152, 210);
}

.btn-secundary {
    background: rgb(30, 97, 203);
    color: #fff;
    border: 1px solid rgb(54, 54, 188);
} .btn-secundary:hover {
    background: rgb(40, 111, 223);
    border: 1px solid rgb(60, 60, 201);
}

.btn-normal {
    background: rgb(1, 193, 1);
    color: #fff;
    text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.4);
    border: 1px solid green;
} .btn-normal:hover {
    background: rgb(3, 179, 3);
    border: 1px solid rgb(3, 116, 3);
}

.btn-two {
    background: rgb(247, 161, 2);
    border: 1px solid rgb(157, 106, 13);
    color: #fff;
   ...