JSFiddle - React, Tailwind, and code Playground

by danielugalde

HTML

<div class='content'>
                              <div class='visible'>
                                <p>
                                  Hello
                                </p>
                                <ul>
                                  <li>world !</li>
                                  <li>Bob !</li>
                                  <li>users !</li>
                                </ul>
                              </div>
                            </div>

CSS

.content {
			  width:auto;
			  height:40px;
			  font-size:50px;
			  line-height:40px;
			  color:lighten(@negro, 20%);
			  position:absolute;
			  top:50%;
			  left:50%;
			  margin-top:-15px;
			  margin-left:-118px;
			  
			  &:before {
			    content:'[';
			    position:absolute;
			    left:-30px;
			    line-height:40px;
			  }
			  &:after {
			    content:']';
			    position:absolute;
			    right:-30px;
			    line-height:40px;
			  }
			  &:after, &:before {
			  	font-family: znikomit;
			    color:lighten(@negro, 20%);
			    font-size:50px;
			    animation:2s linear 0 normal none infinite opacity;
			    -webkit-animation:2s ease-out 0 normal none infinite opacity;
			    -moz-animation:2s ease-out 0 normal none infinite opacity;
			    -o-animation:2s ease-out 0 normal none infinite opacity;
			  }
			}

			.visible {
			  float:left;
			  font-weight:300;
			  overflow:hidden;
			  height:40px;   
			}

			p {
			  display:inline;
			  float:left;
			  margin:0;
			}

			ul {
			  margin-top:0;
			  padding-left:110px;
			  text-align:left;
			  list-style:none;
			  animation:6s linear 0 normal none infinite change;
			  -webkit-animation:6s linear 0 normal none infinite change;
			  -moz-animation:6s linear 0 normal none infinite change;
			  -o-animation:6s linear 0 normal none infinite change;
			}

			ul li {
			  line-height:40px;
			  margin:0;
			}

			@-webkit-keyframes opacity {
			  0%   {opacity:0;}
			  50%  {opacity:1;}
			  100% {opacity:0;}
			}
			@keyframes opacity {
			  0%   {opacity:0;}
			  50%  {opacity:1;}
			  100% {opacity:0;}
			}

			@-webkit-keyframes change {
			  0%   {margin-top:0;}
			  15%  {margin-top:0;}
			  25%  {margin-top:-40px;}
			  40%  {margin-top:-40px;}
			  50%  {margin-top:-80px;}
			  65%  {margin-top:-80px;}
			  75%  {margin-top:-40px;}
			  85%  {margin-top:-40px;}
			  100% {margin-top:0;}
			}
			@keyframes change {
			  0%   {margin-top:0;}
			  15%  {margin-top:0;}
			  25% ...