JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div>Demo by Hugo Giraudel. <a href="http://www.sitepoint.com/rainbow-border-with-sass/">See article<br><br></div>.

CSS

div {
  position: relative;
  height: 100%;

}
div:before, div:after {
  position: absolute;
  content: '';
  height: 1em;
  top: 0;
  left: 0;
  right: 0;
}
div:after {
  top: auto;
  bottom: 0;
}
div:before {
  background: linear-gradient(90deg, #1abc9c 1%, #2ecc71 1%, #2ecc71 29%, #3498db 29%, #3498db 32%, #9b59b6 32%, #9b59b6 37%, #34495e 37%, #34495e 53%, #f1c40f 53%, #f1c40f 69%, #e67e22 69%, #e67e22 67%, #e74c3c 67%, #e74c3c 74%, #ecf0f1 74%, #ecf0f1 100%, #95a5a6 100%);
}
div:after {
  background: linear-gradient(90deg, #1abc9c 10%, #2ecc71 10%, #2ecc71 12.5%, #3498db 12.5%, #3498db 28%, #9b59b6 28%, #9b59b6 35%, #34495e 35%, #34495e 60%, #f1c40f 60%, #f1c40f 69%, #e67e22 69%, #e67e22 83%, #e74c3c 83%, #e74c3c 88%, #ecf0f1 88%, #ecf0f1 96%, #95a5a6 96%);
}

div {
  padding-top: 20px;
  width: 450px;
}

p {
  text-align: center;
  color: white;
  font-family: Arial, sans-serif;
}

a {
  color: white;
}