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>
<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!</p>
      <p>Sem Klara in</p>
    </div>
    <div class="text-typed"></div>
  </div>
</div>

SCSS

.profile {
  .profile-image {
    display: inline-block;  
  
    img {
      border-radius: 50%;
    }
  }
  
  .profile-text {
    display: inline-block;
    font-size: 1.5em;
  }
}

JavaScript

$(document).ready(function() {

  var typed = new Typed('.text-typed', {
    strings: ["First sentence.", "Second sentence."],
    typeSpeed: 0,
    backSpeed: 0,
    backDelay: 500,
    startDelay: 1000,
  });
  
});