JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<p>
<button class="btn">Bouton</button>
</p>

<p>
<a href="#" class="btn btn--alpha">Bouton</a>
</p>

SCSS

/* -------------------------------------------------------------------------- *\


   # Reset & mise à niveau 


\* -------------------------------------------------------------------------- */


/* ==========================================================================
   ## Reset
   ========================================================================== */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, form, fieldset, legend, table, th, td, caption, hr {margin:0; padding:0;}

/**
 * On annule le style sur les listes  
 */
ol, ul {list-style:none;}


/* ==========================================================================
   ## Uniformisation
   ========================================================================== */
/**
 * On empêche iOS d'ajuster la taille du texte après un changement d'orientation
 */
body {-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}

/**
 * Uniformisation des titres
 */
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal;}

/**
 * On retire les espaces dans les tableaux
 */
table {border-collapse:collapse; border-spacing:0; width:100%;}

/**
 * On uniformise le style des cellules
 */
caption, th {text-align:left;}


/**
 * Supprime la bordure sur tous les navigateurs 
 */
fieldset {border:0;}

/**
 * [1] Retire la bordure lorsque l'image est dans une balise `a` sur IE 8/9/19 
 * [2] On style le texte alternatif pour repérer les images non chargées
 * [3] Supprime l'espace sous les images pour IE
 */
img {border:0;/* [1] */ font-style:italic;/* [2] */ vertical-align:bottom;/* [3] */}

/**
 * Corrige l'overflow pour IE 9/10/11
 */
svg:not(:root) {overflow:hidden;}

/**
 * Corrige les différences entre Firefox et les autres navigateurs
 */
hr {height:0;}

/**
 * AJoute un style par défaut
 * Inexistant sur IE, Safari et Chrome
 */
abbr[title], 
acronym[title], 
dfn[title] {cursor:help; border-bottom:1px dotted; text-decoration:none;}

/**
 * On retire la couleur sur les liens...