JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

<div class="bot ">

đź”’You Need 80 More Subscribersđź”’

</div>

CSS

.top {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00ff00+0,00ff00+50,ff0066+51,ff0066+100 */
background: linear-gradient(to right,  rgba(0,255,0,1) 0%,rgba(0,255,0,1) 50%,rgba(255,0,102,1) 51%,rgba(255,0,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.bot {background: linear-gradient(to right,  rgba(0,255,0,1) 0%,rgba(0,255,0,1) 100%,rgba(255,0,102,1) 101%,rgba(255,0,102,1) 100%);
top: 0;
border: solid 1px black;
  border-radius: 1000px;
  width: 100%;
  height: 28px;
color: yellow;
display : flex;
  align-items : center;
  text-align: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #4074b5, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #4074b5;
  font-size: 22px;
  font-weight: bold
}

.mydiv {
  border: solid 1px black;
  border-radius: 1000px;
  width: 100%;
  height: 48px;
  color: white;
text-align: center;
vertical-align: middle;
content-align: center
}

.inner {
  position: absolute;
}

.txtdiv {width: 100%;
  height: 48px;
  z-index: 20;
  }