JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="epp">
<div class="ep">
<h1 class="envira">
  ENVIRA PHANI
</h1>
</div>
</div>

CSS

.epp {
      --palette-color-a: #ffffff;
    --palette-color-b: #1f1f1f;
    --palette-color-c: #f25331;
    --palette-color-d: #f98a66;
    --palette-color-e: #f6005d;
    --palette-color-f: #c9baa5;
    --card-blend-mode-1: multiply;
    --card-blend-mode-2: multiply;
    --slot-1: #ffffff;
    --slot-2: #1f1f1f;
    --slot-3: #f25331;
    --slot-4: #f98a66;
    --slot-5: #f6005d;
    --slot-6: #c9baa5;
    --slot-7: #1f1f1f;
    --slot-8: #f25331;
    --slot-9: #f98a66;
    --slot-10: #f6005d;
    --slot-11: #f98a66;
    --slot-12: #f25331;
    --card-background-color: var(--slot-2);
    --meta-color: #f25331;
    --nav-color: #f25331;
}
.ep {
  flex: 1;
  color: var(--palette-color-c);
}
.envira {
  background-image: linear-gradient(70deg,var(--palette-color-c) 35%,var(--palette-color-e) 70%,var(--palette-color-d));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    border: 1px solid var(--palette-color-c);
    border-image: linear-gradient(70deg,var(--palette-color-c) 35%,var(--palette-color-e) 70%,var(--palette-color-d)) 1;
    display: inline-block;
    margin-bottom: .2rem;
    margin-right: .5rem;
    text-transform: uppercase;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 4rem;
    font-weight: var(--fontWeightRegular);
    line-height: 1;
    padding-top: .1rem;
    text-transform: uppercase;
}