JSFiddle - React, Tailwind, and code Playground

by Lay Brownsugar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
<span class="TypeWirter_effect"></span><span class="lang"></span>

CSS

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

JavaScript

$(function() {
		$('.TypeWirter_effect').typed({
			strings: ['Want to learn Coding?', 'Want to learn '],
			typeSpeed: 50,
			backDelay: 3000,
			callback: function(){ showLang(); $('.typed-cursor').first().hide(); }
		});
});
function showLang() {
		$('.lang').typed({
			strings: ['C++', 'Java', 'Python'],
			typeSpeed: 50,
			backDelay: 2000,
      loop: true
		});
}