JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wr">введите промокод <b> promo-test</b></div>
<div class="wr">
  <div class="item">
    <div class="title">Товар 1</div>
    <div class="input"><input type="text" placeholder="Введите промокод"></div>
    <div class="link"><a class="link-a" href="#" target="_blank">купить</a></div>
  </div>
  <div class="item">
    <div class="title">Товар 2</div>
    <div class="input"><input type="text" placeholder="Введите промокод"></div>
    <div class="link"><a class="link-a" href="#" target="_blank">купить</a></div>
  </div>
  <div class="item">
    <div class="title">Товар 3</div>
    <div class="input"><input type="text" placeholder="Введите промокод"></div>
    <div class="link"><a class="link-a" href="#" target="_blank">купить</a></div>
  </div>
  <div class="item">
    <div class="title">Товар 4</div>
    <div class="input"><input type="text" placeholder="Введите промокод"></div>
    <div class="link"><a class="link-a" href="#" target="_blank">купить</a></div>
  </div>
</div>

CSS

.link-a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #cccccc;
  color: #ffff;
  width: 100%;
  height: 40px;
  text-decoration: none;
  pointer-events: none;
}
.link-a.success {
  pointer-events: auto;
  background: #ff0000;
}














* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.wr {
  display: flex;
  width: 100%;
  margin-bottom: 50px;
}
b {
  color :#ff0000;
  padding-left: 5px;
}
.item {
  width: 22%;
  padding: 0 1.5%
}
.input input {
  width: 100%;
  height: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
  
}