JSFiddle - React, Tailwind, and code Playground

by neverov12

HTML

<script src="https://e-timer.ru/js/etimer.js"></script>
<div class="ff">
            
<div class="f50">
<div class="pot">
<b>Ваш текущий КБМ: 1</b><br/>
<strong>У вас совсем нет скидки!</strong> <br/>
Такой КБМ получают новички. <br/>Если у вас стаж больше года, нужно восстановить КБМ. <br/>Нажимайте кнопку.
</div>
</div>
            
<div class="f50">
<a class="k1" href="" title="Рассчитать и оформить ОСАГО с актуальным КБМ">Рассчитать и оформить ОСАГО с актуальным КБМ</a>
</div>
            
</div>

CSS

.k1{
  position: relative;
  top: 50%;
  margin-top: -25px;
  height: 50px;

  display: inline-block;
  padding: 0 30px 0 30px;
  text-align: center;
  background: #eb7c2c;
  color: #fff;
  font-size: 16px;
  line-height: 16px;
  border-radius: 90px;
  float:right;

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: color 300ms;
  transition: color 300ms;
}
.k1:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #DD0746;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition: 300ms ease-out;
  transition: 300ms ease-out;
  border-radius: 90px;
}
.k1:hover:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.k1 a{
  line-height: 50px;
}

.ff {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.f50 {
  width: 50%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: relative;
  border: 1px solid #000;
}