JSFiddle - React, Tailwind, and code Playground

by Arkl1te

HTML

<p>Te has logueado como <span class="color7 animation1 outlinecolor1 shadowcolor8">Arkl<span class="color1">1</span>te</span></p>


<input type="text" id="name" placeholder="Nickname" autofocus />

<p>Output:</p>
<p id="output"></p>

//debug// <br>
length: <span id="length"></span><br>

CSS

/*------------------------
 * Code by Fabián Fiesta *
 ------------------------*/

body{
	font-family: "arial black";
	font-weight: 700;
	color: gray;
	background: #222;
}

input{
	background: black;
	color: white;
}

.color1{color: red;}
.color2{color: lime;}
.color3{color: yellow;}
.color4{color: #0AF;}
.color5{color: cyan;}
.color6{color: magenta;}
.color7{color: white;}
.color8{color: black;}
.shadowcolor1{text-shadow: 2px 2px 2px red;}
.shadowcolor2{text-shadow: 2px 2px 2px lime;}
.shadowcolor3{text-shadow: 2px 2px 2px yellow;}
.shadowcolor4{text-shadow: 2px 2px 2px #0AF;}
.shadowcolor5{text-shadow: 2px 2px 2px cyan;}
.shadowcolor6{text-shadow: 2px 2px 2px magenta;}
.shadowcolor7{text-shadow: 2px 2px 2px white;}
.shadowcolor8{text-shadow: 2px 2px 2px black;}
.outlinecolor1{outline: 2px red;}
.outlinecolor2{outline: 2px lime;}
.outlinecolor3{outline: 2px yellow;}
.outlinecolor4{outline: 2px #0AF;}
.outlinecolor5{outline: 2px cyan;}
.outlinecolor6{outline: 2px magenta;}
.outlinecolor7{outline: 2px white;}
.outlinecolor8{outline: 2px black;}

.animation1{
	-webkit-animation: animation1 2s infinite linear;
	-moz-animation: animation1 2s infinite linear;
	-ms-animation: animation1 2s infinite linear;
	-o-animation: animation1 2s infinite linear;
	animation: animation1 2s infinite linear;
}

@-webkit-keyframes animation1{
	0%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 1;}
}
@-moz-keyframes animation1{
	0%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 1;}
}
@-ms-keyframes animation1{
	0%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 1;}
}
@-o-keyframes animation1{
	0%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 1;}
}
@keyframes animation1{
	0%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 1;}
}

JavaScript

$(document).ready(function() {
	$("#name").keyup(function(event) {
		$("#output").text($(this).val());
		var nick = $(this).val();
		var length = nick.length;

		$("#length").text(length);

		var colormode = false;
		/*for(var i = 0; i < length ; i++){
			if (nick[i] == "^"){
				switch(nick[i+1]){
					case 1: {$nick.wrap("<span class='color1'></span>");break;}
					case 2: {$nick.wrap("<span class='color2'></span>");break;}
					case 3: {$nick.wrap("<span class='color3'></span>");break;}
					case 4: {$nick.wrap("<span class='color4'></span>");break;}
					case 5: {$nick.wrap("<span class='color5'></span>");break;}
					case 6: {$nick.wrap("<span class='color6'></span>");break;}
					case 7: {$nick.wrap("<span class='color7'></span>");break;}
					case 8: {$nick.wrap("<span class='color8'></span>");break;}
				}
			}
		}*/

		/*if(event.keyCode == 13){

			nick.replace("^1", '<span class="color1">');
			nick.append("</span>");
		}*/

	});
});