JSFiddle - React, Tailwind, and code Playground

HTML Code and HTML Name for ASCII (American Standard Code for Information Interchange) characters.

by Jennifer Perrin

HTML

<div class="row" id="">
            <div class="span2" id=""><dl><dt>&#188;</dt>        <dd>&amp;#188;</dd><dd>&amp;frac14;</dd><dd>Fraction one quarter</dd></dl></div>                 
            <div class="span2" id=""><dl><dt>&#189;</dt>        <dd>&amp;#189;</dd><dd>&amp;frac12;</dd><dd>Fraction one half</dd></dl></div>                    
            <div class="span2" id=""><dl><dt>&#190;</dt>        <dd>&amp;#190;</dd><dd>&amp;frac34;</dd><dd>Fraction three quarters</dd></dl></div>
        </div>
        <div class="row" id="">        
            <div class="span2" id=""><dl><dt>&#185;</dt>        <dd>&amp;#185;</dd><dd>&amp;sup1;</dd><dd>Superscript one</dd></dl></div>                        
            <div class="span2" id=""><dl><dt>&#178;</dt>        <dd>&amp;#178;</dd><dd>&amp;sup2;</dd><dd>Superscript two - squared</dd></dl></div>              
            <div class="span2" id=""><dl><dt>&#179;</dt>        <dd>&amp;#179;</dd><dd>&amp;sup3;</dd><dd>Superscript three - cubed</dd></dl></div>              
            <div class="span2" id=""><dl><dt>&#176;</dt>        <dd>&amp;#176;</dd><dd>&amp;deg;</dd><dd>Degree sign</dd></dl></div>
            <div class="span2" id=""><dl><dt>&nbsp;</dt>        <dd>&amp;#32;</dd><dd>&nbsp;</dd><dd>Space</dd></dl></div>
            <div class="span2" id=""><dl><dt>!</dt>            <dd>&amp;#33;</dd><dd>&nbsp;</dd><dd>Exclamation mark</dd></dl></div>
        </div>
        <div class="row" id="">        
            <div class="span2" id=""><dl><dt>&#161;</dt>        <dd>&amp;#161;</dd><dd>&amp;iexcl;</dd><dd>Inverted exclamation mark</dd></dl></div>             
            <div class="span2" id=""><dl><dt>#</dt>            <dd>&amp;#35;</dd><dd>&nbsp;</dd><dd>Number</dd></dl></div>
            <div class="span2" id=""><dl><dt>&amp;</dt>        <dd>&amp;#38;</dd><dd>&amp;amp;</dd><dd>Ampersand</dd></dl></div>
            <div class="span2" id=""><dl><dt>*</dt>           ...

CSS

body { background:#eeeeee; color:#444444; font-family:  "museo-sans", Helvetica, Arial ,sans-serif; padding-top:40px; width: 200px; }
      p { font-size:16px; line-height: 20px; }
      h1 { font-weight: 900; } 
      .site_description { padding:40px 0 25px; }
    dl { background: #fbfaf9; border: 1px solid #999; box-shadow: 0px 0px 8px #999999; border-radius: 5px; }
    dl:hover { box-shadow: 0px 0px 14px #444444; }
    dt, dd {  }
    dt { font-size: 70px; line-height: 100px ; text-align: center; background: #fbfaf9;   padding: 10px 0; }
    dd { border-top: 1px solid #999; margin:0; padding: 4px 6px;  font-family: "inconsolata",sans-serif; font-size:18px; background: #F0EDE9; }
    dd:last-child { font-family:  "museo-sans", Helvetica, Arial ,sans-serif; background:#fbfaf9; font-size:15px; border-radius: 0px 0px 5px 5px; }
    dt { border-radius: 5px 5px 0px 0px ; }

@media (max-width: 480px) {
    dt { font-size: 100px; line-height: 130px ;}
}