JSFiddle - React, Tailwind, and code Playground

by matox

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.6/typed.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div class="profile">
  <div class="profile-image"><img width="200px" src="https://s3.eu-central-1.amazonaws.com/klarart/klara-profile-photo.jpg" alt="Klara"></div>
  <div class="profile-text">
    <div class="text-static">
      <p>Zdravo! Sem Klara</p>
    </div>
    <div class="text-typed"></div>
    <div class="sentences display-hidden" style="display: none;">
      in <span style="color: #AB47BC;">verjamem v domišljijo.</span><br>
      in <span style="color: #66BB6A;">sem grafična oblikovalka.</span><br>
      in <span style="color: #E91E63;">stremim po izjemnosti svojih izdelkov.</span><br>
      in <span style="color: #8BC34A;">s srcem izdelujem izdelke iz lesa.</span><br>
      in <span style="color: #C0CA33;">oblikujem poročna vabila.</span><br>
      in <span style="color: #3F51B5;">uživam v oblikovanju poročnih vabil.</span><br>
      in <span style="color: #F44336;">izdelujem izdelke iz lesa.</span><br>
      in <span style="color: #FFC107;">naj se ideja zdi nemogoča, vedno najdem rešitev.</span>
    </div>
  </div>
</div>

SCSS

.profile {
  text-align: center;
  
  .profile-image, .profile-text {
    display: block;
  }
  

  .profile-image {
    img {
      border-radius: 50%;
    }
  }
  
  .profile-text {
    position: relative;
    margin-left: 25px;
    
    font-family: 'Open Sans', sans-serif;
    font-size: 32px;
    font-weight: 100;
  
    .text-static {
      display: block;
    }
    
    .text-typed {
      display: inline-block;
    }
  }
}

.typed-cursor{
  opacity: 1;
  font-weight: 100;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  -ms-animation: blink 0.7s infinite;
  -o-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; }
}
@-ms-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}

JavaScript

function getSentances() {
  var sentences = $(".sentences").html()
  	.split("<br>")
  	.map(sentance => sentance.trim().replace('""', "'"));
  return sentences;
}

$(document).ready(function() {

  var typed = new Typed('.text-typed', {
    strings: getSentances(),
    typeSpeed: 50,
    backSpeed: 20,
    backDelay: 700,
    startDelay: 1000,
    smartBackspace: true,
    loop: true
  });
  
  
});