JSFiddle - React, Tailwind, and code Playground

HTML

<br>


<button class="styled">Hello World</button>
<br>
<br>

<button class="bibou one">Yellow to Red</button>

CSS

button.styled {
  color: #fff;
  background: #00B48C;
  /* CHANGE ONLY THIS ONE AND SEE IT HAPPEN ;) */
  padding: 10px 45px 10px 15px;
  border-radius: 4px;
  /* Do not edit below */
  border: 0;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

button.styled:after {
  background: rgba(0, 0, 0, 0.2);
  padding: 11px;
  content: '\25be';
  /* \25bc \25be */
  /* Do not edit below */
  position: absolute;
  right: 0;
  top: 0;
}

.bibou {
  color: white;
  line-height: 1.313rem;
  /* height:100px; */
  width: 120px;
  /* padding:10px;
}
* { box-sizing: border-box }


div{
    padding: 4% 10%;
}
header, footer{
  background-color:#002848;
  min-height: 40px;
}
.one{
  /* background-color: red; */
  background-image: -webkit-linear-gradient(0deg, yellow 50%, red 50%);
  /* min-height: 500px; */
}

.two {
  background-color: #34ADFF;
  background-image: -webkit-linear-gradient(150deg, #34ADFF 35%, #4CBFFF 35%);
  /* min-height: 400px; */
}

.three {
  background-color: #EFEEEF;
  /* min-height: 260px; */
}

.four {
  background-color: #E0E0E0;
  /* min-height: 260px; */
}

.five {
  background-color: #EFEEEF;
  /* min-height: 260px; */
}

.six {
  background-color: #34ADFF;
  background-image: -webkit-linear-gradient(30deg, #34ADFF 45%, #4CBFFF 45%);
  /* min-height: 400px; */
}

.seven {
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(150deg, #013A6B 35%, #004E95 35%);
  /* min-height: 200px; */
}