JSFiddle - React, Tailwind, and code Playground

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

HTML

<header>
		<div class="grid grid--size grid--col24 grid--gv15">
			<div class="box">
				<div class="cell cell--col8">
					<div class="block block--sm">
						<span>Логотип</span>
					</div>
				</div>
				<div class="cell cell--col16">
					<div class="grid grid--size grid--col24 grid--gv15">
						<div class="box box--right">
							<div class="cell">
								<div class="content">
									<span>Телефон:</span><br>
									<a href="tel:+380951112233">+38 (095) 111-22-33</a>
								</div>
							</div>
							<div class="cell">
								<div class="content">
									<span>E-mail:</span><br>
									<a href="mailto:company@gmail.com">company@gmail.com</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="cell cell--col6">
					<div class="block">
						<a href="index.html">Пункт меню 1</a>
					</div>
				</div>
				<div class="cell cell--col6">
					<div class="block">
						<a href="index.html">Пункт меню 2</a>
					</div>
				</div>
				<div class="cell cell--col6">
					<div class="block">
						<a href="index.html">Пункт меню 3</a>
					</div>
				</div>
				<div class="cell cell--col6">
					<div class="block">
						<a href="index.html">Пункт меню 4</a>
					</div>
				</div>
			</div>
		</div>
	</header>
	<section>
		<div class="grid grid--size grid--col24">
			<div class="box">
				<div class="cell">
					<a href="index.html">Хлебная крошка 1</a>
					<span> / </span>
					<a href="index.html">Хлебная крошка 2</a>
					<span> / </span>
					<span>Хлебная крошка 3</span>
				</div>
				<div class="cell cell--col24">
					<h1>Заголовок страницы</h1>
				</div>
			</div>
		</div>
		<div class="grid grid--size grid--col24 grid--gv15">
			<div class="box">
				<div class="cell cell--col4 cell--sm24">
					<div class="grid grid--size grid--col24 grid--gv15">
						<div class="box">
							<div class="cell cell--col24 cell--sm12">
								<div class="block block--md">
									<span>Банер...

SCSS

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

$columns: (24);

$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:...