JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

<hr>

CSS

body {
  @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono);
  font-family: 'Ubuntu Mono', sans-serif;
  padding: 0.25rem;
  max-width: 500px;
  margin:0 auto;
  background-color:#180E15;
}

h2{
  color:#FF476A;
  text-align:center;
}

p{
  color:#4A3247;
  text-align:center;
}

hr{
  display:block;
  margin:0 auto;
  height:1px;
  
  border:none;
  border-radius: 3px;
  border-left:15px solid #f00000;
  border-right:15px solid #300000;
  animation: KARRAnim 3s infinite ease-in-out alternate;
}

hr:before{
  content:" ";
  display:inline-block;
  width:15px;
  height:15px;
  border-left:15px solid #c00000;
  border-right:15px solid #600000;
  animation: KARRAnimBefore 3s infinite ease-in-out alternate;
}

hr:after{
  content:" ";
  display:inline-block;
  width:15px;
  height:15px;
  border-left:15px solid #300000;
  background-color:#300000;
  border-right:15px solid #300000;
  animation: KARRAnimAfter 3s infinite ease-in-out alternate;
}


/**
    Keyframes
Do not try at home

**/


@keyframes KITTAnim {
   0% {
      background-color:#300000;
      border-left:15px solid #f00000;
      border-right:15px solid #300000;
   }
   10% {
      background-color:#300000;
      border-left:15px solid #f00000;
      border-right:15px solid #300000;
   }
   20% {
      background-color:#300000;
      border-left:15px solid #c00000;
      border-right:15px solid #300000;
   }
   30% {
      background-color:#300000;
      border-left:15px solid #a00000;
      border-right:15px solid #300000;
   }
   40% {
      background-color:#300000;
      border-left:15px solid #600000;
      border-right:15px solid #300000;
   }
   50% {
      background-color:#600000;
      border-left:15px solid #300000;
      border-right:15px solid #300000;
   }
   60% {
      background-color:#a00000;
      border-left:15px solid #300000;
      border-right:15px solid #600000;
   }
   70% {
      background-color:#c00000;
      border-left:15px solid #300000;
     ...