JSFiddle - React, Tailwind, and code Playground

by Luckypouet

HTML

<div class="container"><div class="example"><h2 class="show">Titre 10px maj</h2><p class="title">Mise en avant <span>30px</span> red</p><p class="code">Avec le code <span>CODE BOLD #D00</span><br />Sur tous les articles porteurs du picto</p></div><p align="center" style="margin:2em ;line-height:0.5em;">|<br />V</p>
    
    <div class="test">
        
        <h2>LES JOURS FOUS !</h2>

        <p class="title">Jusqu'à <span>100€</span>
de réduction</p>
    
        <p>Avec le code <span>SHOETTE</span><br />Sur tous les articles porteurs du picto</p>
        
    </div>    
    
</div>

CSS

@font-face { font-family: "proximnr"; src: url("http://www.sarenza.com/Content/v3/Prod/fonts/proxima_nova.eot"); src: url("http://www.sarenza.com/Content/v3/Prod/fonts/proxima_nova.eot?#iefix") format('eot'), url("http://www.sarenza.com/Content/v3/Prod/fonts/proxima_nova.woff") format('woff'), url("http://www.sarenza.com/Content/v3/Prod/fonts/proxima_nova.ttf") format('truetype'), url("http://www.sarenza.com/Content/v3/Prod/fonts/proxima_nova.svg#wf") format('svg');  font-weight: normal;  font-style: normal; } @font-face {  font-family: "proximnb";  src: url("http://www.sarenza.com/Content/v3/Prod/fonts/proxima_nova_bold.eot");  src: url("http://www.sarenza.com/Content/v3/Prod/fonts/proxima_nova_bold.eot?#iefix") format('eot'), url("http://www.sarenza.com/Content/v3/Prod/fonts/proxima_nova_bold.woff") format('woff'), url("http://www.sarenza.com/Content/v3/Prod/fonts/proxima_nova_bold.ttf") format('truetype'), url("http://www.sarenza.com/Content/v3/Prod/fonts/proxima_nova_bold.svg#wf") format('svg');  font-weight: normal;  font-style: normal; }@font-face {  font-family: "abriltebi";  src: url("http://www.sarenza.com/Content/v3/Prod/fonts/abril_text_extrabolditalic.eot");  src: url("http://www.sarenza.com/Content/v3/Prod/fonts/abril_text_extrabolditalic.eot?#iefix") format('eot'), url("http://www.sarenza.com/Content/v3/Prod/fonts/abril_text_extrabolditalic.woff") format('woff'), url("http://www.sarenza.com/Content/v3/Prod/fonts/abril_text_extrabolditalic.ttf") format('truetype'), url("http://www.sarenza.com/Content/v3/Prod/fonts/abril_text_extrabolditalic.svg#abril_textextrabold_italic") format('svg');  font-weight: normal;  font-style: normal; }.container{ font:normal 16px proximnr; }.title{ font:normal 16px abriltebi; }.example{ padding:10px; text-align:center; font-weight:inherit; border:10px solid #900; }.example .show{ font-size:0.625em;  text-transform:uppercase;}.example .title{ margin:0; font:normal 30px/1em abriltebi; color:red; }.example .code span{...