JSFiddle - React, Tailwind, and code Playground

HTML

<a class="btn service1" href="#">Заказать</a>
  <a class="btn service2" href="#">Заказать</a>
  <a class="btn service3" href="#">Заказать</a>

CSS

.btn {
   margin-top: 24px;
   margin-left: 1px;
   display: inline-block;
   margin-right: 16px;
   padding: 10px 40px;
   vertical-align: top;

   font-weight: 500;
   font-size: 12px;
   line-height: 18px;
   font-family: "Roboto", "Arial", sans-serif;
   text-transform: uppercase;
   color: #ffffff;
   background-color: #fb565a;
   border: 1px solid #fb565a;
   border-radius: 3px;
   outline: none;
   cursor: pointer;
   text-decoration: none;
 }

 .btn .service1 {
   background-color: #000000;
   border: 1px solid #000000;
 }

 .btn .service2 {
   background-color: #00ca74;
   border: 1px solid #00ca74;
 }

 .btn .service3 {
   background-color: #efc84a;
   border: 1px solid #efc84a;
 }