JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div> 
    <h2 class="entry-title">
        <a href="#non" rel="bookmark" title="title" class="url">Dennis the Peasant</a>
        <a class="external-link url" rel="external" itemprop="url" title="link to #non" href="#non">⚓</a>                  
    </h2>      
</div>                       
        
 <div> 
    <h2 class="entry-title">
        <a href="#non" rel="bookmark" title="title" class="url">Dennis the Peasant</a>
        <a class="external-link url" rel="external" href="#non">text</a>                  
    </h2>      
</div>                       

<article>
    <h2 class="entry-title">
        <a href="#non" rel="bookmark" title="title" class="url">Dennis the Peasant</a>
        <a class="external-link url" rel="external" itemprop="url" title="link to #non" href="#non">⚓</a>                  
    </h2>      
</article>

<article>
    <h2 class="entry-title">
        <a href="#non" rel="bookmark" title="title" class="url">Dennis the Peasant</a>
        <a class="external-link url" rel="external" href="#non">text</a>                  
    </h2>      
</article>

CSS

html {
background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAHUlEQVQokWNgYGDgYCABMJGieFTDENbAyEBi0gAALwcAJsIOTdsAAAAASUVORK5CYII=")
0 -6px repeat;    

body {
    font: 100%/1.5 sans-serif;
    max-width: 480px;
    width: 96%;
    margin: 3em auto;
}

a {
    color: red;
    text-decoration: none;
    border-bottom: 1px solid;
}

div h2 {
    font-size: 1.5em;
    line-height: 1em;
    margin-bottom: 1em;
    font-weight: normal;
}

div a[rel="external"] {
    font-size: 0.666667em;
    line-height: 1.5em;
}

article h2 {
    font-size: 24px;
    line-height: 16px;
    margin-bottom: 24px;
    font-weight: normal;
}

article a[rel="external"] {
    font-size: 16px;
    line-height: 24px;
}