JSFiddle - React, Tailwind, and code Playground

by firegroove

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; */
}