JSFiddle - React, Tailwind, and code Playground

by Florian Bar

SCSS

/* Media Queries
========================================= */

$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;


/* Grid config
========================================= */

$break-size: $screen-sm, $screen-md, $screen-lg;
$break-points: 'xs', 'sm', 'md', 'lg';
$columns-total: 14;

$gutter-tiny: 10px;
$gutter-small: 20px;
$gutter: 30px;
$gutter-large: 60px;


.grid
{
	margin: 10px (-$gutter / 2);

	&:before,
	&:after { content: " "; display: table; }

	&:after { clear: both; }

	> [class^="col-"],   > [class*=" col-"],
	> [class^="block-"], > [class*=" block-"]
	{
		float: left;
		width: 100%;
		padding: 0 ($gutter / 2);
	}
}

.grid.no-gutter
{
	margin-right: 0;
	margin-left	: 0;

	> [class^="col-"], > [class*=" col-"],
	> [class^="block-"], > [class*=" block-"]
	{
		padding-right: 0;
		padding-left: 0;
	}
}

.grid.gutter-tiny
{
	margin-right: -$gutter-tiny / 2;
	margin-left	: -$gutter-tiny / 2;

	> [class^="col-"], > [class*=" col-"],
	> [class^="block-"], > [class*=" block-"]
	{
		padding-right: ($gutter-tiny / 2);
		padding-left: ($gutter-tiny / 2);
	}
}

.grid.gutter-small
{
	margin-right: -$gutter-small / 2;
	margin-left	: -$gutter-small / 2;

	> [class^="col-"], > [class*=" col-"],
	> [class^="block-"], > [class*=" block-"]
	{
		padding-right: ($gutter-small / 2);
		padding-left: ($gutter-small / 2);
	}
}

.grid.gutter-large
{
	// only add large gutter on sm screens and up,
	// otherwise it adds an aditional space to the right on mobile
	@media (min-width: $screen-md) 
	{
		margin-right: -$gutter-large / 2;
		margin-left	: -$gutter-large / 2;

		> [class^="col-"], > [class*=" col-"],
		> [class^="block-"], > [class*=" block-"]
		{
			padding-right: ($gutter-large / 2);
			padding-left: ($gutter-large / 2);
		}
	}
}

.grid.columns-right
{
	> [class^="col-"], > [class*=" col-"],
	> [class^="block-"], > [class*=" block-"]
	{
		float: right;
	}
}


@for $i from 0 through length($break-size) {

	@if $i == 0 {

		@for $columns from 1 through...