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>
Want to learn <span class="TypeWirter_effect"></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: ["Coding?", "C++?", "Java?", "Python?"],
        typeSpeed: 0,
        loop: true,
        backSpeed: 30,
        showCursor: true,
        backDelay: 1000,
        startDelay: 1000,
        contentType: 'text'
    });
});