JSFiddle - React, Tailwind, and code Playground

HTML

<div class="splash_button_row">
			<span>
			<a href="www.google.com" class="splash_button">label 4 label 4 label 4 </a>
            <a href="www.google.com" class="splash_button">label 2</a>
			<a href="www.google.com" class="splash_button">label 5 label 5label 5</a>
            <a href="www.google.com" class="splash_button">label 5 label 5label 5label 5 label 5label 5</a>
			</span>
		</div>

CSS

.splash_button {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 34;
  -moz-border-radius: 34;
  border-radius: 34px;
  text-shadow: 6px 4px 4px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  box-shadow: 2px 2px 3px #666666;
  font-family: Georgia;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  border: solid #216e9e 2px;
  text-decoration: none;
  display:inline-block;
  margin:10px;
  white-space: normal !important;
  word-wrap: break-word;
  max-width: 130px !important;
  text-align: center;
  vertical-align: middle;
}