JSFiddle - React, Tailwind, and code Playground

by Марина Бабенко

HTML

<div class="grid grid--size grid--col12 grid--gv15">
	<div class="box box--center">
		<div class="cell cell--col2 cell--sm3">
			<div style="height: 50px; border: 1px solid #000;">2</div>
		</div>
		<div class="cell cell--col2 cell--sm3">
			<div style="height: 50px; border: 1px solid #000;">3</div>
		</div>
		<div class="cell cell--col2 cell--sm3">
			<div style="height: 50px; border: 1px solid #000;">4</div>
		</div>
		<div class="cell cell--col2 cell--sm3">
			<div style="height: 50px; border: 1px solid #000;">5</div>
		</div>
		<div class="cell cell--col12">
			<div style="height: 100px; border: 1px solid #000;">1</div>
		</div>
	</div>
</div>

SCSS

$breakpoints: (
	xs: 480,
	sm: 768,
	ms: 1024,
	md: 1280,
	lg: 1440
);

$columns: (12);

$indents: (1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50);

$htmlFontSize: 10;

@mixin default($breakpoints, $htmlFontSize) {
	* {
		box-sizing: border-box;
	}
	
	html,
	body {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
	}
	
	html {
		font-size: #{$htmlFontSize}px;
		
		$size: $htmlFontSize;
		@for $i from length($breakpoints) through 1 {
			@media (max-width: #{nth(map-values($breakpoints), $i)}px) {
				font-size: #{$size}px;
			}
			$size: $size - 1;
		}
	}
}

@mixin grid($breakpoints) {	
    .grid {
        display: block;
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		
		@each $name, $width in $breakpoints {
			@media (min-width: #{$width}px) {
				&--size, 
				&--#{$name} {
					width: #{$width}px;
				}
			}
		}
    }
	
	.box {
		display: block;
		height: 100%;
		font-size: 0;
		
		&--left {
			text-align: left;
		}
		
		&--right {
			text-align: right;
		}
		
		&--center {
			text-align: center;
		}
		
		&--justify {
			text-align: justify;
			text-justify: newspaper;
			
			&::after {
				content: "";
				width: 100%;
				height: 0;
				display: inline-block;
				font-size: medium;
			}
		}
		
		&--top {
			&::before {
				content: "";
				height: 100%;
				width: 0;
				vertical-align: top;
				display: inline-block;
			}
			
			> .cell {
				vertical-align: top;
			}
		}

		&--middle {
			&::before {
				content: "";
				height: 100%;
				width: 0;
				vertical-align: middle;
				display: inline-block;
			}
			
			> .cell {
				vertical-align: middle;
			}
		}
		
		&--bottom {
			&::before {
				content: "";
				height: 100%;
				width: 0;
				vertical-align: bottom;
				display: inline-block;
			}
			
			> .cell {
				vertical-align: bottom;
			}
		}
	}
	
	.cell {
		display: inline-block;
		max-width: 100%;
		font-size: medium;
		vertical-align: top;
		
		&--left {
			text-align:...