JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="documents" class="wrapper">
			<h2>ДОКУМЕНТЫ</h2>
			<p>которые необходимо иметь на проверке знаний в комиссии</p>
			<ul>
			    <li>
			    	<input type="checkbox" id="chk1" />
			    	<label for="chk1">
			    		<span><h4>Паспорт</h4></span>
			    	</label>
			    </li>
			    <li>
			    	<input type="checkbox" id="chk2" />
			    	<label for="chk2">
			    		<span><h4>Выписка из&nbsp;приказа о&nbsp;назначении на&nbsp;должность</h4><br>
						<p>необходимо, чтобы должность соответствовала «Единому тарифно-квалификационному справочнику»</p></span>
					</label>
			    </li>
			   	<li>
			    	<input type="checkbox" id="chk3" />
			    	<label for="chk3">
			    		<span><h4>Удостоверение, подтверждающее наличие группы по&nbsp;электробезопасности</h4><br>
						<p>или выписку из&nbsp;журнала проверки знаний с&nbsp;прежнего места работы, заверенную отделом кадров (для вновь принятых<br>на&nbsp;работу)</p></span>
			    	</label>
			    </li>
				<li>
			    	<input type="checkbox" id="chk4" />
			    	<label for="chk4">
			    		<span><h4>Письмо-направление</h4><br>
						<p>с&nbsp;указанием, в&nbsp;качестве кого будет использоваться данный специалист, за&nbsp;подписью руководителя предприятия</p></span>
			    	</label>
			    </li>
			    <li>
			    	<input type="checkbox" id="chk5" />
			    	<label for="chk5">
			    		<span><h4>Медицинскую справку с&nbsp;допуском к&nbsp;работе в&nbsp;действующих<br>электроустановках</h4><br>
						<p>в&nbsp;справке должно быть написано: «Допущен к&nbsp;работе в&nbsp;действующих электроустановках»</p></span>
			    	</label>
			    </li>
			    <li>
			    	<input type="checkbox" id="chk6" />
			    	<label for="chk6">
			    		<span><h4>Должностная инструкция</h4></span>
			    	</label>
			    </li>
			    <li>
			    	<input type="checkbox" id="chk7" />
			    	<label for="chk7">
			    		<span><h4>Однолинейная схема электрохозяйства...

CSS

* {
  margin: 0;
  padding: 0;
}
body {
  width: 100%;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 100.01%;
  color: #000;
  min-width: 1005px;
  font-weight: 300;
  padding: 42px 0 0 0;
  background-color: #f3cf53;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  position: relative;
}
::selection {
  background: #000;
  color: #fff;
}
a {
  color: #121011;
  display: inline-block;
  position: relative;
  text-decoration: none;
}
a:after {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  height: 1px;
  background: #121011;
  bottom: 0;
  left: 0;
}
a:hover {
  color: #e9b810;
}
a:hover:after {
  background: #e9b810;
}
p {
  font-size: 1.25em;
}
h1,
h2,
h3,
h4 {
  font-weight: 800;
}
h1 {
  font-size: 3.125em;
  line-height: 50px;
}
h2 {
  font-size: 2.1875em;
  line-height: 35px;
}
h3 {
  font-size: 1.6666666666666667em;
  line-height: 25px;
}
h4 {
  font-size: 1.125em;
  line-height: 18px;
}
ul {
  list-style: none;
}
strong {
  font-weight: 800;
}
.left {
  float: left;
}
.right {
  float: right;
}
.wrapper {
  width: 845px;
  margin: 0 auto;
}
.clr {
  clear: both;
  overflow: hidden;
  height: 0;
}

#documents {
  margin-bottom: 60px;
}
#documents .info {
  font-size: 14px;
  line-height: 36px;
}
#documents > p {
  font-size: 0.875em;
  line-height: 16px;
  padding: 2px 0;
}
#documents ul {
  margin: 22px 0 0 -14px;
  line-style: none;
}

#documents ul li {
  padding: 5px 15px;
  position: relative;
  cursor: pointer;
  display: block;
}

/*#documents ul li.active span {
  background: #fff;
}*/

#documents ul li.active input, #documents ul li:hover input {
  display: block;
}

#documents ul li.active h4 {
  text-decoration: line-through;
}

#documents ul li span {
  display: inline-block;
  padding: 5px;
  margin: -5px;
}

/*#documents ul li:hover span {
  background: #fff;
}*/

#documents ul li h4 {
  line-height: 22px;
  display:...

JavaScript

$(document).ready(function() {
    $("#documents ul li").click(function() {
    $this = $(this);
    $this.toggleClass('active');
    if ($this.hasClass('active'))
        $this.find('input').attr('checked','checked');
    else
       $this.find('input').removeAttr('checked');
    });
});