JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="">
    <button type="button" class="cmp-tooltip chronopost-detect-location" >
        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.5 23.5"><path d="M9.2 23.5c-.2 0-.4-.1-.5-.2C8.4 23 0 14.9 0 8.8 0 3.9 4.1 0 9.2 0s9.2 3.9 9.2 8.8C18.4 15 10 23 9.7 23.3c-.1.1-.3.2-.5.2zm0-22C5 1.5 1.5 4.8 1.5 8.8c0 4.7 5.9 11.1 7.8 12.9 1.8-1.8 7.8-8.2 7.8-12.9-.1-4-3.6-7.3-7.9-7.3z"/><circle cx="9.2" cy="8.8" r="2"/></svg>
        <span class="cmp-tooltip-content top">Utiliser mon emplacement</span>
    </button>
	<div class="cmp-inputCtaStick">
		<div class="form-group cmp-floatLabel required">
			<input autofocus type="text" class="form-control cmp-floatLabel-input" id="chronopost-pickup-location-postal-code" name="postalCode" value="" autocomplete="nofill" required />
			<label class="form-control-label cmp-floatLabel-label" for="chronopost-pickup-location-postal-code">Code postal</label>
			
		</div>
		<button class="cmp-cta btn-chronopost-pickup-location-locator-search" type="button">
			OK
		</button>
		<div class="cmp-error cmp-inputCtaStick-error invalid-feedback">No coupon code entered</div>
	</div>
</div>

SCSS

//
// Config for form elements
//

$forms-elements-height: 40px!default;

// 
// Bootstrap define `$font-size-base` directly in rem
// We need a `px` based global variable to use it in rem and em calculations
// 
$font-size-base-px: 16px!default;

$font-default: Arial, sans-serif;

$heading: $font-default !default;
$text-bold: $font-default !default;
$text-reg: $font-default !default;


/// This project support rem
$rem: true !default;

/// Base Font Size
 //
 // | Variables   | Values                     |
 // |:------------|---------------------------:|
 // | $bfs  | _font-size_ -> **browser** |
 //
 // Styleguide Config.baseFontSize

$bfs: 16px !default;

/// Line height
 //
 // - `$lh`: line height.
 //
$lh: round($bfs / (2/3)) !default;

// COLORS
// If you need inspiration, use http://chir.ag/projects/name-that-color/ to name your colors.
$monza:   #D0021B;
$marino:  #425DAE;

// Grey colors
$white:   #fff !default;
$gallery: #ececec !default;
$alto:    #d0d0d0 !default;
$nobel:   #B4B4B4 !default;
$dove:    #737373 !default;
$black:   #000 !default;

// https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
@mixin visually-hidden {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  border:  0;
  height:  1px;
  width:   1px;
  overflow: hidden;
  clip: rect(1px  1px  1px  1px);
  clip: rect(1px, 1px, 1px, 1px);
  opacity: .001;
}

//  # Suppresion de l’unité

// - `$number` : variable (avec ou sans unité) passée en paramètre ;
// - `@return` : variable sans unité retournée.
@function strip-unit($number) {
  @return $number / ($number * 0 + 1);
}


//  # Conversion de pixels en ems

// - `$px` : variable en pixels passée en paramètre ;
// - `$contexte` : contexte de travail en pixels (par défaut égal à la taille de texte du projet) ;
// - `@return` : équivalence en `ems` retournée.
@function em($px, $contexte: $fs0) {
  @return(strip-unit($px) / strip-unit($contexte) * 1em);
}


 // # Conversion de pixels en rems

...