JSFiddle - React, Tailwind, and code Playground

by GarlvZ

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  
</head>
<body>
  <div class="watermark">
    <p id="watermark">hover effect</p>
    </div>
  </body>
</html>

CSS

html, body{
    background-color: black;
    color:  white;
    overflow: hidden;
}
p{
    text-align: center;
    cursor: default;
}
.watermark{
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    resize: none;
}
#watermark{
    color: white;
    font-size: 260%;
    transition: 2s color linear;
    -webkit-transition: color 2s linear;
}
#watermark:hover{
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s linear;
    color:  rgb(255, 17, 69);
}