JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div class="wrapper">
<div class="btn-group">
  <button>Button1</button>
  <button>Button2</button>
  <button>Button3</button>
  <button>Button4</button>
  <button>Button5</button>
  <button>Button6</button>
</div>
</div>

<textarea>
</textarea>

</body>

CSS

/* Commented out because of background img
body {
	background-image: url(./images/background.jpg);
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
*/

.btn-group button {
    background:#DF6C6C;
    border-color: transparent;
    color: white;
    padding: 10px 24px;
    cursor: pointer;
    float: left;
    outline:0px !important;
    -webkit-appearance:none;
}

.btn-group button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
    background-color: #E58B8B;
}

/* Align buttons */
.wrapper{
	text-align: center;
}

textarea {
	resize: none;
	margin: 5px 10px 5px 10px;
	border-radius: 8px;
  outline:0px !important;
  -webkit-appearance:none;
  height: 100%;
}