JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
					<div class="row">
						<div class="cols col-12">
							<article class="course_headline">
								<h2>Курсы на loftblog</h2>
								<p class="headline_paragraph">которые мне помогут в выполнении этого задания</p>
							</article>
						</div>
					</div>
					<div class="row">
						<div class="cols col-4">
							<article class="unique">
								<input type="checkbox" name="check" class="in-check" id="in-check">
								<label for="in-check">Посмотрел</label>
								<div class="js">
									<figure>
										<img src="images/js.png" alt="js">
									</figure>
									<div class="course_info">
										<h4>Основы JavaScript</h4>
										<p>Видеокурс о одном из самых популярных языков программирования - JavaScript. Изучая этот курс вы познаете этот прекрасный язык от самых основ.
										</p>
										<p class="time"><i class="fa fa-clock-o" aria-hidden="true"></i> 24 урока (6 часов 46 минут)</p>
									</div>
									<div class="check">
									</div>
								</div>
							</article>
						</div>
						<div class="cols col-4">
							<article class="unique">
								<input type="checkbox" name="check" class="in-check-2" id="in-check-2">
								<label for="in-check-2">Посмотрел</label>
								<div class="js">
									<figure>
										<img src="images/jquery.png" alt="jquery">
									</figure>
									<div class="course_info">
										<h4>Основы JQUERY</h4>
										<p>Видеокурс о одном из самых популярных языков программирования - JavaScript. Изучая этот курс вы познаете этот прекрасный язык от самых основ.
										</p>
										<p class="time"><i class="fa fa-clock-o" aria-hidden="true"></i> 11 уроков (2 часов 6 минут)</p>
									</div>
									<div class="check">
									</div>
								</div>
							</article>
						</div>
						<div class="cols col-4">
							<article class="unique">
								<input type="checkbox" name="check" class="in-check-3" id="in-check-3">
								<label...

CSS

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*::-webkit-input-placeholder {
	color: #666;
	opacity: 1;
}
*:-moz-placeholder {
	color: #666;
	opacity: 1;
}
*::-moz-placeholder {
	color: #666;
	opacity: 1;
}
*:-ms-input-placeholder {
	color: #666;
	opacity: 1;
}
ul {
	list-style-type: none;
}
html,body {
	height: 100%;
}

body {
	font: 14px 'FiraSans-Light', sans-serif, Arial;
	color: #000;
}

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
.footer {
	text-align: center;
	width: 100%;
	height: 71px;
	font-family: "FiraSans-Regular";
	line-height: 21px;
	background: #212121;
	color: #828282;
	margin-top: -71px;
	padding: 19px 0;
}

.container {
	width: 960px;
	margin: 0 auto;
	padding-bottom: 71px;
}
.container .cols {
	float: left;
	margin: 0 0 1em;
	padding: 0 1em;
	text-align: center;
}

h2 {
	font-size: 42px;
	color: #212121;
	font-family: "FiraSans-Medium";
	font-weight: normal;
}
h4 {
	font-size: 21px;
	color: #212121;
	font-family: "FiraSans-Regular";
	line-height: 24px;
	padding-bottom: 18px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

/* flexible media */

img {
	max-width: 100%;
	height: auto;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}


/* fluid gird */

.container .cols.col-1  { width: 8.33%; }
.container .cols.col-2  { width: 16.66%; }
.container .cols.col-3  { width: 25%; }
.container .cols.col-4  { width: 33.33%; }
.container .cols.col-5  { width: 41.66%; }
.container .cols.col-6  { width: 50%; }
.container .cols.col-7  { width: 58.33%; }
.container .cols.col-8  { width: 66.66%; }
.container .cols.col-9  { width: 75%; }
.container .cols.col-10 { width: 83.33%; }
.container .cols.col-11 { width: 91.67%; }
.container .cols.col-12 { width: 100%;...