JSFiddle - React, Tailwind, and code Playground

by Vikram Deshmukh

HTML

<body>
  <header>
    <h1>Welcome to eCampus</h1>
  </header>
  <section class="wrapper">
    <img src='https://upload.wikimedia.org/wikipedia/en/thumb/e/ec/San_Jose_State_Spartans_logo.svg/747px-San_Jose_State_Spartans_logo.svg.png' width="126px" />
    <div id="container">
      <h2 class="sentence">
    <div style="margin-bottom:5px;margin-left:15px">eCampus</div>
    <div class="slidingVertical">
      <span style="margin-left:0px">facilitates</span>
      <span style="margin-left:0px">supports</span>
      <span style="margin-left:0px">for</span>
      <span style="margin-left:0px">champions</span>
      <span style="margin-left:0px">contributes to</span>
<!--            <span style="margin-left:-55px">promotes</span>
                  <span style="margin-left:-55px">contributes to</span>-->
    </div>
    <div style="    margin-top: 15px;margin-left: 17px;">Spartan Success</div>
  </h2>
    </div>

  </section>


</body>

CSS

/*Body*/

body {
  background-color: #e5a824;
  font-family: 'Raleway', sans-serif;
  padding:20px;
  box-sizing: border-box;
}

header {
  display: none;
}
/*Heading1*/
section.wrapper {
  margin-top:20px !important;
}
h1 {
  color: #fff;
  font-size: 44px;
  margin-top: 40px;
  text-align: center;
}

.sentence div {
  display: block;
  text-align: left;
}


/*Sentence*/

.sentence {
  color: #0055a2;
  font-size: 30px;
  text-align: left;
  margin-top: 0px;
  margin-left: 10px;
}



/*Wrapper*/

.wrapper {
  background-color: #f5f5f5;
  font-family: 'Raleway', sans-serif;
  margin: 100px auto;
  padding: 40px 40px;
  position: relative;
  width: 70%;
}


/*Vertical Sliding*/

.slidingVertical {
  display: inline;
  text-indent: 8px;
  width: 210px;
  height: 20px;
  text-align: center;
  margin-top: -2px;
  margin-bottom: 20px;
}

.slidingVertical span img {
  display: inline;
}

.slidingVertical span {
  animation: topToBottom 12.5s linear infinite 0s;
  -ms-animation: topToBottom 12.5s linear infinite 0s;
  -webkit-animation: topToBottom 12.5s linear infinite 0s;
  color: #0055a2;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  text-transform: lowercase;
}

.slidingVertical span:nth-child(2) {
  animation-delay: 2.5s;
  -ms-animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
}

.slidingVertical span:nth-child(3) {
  animation-delay: 5s;
  -ms-animation-delay: 5s;
  -webkit-animation-delay: 5s;
}

.slidingVertical span:nth-child(4) {
  animation-delay: 7.5s;
  -ms-animation-delay: 7.5s;
  -webkit-animation-delay: 7.5s;
}

.slidingVertical span:nth-child(5) {
  animation-delay: 10s;
  -ms-animation-delay: 10s;
  -webkit-animation-delay: 10s;
}


/*topToBottom Animation*/

@-moz-keyframes topToBottom {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -moz-transform: translateY(-50px);
  }
  10% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }
  25% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }
  30% {
    opacity: 0;
   ...