JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<select name="" id="">
  <option value="">Taille : Afficher les tailles</option>
  <option value="">S</option>
  <option value="">M</option>
  <option value="">L</option>
  <option value="">XL</option>
</select>

SCSS

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


   # CONFIG


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

// Project-level settings and setup.


// Typography

/// Reference font-size
/// Should not differ from the assumed browser default (typically `16px`).
/// We use it as a reference for our `rem` calculations.
/// @type Number (unit)
$base-font-size: 16px !default;

/// `body` font-size
/// Should match the most frequent value in the design.
/// Applied on the `body` and used as a reference for default `em` calculations.
/// @type Number (unit)
$body-font-size: $base-font-size !default;

/// `body` line-height
/// Should match the most frequent value in the design.
/// @type Number (unit)
$body-line-height: 1.428 !default;

/// `label` font-size
/// @type Number (unit)
$label-font-size: $body-font-size !default;

/// Custom checkboxes and radios font-size
/// @type Number (unit)
$checkbox-radio-custom-font-size: 14px !default;

/// `input` font-size
/// @type Number (unit)
$input-font-size:   $body-font-size !default;

/// buttons/CTA font-size
/// @type Number (unit)
$btn-font-size:   $body-font-size !default;


/// Headings' font-size
/// @type Number (unit)
$h1-font-size:  24px !default;
$h2-font-size:  20px !default;
$h3-font-size:  16px !default;
$h4-font-size:  14px !default;
$h5-font-size:  12px !default;
$h6-font-size:  10px !default;

// Widths and sizes

/// Maximum with of the site's container
/// @type Number (unit)
$container-width: 1315px !default;

/// Site's container padding
/// @type Number (unit)
$container-padding: 35px !default;

/// Gutter's width
/// @type Number (unit)
$gutter-width:      15px !default;
$gutter-half-width: $gutter-width / 2 !default;

/// Vertical margin for the most common elements
/// Please see `generic/_generic.shared.scss`
/// @type Number (unit)
$vertical-spacing: 20px !default;

/// `input` height
/// @type Number (unit)
$input-height: 40px...