index.css

/*------set padding and margin 0 because, we can show our style perfectly ------*/
body {
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

#header {
  width: 100%;
  height: 30px;
  background-color: #EEEEEE;
  padding: 5px;
}

#buttonContainer {
  width: 225px;
  margin: 0 auto;
}

/*----- all the button need to align in the same line, so use float: left------*/
/*---border-right: none;  to avoid border duplication And we will custom style HTML-Output
border manually------*/
.toggleButton {
  float: left;
  padding: 5px;
  border: 1px solid grey;
  border-right: none; 
  font-size: 90%;
}

#html {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

#output {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right: 1px solid grey;
}

/*----- all the button and logo also need to align in the same line, so use float: left------*/
#logo {
  float: left;
  font-weight: bold;
  font-size: 28px;
  color: blueviolet;
}

/*made by*/
#madeBy {
  float: right;
  font-size: 70%;
  padding-top: 8px;
  margin-right: 7px;
}

/*---initially html and output will be selected as active*/
.active {
  background-color: #D3D3D3; 
}

/*highlightedButton class for selecting particular button*/
.highlightedButton {
  background-color: grey;
}

/*textarea*/
textarea {
  resize: none;
  border-top: none;
}

/*panel class*/
.panel {
  float: left;
  border-left: none;
}

/*iframe*/
iframe {
  border: none;
}

/*initially css and javascript will be hidden*/
.hidden {
  display: none;
}