JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<header class="header">
  <svg height="40" viewBox="0 0 70 40" width="70" xmlns="http://www.w3.org/2000/svg">
<path d="M50.865,25.465c-0.44-2.2-1.866-3.747-3.165-3.446s-2.021,2.318-1.576,4.51,1.865,3.736,3.166,3.445,2.018-2.311,1.575-4.509M56,0A13.307,13.307,0,0,0,43.569,8.845c-0.073.18-.128,0.382-0.2,0.573A36.438,36.438,0,0,0,35,8a36.424,36.424,0,0,0-8.38,1.419c-0.07-.191-0.128-0.393-0.2-0.573A13.285,13.285,0,0,0,14,0,14.1,14.1,0,0,0-.008,13.944C-0.008,21.621,5.476,27.961,13,28l1-5c-0.233.022-.763,0-1,0-0.176,0,.167.011,0,0a8.831,8.831,0,0,1-8-9,9.209,9.209,0,0,1,9-9,8.356,8.356,0,0,1,7.615,5.429,8.827,8.827,0,0,1,.72,3.516A10.045,10.045,0,0,1,22,16a23.149,23.149,0,0,1,5.381-2.1,32.661,32.661,0,0,1,15.229,0A23.124,23.124,0,0,1,48,16a10.8,10.8,0,0,1-.348-2.056,8.928,8.928,0,0,1,.724-3.516A8.349,8.349,0,0,1,56,5a9.213,9.213,0,0,1,9,9,8.836,8.836,0,0,1-8,9c-0.169.011,0.173,0,0,0-0.254,0-.749.022-1,0l1,5c7.537-.012,13-6.369,13-14.056A14.09,14.09,0,0,0,56,0ZM35,22.987c-3.31,0-5.994,3.812-5.994,8.513S31.691,40.012,35,40.012s6.012-3.817,6.012-8.512S38.321,22.987,35,22.987ZM20.689,29.974c1.317,0.3,2.756-1.244,3.191-3.445s-0.26-4.211-1.58-4.51-2.744,1.251-3.187,3.453S19.373,29.69,20.689,29.974Z"></path>
</svg> Привет я мир
</header>
<div class="red"></div>
<div class="black"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="green"></div>

CSS

.header{
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 104;
  -webkit-transition: transform 0.4s cubic-bezier(0.0725, 0.2775, 0.1875, 1.0625);
  -moz-transition: transform 0.4s cubic-bezier(0.0725, 0.2775, 0.1875, 1.0625);
  -ms-transition: transform 0.4s cubic-bezier(0.0725, 0.2775, 0.1875, 1.0625);
  -o-transition: transform 0.4s cubic-bezier(0.0725, 0.2775, 0.1875, 1.0625);
  transition: transform 0.4s cubic-bezier(0.0725, 0.2775, 0.1875, 1.0625);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  mix-blend-mode: difference;
  color: #fff
}
svg{
    fill: #fff;
    /*fill-rule: evenodd;*/
}

div{
  height: 300px;
}
.red{
  background-color: red;
}
.black{
  background-color: #000;
}
.white{
  background-color: #fff;
}
.blue{
  background-color: blue;
}
.green{
  background-color: green;
}