JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<a href="http://codepen.io/raphaelgoetter/pen/BybOag?editors=1100">lien original</a>



<div class="grid-4-small-2-tiny-1">


<div>
Douleur lombaire et traitement :<br/><br/>   	
Sylvie, 52ans se présente au cabinet d’ostéopathie pour des douleurs récidivantes au niveau lombaire. Apres un premier traitement ostéopathique les douleurs s’estompent puis  reviennent dans les 6 mois. Lors du second traitement les douleurs partent, dans un souci d’efficacité à long terme, Sylvie voit la coach sportif d’après les recommandations de l’ostéopathe. Le coach travaille pour un meilleur maintien lombaire et abdominal. De ce fait les douleurs de cette patiente ont nettement diminué et lui permettent toute activité sans crainte de blocages lombaires.
</div>
	
	
<div>
Posture et équilibre :<br/><br/>   			
Evelyne, 67 ans, retraitée, se plaint de douleurs au niveau du bassin et de perte d’équilibre. En arrivant au cabinet d’ostéopathie, elle évoque aussi une perte de capacité respiratoire ces derniers temps. Il existe pour elle une crainte de la chute dans la vie quotidienne. Lors du traitement, après avoir rééquilibré le bassin et le grill costal, il est intéressant d’optimiser le traitement en travaillant ensuite avec la coach sportif afin de retrouver une bonne posture, d’éviter un renfermement de la cage thoracique et de travailler la proprioception pour prévenir le risque de chutes.
</div>
	
	
<div>
Performance et prévention :<br/><br/>  		 
Benjamin, 22ans, pratiquant le tennis à haute intensité (4 à 6h/semaine) fait appel à la coach sportif dans un souci de performance. Au fur et à mesure de la préparation physique, l’accumulation des séances augmente les contraintes physiques du corps. Dans un souci de prévention de la blessure et de la fatigue Benjamin consulte occasionnellement  l’ostéopathe afin de maintenir une biomécanique fonctionnelle.
</div>
	
	
<div>
Douleur et réathlétisation :<br/><br/>  ...

CSS

// WARNING : don't forget to prefix Flexbox for older browsers!

// LESS part from now ...
// config breakpoints (choose unit you prefer)
@tiny-screen			: 768px; // tiny screens media query (less than 768px)
@small-screen			: 1170px; // screens between 768px and 1170px
@medium-screen		: 1260px; // screens between 1170px and 1260px
@large-screen			: 1560px; // screens between 1260px and 1560px

@gutter: 1em;
@number: 3; // for equal columns
@left: 2; // left side of uneven columns
@right: 1; // right side of uneven columns

// grid styles for container wich has a .grid(n,g) class
// n = number of columns (default = 4)
// g = gutter value (default = 1em)
// example : .grid-container { .grid(12, 10px); }

/* grid container */
[class*="grid-"] {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 margin-left: -@gutter;
 /* inline-block fallback for IE9 generation */
 text-rendering: optimizespeed;
}

/* grid childs */
[class*="grid-"] > * {
 flex: 0 0 auto;
 width: ~'calc(100% * 1 / @{number} - @{gutter} - .01px)';
 margin-left: @gutter;
 /* inline-block fallback for IE9 generation */
 display: inline-block;
 vertical-align: top;
 letter-spacing: normal;
 text-rendering: auto;
}

.grid(@number:@number, @gutter:@gutter) { 
& > * { width: ~'calc(100% * 1 / @{number} - @{gutter})';}
& > .flexitem-double { width: ~'calc(100% * 2 / @{number} - @{gutter})'; }
& > .flexitem-first { order: -1; }
}

/* examples */
[class*="grid-2"] { .grid(2); }

[class*="grid-3"] { .grid(3); }

[class*="grid-4"] { .grid(4); }

[class*="grid-5"] { .grid(5); }

[class*="grid-6"] { .grid(6); }

[class*="grid-7"] { .grid(7); }

[class*="grid-8"] { .grid(8); }

[class*="grid-10"] { .grid(10); }

[class*="grid-12"] { .grid(12); }

/* Responsive grid */
/* "small-2" = 2 columns when small screen */
@media (max-width: @small-screen) {
[class*="-small-4"] > * { width: ~'calc(100% * 1 / 4 - @{gutter})'; }
[class*="-small-4"] > .flexitem-double { width: ~'calc(100% * 1 / 2 - @{gutter})';...