<div class="container mt-5">
	<div class="row">
		<div class="col-12 col-md-6">
			<label>
        		<input class="toggle" type="checkbox"/>
        		<div class="box box-1 p-4">
					<h5> <b>Back up photos </b></h5>
					<p class="small">Automatically back up photos to your cloud storage.</p>
					<div class="row align-items-center">
				  		<div class="col text-right">
							<i class="zmdi zmdi-cloud-upload"></i>
				  		</div>
						<div class="col toggle-wrapper">
					  		<i class="input-helper"></i>
					  		<span class="ripple"></span>
				  		</div>
					</div>
				</div>
      	</label>
		</div>
		<div class="col-12 col-md-6 d-none d-md-flex">
			<label>
        		<input class="toggle" type="checkbox" checked="checked"/>
        		<div class="box box-2 p-4">
					<h5><b>Pair with iWatch</b></h5>
					<p class="small">Automatically connect to your iWatch when available.</p>
					<div class="row align-items-center">
			  			<div class="col text-right">
							<i class="zmdi zmdi-watch"></i>
			  			</div>
			  			<div class="col toggle-wrapper">
							<i class="input-helper"></i>
							<span class="ripple"></span>
						</div>
					</div>
        		</div>
			</label>
		</div>
		<div class="col-12 col-md-6 d-none">
			<label>
       		<input class="toggle" type="checkbox" checked="checked"/>
        		<div class="box box-3 p-4">
					<h5><b>Pair with iWatch</b></h5>
            	<p class="small">Automatically connect to your iWatch when available</p>
            	<div class="row align-items-center">
              		<div class="col text-right">
							<i class="zmdi zmdi-watch"></i>
              		</div>
              		<div class="col toggle-wrapper">
							<i class="input-helper"></i>
							<span class="ripple"></span>
              		</div>
            	</div>
        		</div>
      	</label>
		</div>
		<div class="col-12 col-md-6 d-none">
			<label>
        		<input class="toggle" type="checkbox" checked="checked"/>
        		<div class="box box-4 p-4">
            	<h5><b>Pair with iWatch</b></h5>
					<p class="small">Automatically connect to your iWatch when available</p>
            	<div class="row align-items-center">
				  		<div class="col text-right">
							<i class="zmdi zmdi-watch"></i>
				  		</div>
					  	<div class="col toggle-wrapper">
							<i class="input-helper"></i>
							<span class="ripple"></span>
					  	</div>
					</div>
        		</div>
      	</label>
		</div>
	</div>
</div>
.container {
	max-width: 800px;
}

.box {
	background-color: white;
	cursor: pointer;
	height: 200px;
	overflow: hidden;
	position: relative;
	transition: all .3s ease;
	z-index: 1;
	
	.zmdi {
		font-size: 3em;
	}

	&.box-1 .ripple {
		background-color: #7eae34;
	}
	
	&.box-2 .ripple {
		background-color: #10a2fe;
	}
	
	&.box-3 .ripple {
		background-color: #FE2929;
	}

	&.box-4 .ripple {
		background-color: complement(#7eae34);
	}
}

.toggle {
	left: -999px;
	opacity: 0;
	position: absolute;
	visibility: hidden;

	&:checked + .box {
		color: white;
		
		.input-helper {
			&:before {
				background-color: transparent;
			}
			
			&:after {
				transform: translateX(30px);
			}
		}
		
		.ripple {
			transform: scale(35);
		}
	}
}

.toggle-wrapper {
	height: 24px;
}

.input-helper {
	position: relative;
	
	&:before {
		background-color: #F2F3F4;
		border: 1px solid white;
		border-radius: 20px;
		box-shadow: inset 0px 0px 5px -2px rgba(0, 0, 0, 1);
		content: "";
		height: 30px;
		position: absolute;
		width: 60px;
	}
	&:after {
		background-color: white;
		border-radius: 50%;
		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		content: "";
		height: 24px;
		margin: 3px;
		position: absolute;
		transition: all 0.5s ease;
		transform: translateX(0);
		width: 24px;
	}
}

.ripple {
	border-radius: 50%;
	height: 24px;
	margin: 3px;
	position: absolute;
	transform: scale(1);
	transition: all 0.5s ease;
	width: 24px;
	z-index: -1;
}

// Global styles
* {
	user-select: none;
}

body {
	background-color: #252830;
	color: #303030;
	font-family: 'Montserrat', 'Helvetica Neue', 'Arial';
	font-size: 20px;
}

label {
	display: block;
	margin: 0;
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css

External JavaScript

This Pen doesn't use any external JavaScript resources.