JSFiddle - React, Tailwind, and code Playground

by janjarfalk

HTML

<div class="underline-01">
    <h1>Text Decoration</h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, quae odit ducimus quas at <span>dopogrem</span> quaerat, iure tempora eum facilis enim delectus ipsum perspiciatis magnam placeat reprehenderit ut, alias vel!
</div>
<div class="underline-01b">
    <h1>Text Decoration with Text Decoration Color</h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, quae odit ducimus quas at <span>dopogrem</span> quaerat, iure tempora eum facilis enim delectus ipsum perspiciatis magnam placeat reprehenderit ut, alias vel!
</div>
<div class="underline-02">
        <h1>Border Bottom</h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, quae odit ducimus quas at <span>dopogrem</span> quaerat, iure tempora eum facilis enim delectus ipsum perspiciatis magnam placeat reprehenderit ut, alias vel!
</div>
<div class="underline-03">
                <h1>Box Shadow</h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, quae odit ducimus quas at <span>dopogrem</span> quaerat, iure tempora eum facilis enim delectus ipsum perspiciatis magnam placeat reprehenderit ut, alias vel!
</div>
<div class="underline-06">
                <h1>Box Shadow with Text Shadow</h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, quae odit ducimus quas at <span>dopogrem</span> quaerat, iure tempora eum facilis enim delectus ipsum perspiciatis magnam placeat reprehenderit ut, alias vel!
</div>
<div class="underline-05">
     <h1>Background Image Linear Gradient with Text Shadow</h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, quae odit ducimus quas at <span>dopogrem</span> quaerat, iure tempora eum facilis enim delectus ipsum perspiciatis magnam placeat reprehenderit ut, alias vel!
</div>
<div class="underline-07">
     <h1>Box Shadow with Border Bottom and Text Shadow</h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, quae...

CSS

html, body {
    width: 100%;
    height: 100%;
}
h1 {
    font-size: 16px;
    color: #333;
}
div {
    display: block;
    max-width: 1000px;
    padding: 10% 10%;
    width: 80%;
    height: 80%;
    font-size: 30px;
    font-family: Helvetica Neue;
    line-height: 1.618em;
    font-weight: 200;
    float: left;
}

.underline-01 span {
    text-decoration: underline;
    color: #03f;
}

.underline-01b span {
    text-decoration: underline;
    text-decoration-color: red; /* Only Firefox */
    color: #03f;
}

.underline-02 span {
    color: #000;
    border-bottom: 3px solid #03f;
}

.underline-03 span {
        border-bottom: 0px solid rgba(0,0,255,1);
    box-shadow: inset 0 -3px 0 rgba(0,0,255,1);
    color: inherit;
    
}
.underline-04 span {
      text-decoration: none;
  background-image: linear-gradient(to top,
    rgba(0,0,255,0) 7%,
    rgba(0,0,255,1) 7%,
    rgba(0,0,255,1) 12%,
    rgba(0,0,255,0) 12%
    );
}
.underline-05 span {
  text-shadow:
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
      text-decoration: none;
  background-image: linear-gradient(to top,
    rgba(0,0,255,0) 7%,
    rgba(0,0,255,1) 7%,
    rgba(0,0,255,1) 12%,
    rgba(0,0,255,0) 12%
    );
}
.underline-06 span {
        border-bottom: 0px solid rgba(0,0,255,1);
    box-shadow: inset 0 -3px 0 rgba(0,0,255,1);
    color: inherit;
     text-shadow:
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
      text-decoration: none;
}
.underline-07 span {
        border-bottom: 5px solid #ff64f2;
    box-shadow: inset 0 -5px 0 #ffadf8;
    color: inherit;
     text-shadow:
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
      text-decoration: none;
}