JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div class="common">
	<div class="pic" id="pic1"></div>
	<div class="pic" id="pic2"></div>
	<div class="pic" id="pic3"></div>
	<h2>Graphic Design</h2>
	<div class="followed">Followed
		<div id="check"></div>
	</div>
</div>

CSS

html, body{margin: 0px;/* background-color: #d8d8d8; */width:  100%;}

.common{
	width: 500px;
	height: 280px;
	background-color: rgb(196, 196, 196);
	margin: 10px auto 0px auto;
	border-radius: 20px;
	color: #fff;
	padding: 10px  20px  0px  20px;
	cursor:  pointer;
}
.common:hover{box-shadow: 0px 0px 0px 2px #ed8c25;}

.pic{
	width: 30%;
	height: 150px;
	background: #FFC107;
	margin: 10px 0px 0px 11px;
	border-radius: 110px;
	display:  inline-block;
	overflow:  hidden;
}

#pic1{
	background-image: url(http://cdn-users1.imagechef.com/ic/stored/2/130419/fbp4d6aa72a12d0d559.jpg);
	background-repeat: no-repeat;
	background-size: 170px;
	background-position: 0px -30px;
}
#pic2{
	background-image: url(http://1.bp.blogspot.com/-QlZeViBIYX4/UlwuwyiagVI/AAAAAAAAALc/HJ8FSXAcu_Y/s1600/hoc-thiet-ke-do-hoa-online-bang-phan-mem-photoshop.png);
	background-repeat: no-repeat;
	background-size: 270px;
	background-position: -50px 0px;
}
#pic3{
	background-image: url(https://blog.advancedphotoshop.co.uk/wp-content/uploads/2014/02/xFinal-210x170.jpg.pagespeed.ic.ejgG7xMjpI.jpg);
	background-repeat: no-repeat;
	background-size: 200px;
	background-position: -20px 0px;
}

h2{
	font-family: Comic Sans MS;
	letter-spacing: 2px;
	font-size: 30px;
}

.followed{
	width: 190px;
	height: 53px;
	margin: -70px 0px 0px 0px;
	border-radius: 20px;
	color: #fff;
	padding: 10px  20px  0px  20px;
	float:  right;
	font-family: Impact;
	letter-spacing: 2px;
	line-height: 40px;
	font-size: 30px;
	text-align:  right;
}

#check{
	width: 45px;
	height: 45px;
	margin: -42px  0px  0px  3px;
	background-image: url(http://casa-ceramica.ru/upload/image/galochka.png);
	background-repeat: no-repeat;
	background-size: 50px;
	background-position: -3px -3px;
	opacity: 0.3;
}

JavaScript

document.getElementsByClassName('common')[0].addEventListener('click',function(){
	var check = document.getElementById('check');
	var common = document.getElementsByClassName('common')[0];
	(window.getComputedStyle(common).backgroundColor=='rgb(196, 196, 196)')? common.style.backgroundColor='rgba(31, 132, 214)' : common.style.backgroundColor='rgb(196, 196, 196)' ;
	(check.style.opacity==1)? check.style.opacity=0.3 : check.style.opacity=1 ;
},false);