JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<link href='https://fonts.googleapis.com/css?family=Mouse+Memoirs' rel='stylesheet' type='text/css'>
<div style="width: 100%; height: 100%;" class='container'>
  <div class="achievement">
    <div class="achievementIconBox">
      <img class="achievementIcon" src="//slither.io/s/favicon.png">
    </div>
    
    <div class="achievementInfo">
      <div class="achievementName">
        <h3 class="achievementNameTxt">Team Player</h3>
      </div>
      
      <div class="achievementDescription">
        <p class="achievementDescriptionTxt">
          Link a social media account to Slither.io
        </p>
      </div>
    </div>
  </div>
</div>

CSS

div.achievement {
  text-shadow: 0 0 10px black,
               0 0  2px black,
               0 0  2px black,
               0 0  2px black;

 // background-color: black;
  display:flex; flex-flow:row wrap;
 // background: linear-gradient(to top, #111111 0%,#000000 100%);
  width:55%;
  margin:0 auto;
  animation: fancy 1.0s forwards;
  -webkit-animation: fancy 1.0s forwards;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  visibility: hidden;
}
div.container{
  background-color: #000;
  padding: 50px;
}
@keyframes fancy {
    0%   {
      background-color: #000;
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      -webkit-filter: blur(20px);
      filter: blur(20px);
      visibility: visible;
    }
    10% {
      background-color: #fff;
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      -webkit-filter: blur(20px);
      filter: blur(20px);
      visibility: visible;
    }
     30% {
      background-color: #000;
      -webkit-filter: grayscale(50%);
      filter: grayscale(50%); 
      -webkit-filter: blur(2px);
      filter: blur(2px);
      visibility: visible;
     }
    70%  {
      background: linear-gradient(to top, #111111 0%,#000000 100%);
      -webkit-filter: grayscale(0%);
      filter: grayscale(0%);
      -webkit-filter: blur(0px);
      filter: blur(0px);
      visibility: visible;
    }
    100%  {
      background: linear-gradient(to top, #111111 0%,#000000 100%);
      -webkit-filter: grayscale(0%);
      filter: grayscale(0%);
      -webkit-filter: blur(0px);
      filter: blur(0px);
      visibility: visible;
    }
}

div.achievementIconBox {
  flex:1 15%;
}

div.achievementInfo {
  flex:1 85%;
}
h3.achievementNameTxt {
  margin:0 0 0 1vw; /* Selects top margin -> Right margin -> Bottom margin -> Left margin */
  color: white;
  font-size: 4vw;
  font-family: 'Mouse Memoirs';
}

p.achievementDescriptionTxt {
  color: gray;
  font-size: 1.8vw;
  font-family: "Lucidia Sans Unicode",...