JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<script src="https://cdn.rawgit.com/liabru/jquery-match-height/2446ac65/dist/jquery.matchHeight-min.js"></script>
<script src="https://rawgit.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.min.js"></script>
<script src="https://rawgit.com/WickyNilliams/enquire.js/master/dist/enquire.min.js"></script>
<div class="grids grids-flush js-foo">
  <div class="grid-1-2 mob-full">
    <div class="foobar">
      <div class="foo">
        <div class="baz" style="background-image:url(//unsplash.it/200/305?random);"></div>
      </div>
      <div class="bar">
        <h2>Contenu</h2>
        <p>Lorem ipsum sin dolor amet</p>
        <p><a href="#">Lien</a></p>
      </div>
    </div>
  </div>
  <div class="grid-1-2 mob-full">
    <div class="foobar">
      <div class="foo">
        <div class="baz" style="background-image:url(//unsplash.it/200/308?random);"></div>
      </div>
      <div class="bar">
        <h2>Contenu</h2>
        <p>Lorem ipsum sin dolor amet Lorem ipsum sin dolor amet Lorem ipsum sin dolor amet Lorem ipsum sin dolor ametLorem ipsum sin dolor amet</p>
         <p>Lorem ipsum sin dolor amet Lorem ipsum sin dolor amet Lorem ipsum sin dolor amet Lorem ipsum sin dolor ametLorem ipsum sin dolor amet</p>
        <p><a href="#">Lien</a></p>
      </div>
    </div>
  </div>
  <div class="grid-1-2 mob-full">
    <div class="foobar">
      <div class="foo">
        <div class="baz" style="background-image:url(//unsplash.it/200/309?random);"></div>
      </div>
      <div class="bar">
        <h2>Contenu</h2>
        <p>Lorem ipsum sin dolor amet</p>
        <p><a href="#">Lien</a></p>
      </div>
    </div>
  </div>
  <div class="grid-1-2 mob-full">
    <div class="foobar">
      <div class="foo">
        <div class="baz" style="background-image:url(//unsplash.it/200/310?random);"></div>
      </div>
      <div class="bar">
        <h2>Contenu</h2>
       
         <p>Lorem ipsum </p>
        <p><a href="#">Lien</a></p>
      </div>
    </div>
 ...

SCSS

@charset "UTF-8";
/* -------------------------------------------------------------------------- *

	 # Configuration : Variables, fonctions & mixins 


\* -------------------------------------------------------------------------- */
/* Appel SassMQ */
/* -------------------------------------------------------------------------- *

	 # Configuration des variables 


\* -------------------------------------------------------------------------- */
/* ==========================================================================
   Responsive
   ========================================================================== */
/* ==========================================================================
   Icônes via sprite en bitmap (ancienne méthode)
   ========================================================================== */
/* ==========================================================================
   Chargement des polices (via Font Face Observer ou Typekit)
   ========================================================================== */
/**
 * Afin d'éviter le FOIT (Flash Of Invisible Text), on n'active les fonts qu'une fois qu'elles sont chargées.
 * On utilise un script pour détecter le chargement et on applique la classe `.webfont-loaded` sur la balise `html`
 * une fois que le chargement est effectué.
 * Cette variable ne doit passer à true que si le JS de Font Face Observer est installé
 * Le reste de la configuration se fait dans `base\_typography.scss`
 */
/* ==========================================================================
   Taille de police
   ========================================================================== */
/* On modifie la variable utilisée dans sass-mq */
/* ==========================================================================
   Couleurs
   ========================================================================== */
/* ==========================================================================
   Dimensions
  ...

JavaScript

var slideHomeActu = $('.js-foo');

			if (slideHomeActu.length > 0) {
				var slideHomeActuOptions = {
					controls: false,
					pager: true,
          adaptiveHeight: true
				};

				slideHomeActu.bxSlider(slideHomeActuOptions);

				enquire.register("only screen and (min-width:801px)", {
					match: function () {
						slideHomeActu.destroySlider();
            $('.foobar').matchHeight(true);
					}
				}).register("only screen and (max-width:800px)", {
					match: function () {
					$('.foobar').matchHeight({ remove: true });
            $('.foobar').css('height', 'auto');	slideHomeActu.reloadSlider(slideHomeActuOptions);
            
					}
				});
			}