JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
        <h1 id="technique-one">
      <a href="#">w3cplus</a>
        </h1>
        
        <h1 class="technique-two">w3cplus</h1>
        
        <h1 class="technique-three">w3cplus</h1>
        
        <h1 class="technique-four">
      <a href="#">
        <img src="http://www.w3cplus.com/sites/default/files/w3cplus-logo.png" alt="w3cplus" />
      </a>
        </h1>
        
        <h1 class="technique-five">
      <img src="http://www.w3cplus.com/sites/default/files/bank.gif" alt="w3cplus" />
      <span>w3cplus</span>
        </h1>
        
        <h1 class="technique-six">w3cplus</h1>
        
        <h1 class="technique-seven">
        <span>w3cplus</span>
        </h1>
        
        <h1 class="technique-eight">
      <span></span>w3cplus
        </h1>
        
        <h1 class="technique-nine">w3cplus</h1>
        
        <h1 class="technique-ten"><span>w3cplus</span></h1>
    </div>

CSS

#technique-one {
      width: 329px;
      height: 79px;
      background-image: url(http://www.w3cplus.com/sites/default/files/w3cplus-logo.png);
    }
        #technique-one a {
      display: none;
        }
        
        .technique-two {
      width: 2329px;
      height: 79px;
      background: url(http://www.w3cplus.com/sites/default/files/w3cplus-logo.png) no-repeat top right;
      margin: 0 0 0 -2000px;
        }
        
        .technique-three {
      width: 329px;
      height: 79px;
      background: url(http://www.w3cplus.com/sites/default/files/w3cplus-logo.png);
      text-indent: -9999px;
        }
        
        .technique-four {
      width: 329px;
      height: 79px;
      background: url(http://www.w3cplus.com/sites/default/files/w3cplus-logo.png);
      text-indent: -9999px;
        }
        
        .technique-five {
      width: 329px;
      height: 79px;
      background: url(http://www.w3cplus.com/sites/default/files/w3cplus-logo.png);
    }
    .technique-five span {
      display: none;
    }
        .technique-six {
      width: 329px;
            padding: 79px 0 0 0;
      height: 0px;
            font-size:0;
      background: url(http://www.w3cplus.com/sites/default/files/w3cplus-logo.png);
      overflow: hidden;
        }
        .technique-seven {
      width: 329px;
      height: 79px;
      background: url(http://www.w3cplus.com/sites/default/files/w3cplus-logo.png);
    }
    .technique-seven span {
      display: block;
      width: 0;
      height: 0;
            font-size:0;
      overflow: hidden;
    }
        
        .technique-eight {
      width: 329px;
      height: 79px;
      position: relative;
    }
    .technique-eight span {
      background: url(http://www.w3cplus.com/sites/default/files/w3cplus-logo.png);
      position: absolute;
      width: 100%;
      height: 100%;
    }
        
        .technique-nine {
      width: 329px;
      height: 79px;
      background:...