JSFiddle - React, Tailwind, and code Playground

by Paul Esch-Laurent

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/mattboldt/typed.js/master/js/typed.js"></script>
<header>
 <p>So, who am I?</p>
</header>
<body>
<div class ="mtext">
<h1 id="pretyped"> I am <h1 id="typed"></h1></h1>

<br>
</div>

CSS

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
  
    overflow-x: hidden; 
}

@font-face {
    font-family: "nevis";
    src: url("../fonts/nevis-webfont.eot");
    src: url("../fonts/nevis-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/nevis-webfont.woff") format("woff"),url("../fonts/nevis-webfont.ttf") format("truetype"),url("../fonts/nevis-webfont.svg#nevis") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Lavanderia";
    src: url("../fonts/Lavanderia.eot");
    src: url("../fonts/Lavanderia.eot?#iefix") format("embedded-opentype"),url("../fonts/Lavanderia.woff") format("woff"),url("../fonts/Lavanderia.ttf") format("truetype"),url("../fonts/Lavanderia.svg#nevis") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Againts";
    src: url("../fonts/Againts.eot");
    src: url("../fonts/Againts.eot?#iefix") format("embedded-opentype"),url("../fonts/Againts.woff") format("woff"),url("../fonts/Againts.ttf") format("truetype"),url("../fonts/Againts.svg#nevis") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "MoonL";
    src: url("../fonts/MoonL.eot");
    src: url("../fonts/MoonL.eot?#iefix") format("embedded-opentype"),url("../fonts/MoonL.woff") format("woff"),url("../fonts/MoonL.ttf") format("truetype"),url("../fonts/MoonL.svg#nevis") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Simplifica";
    src: url("../fonts/simplifica.eot");
    src: url("../fonts/simplifica.eot?#iefix") format("embedded-opentype"),url("../fonts/simplifica.woff") format("woff"),url("../fonts/simplifica.ttf") format("truetype"),url("../fonts/simplifica.svg#nevis") format("svg");
    font-weight: normal;
    font-style: normal;
}
header
{	text-align: center;
	font-family: 'MoonL';
	font-size:...

JavaScript

$(function(){
  $("#typed").typed({
    strings: ["Jack.", "a Programmer.","a Gamer.","an Enthusiast who has a passion for Knowledge, Experiences, Challenges and Food."],
    typeSpeed: 20,
    loop: false,
    // defaults to false for infinite loop
    callback: function(){ foo(); }
  });


  function foo(){ console.log("Callback"); }
});