JSFiddle - React, Tailwind, and code Playground

by aslancods

HTML

<!-- Font Size 10px -->
<div class="helvetica">
    <a href="#" class="anchor"><span class="span fs10">Find Us</span></a>
</div>

<div class="arial">
    <a href="#" class="anchor"><span class="span fs10">Find Us</span></a>
</div>
<!-- Font Size 10px End -->
<br/>
<!-- Font Size 20px -->
<div class="helvetica">
    <a href="#" class="anchor"><span class="span fs20">Find Us</span></a>
</div>

<div class="arial">
    <a href="#" class="anchor"><span class="span fs20">Find Us</span></a>
</div>
<!-- Font Size 20px -->

CSS

.anchor {
    display: inline-block;
    background-color: #000;
    
    text-decoration: none;
    vertical-align: middle;
    text-align: center;
}
.span {
    color: #fff;
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
}

.helvetica { margin-bottom: 20px;}

.helvetica .span { font-family: helvetica;}
.arial .span { font-family: arial;}

.fs10 { font-size: 10px; }
.fs20 { font-size: 20px; }