JSFiddle - React, Tailwind, and code Playground

by Bragard

HTML

<section class="services">
							<div class="services__wrapper">
								<h3 class="services__title">Товары и услуги</h3>
								<form action="POST" class="services__form">
									<div class="services__list">
										<div class="services__type">
											<label>
												<input type="checkbox" name="diagnostics">
												<span class="services__checkbox"></span>
												<h3>Диагностика</h3>
											</label>
										</div>

										<ul>
											<li class="services__item">
												<label>
													<input type="checkbox" name="services__diagnostics">
													<span class="services__checkbox"></span>
													<h4 class="services__name">Диагностика АКПП</h4>
												</label>
											</li>
											<li class="services__item">
												<label>
													<input type="checkbox" name="services__diagnostics">
													<span class="services__checkbox"></span>
													<h4 class="services__name">Диагностика кондиционера</h4>
												</label>
											</li>
											<li class="services__item">
												<label>
													<input type="checkbox" name="services__diagnostics">
													<span class="services__checkbox"></span>
													<h4 class="services__name">Диагностика подвески</h4>
												</label>
											</li>
											<li class="services__item">
												<label>
													<input type="checkbox" name="services__diagnostics">
													<span class="services__checkbox"></span>
													<h4 class="services__name">Диагностика тормозной системы</h4>
												</label>
											</li>
											<li class="services__item">
												<label>
													<input type="checkbox" name="services__diagnostics">
													<span class="services__checkbox"></span>
													<h4 class="services__name">Заправка кондиционера</h4>
												</label>
											</li>
											<li class="services__item">
												<label>
													<input type="checkbox"...

CSS

/*================================SERVICES================================*/
.services {
	margin-top: 10px;
}

.services__wrapper {
	background: #FFFFFF;
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	padding: 10px;
}

.services__title {
	font-weight: bold;
	font-size: 11px;
	line-height: 15px;
	color: #6081D2;
	margin: 0;
}

.services__form {
	margin-top: 10px;
}

.services__type label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.services__type label h3 {
	font-weight: 600;
	font-size: 13px;
	line-height: 18px;
	color: rgba(0, 0, 0, 0.6);
	margin: 0;
}

.services__checkbox {
	display: block;
	margin-right: 5px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	border-radius: 3px;
	width: 14px;
	height: 14px;
	position: relative;
}

.services input {
	display: none;
}

.services input:checked ~ .services__checkbox {
	border-color: #000;
}

.services input:checked ~ .services__checkbox:before {
	content: '';
	position: absolute;
	top: 6px;
	left: 1px;
	transform: rotate(45deg);
	width: 10px;
	height: 1px;
	background-color: #000;
}

.services input:checked ~ .services__checkbox:after {
	content: '';
	position: absolute;
	top: 6px;
	left: 1px;
	transform: rotate(-45deg);
	width: 10px;
	height: 1px;
	background-color: #000;
}

.services__list {
	margin-bottom: 15px;
}

.services__list ul {
	margin: 0;
	margin-top: 10px;
	padding: 0;
	padding-left: 10px;
	list-style: none;
}

.services__item {
	margin-bottom: 10px;
}

.services__item:last-child {
	margin-bottom: 0;
}

.services__item label {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.services__name {
	width: calc(100% - 19px);
	margin: 0;
	margin-top: -2px;
	font-weight: 300;
	font-size: 13px;
	line-height: 18px;
	color: rgba(0, 0, 0, 0.6);
}

.services__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.services__list {
  width: 50%;	}