JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

HTML

<div class="wrapper">
    <i class="i">This is a text</i>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    height: 200px;
    background-color: gold;
    position: relative;
}

.i {
    position:absolute;
    left: 50%;
    top: 50%;
    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
   
    transition-duration: 0.6s;  
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;  
    -o-transition-duration: 0.6s;
    z-index:2;
}