JSFiddle - React, Tailwind, and code Playground

by abhinav3414

HTML

<div class="banner-header" style="text-align: center;">
<p class="button primary" style="font-family: Montserrat, sans-serif; font-style: normal; text-decoration: none; background-color: #ffffff; border: 1px solid #ffffff; border-radius: 50px; color: #ffffff; fill: #ffffff; font-size: 20px; padding: 12px 35px; text-transform: none; background:red; cursor: pointer">
    <a style="color: #f36e5b; font-weight: bold; text-decoration: none;" href="#form" rel="nofollow noopener">Request Free Trial</a>
</p>

CSS

.block {
  min-height: 500px;
  max-width: 300px;
  width: 100%;
  background: linear-gradient(180deg, #1e326f 0, #090c38 100%);
  display: flex;
  justify-content: flex-end;
  flex-flow: column wrap;
  padding: 30px;
}

.block .btn {
  width: 100%;
  border-radius: 50%;
  background: #fff;
  max-width: 50px;
  max-height: 50px;
  height: 100%;
  min-height: 50px;
  position: relative;
}
.block .btn:after {
  content:'>';
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}