<div class="modal">
	<svg id="bow" x="0px" y="0px"  viewBox="0 0 64.8 12.3">
		<path fill="#FFFFFF" d="M33.2,0c12.2,0,23.6,12.3,31.1,12.3s-72.1,0-63.6,0S17.9,0,33.2,0z"/>
	</svg>
	<div>
		<span>Notifications</span>
		<div class="checkbox">
			<input type="checkbox" checked="true" id="notifications"/>
			<label for="notifications"></label>
		</div>
	</div>
	<div>
		<span>Newsletter</span>
		<div class="checkbox">
			<input type="checkbox" id="newsletter"/>
			<label for="newsletter"></label>
		</div>
	</div>
</div>



$primary: #F38181;
$secondary: #FCE38A;

body{
	margin:0;
	background: linear-gradient(125deg,$primary,adjust-color($primary, $hue: -50deg));
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	font-family: Quicksand;
	font-size: 25px;
	letter-spacing: 0.01em;
}

.modal{
	padding-left: 1.5em;
	border-radius: .5em;
	background: white;
	color: #888;
	position: relative;
	
	box-shadow: 0 30px 40px -15px rgba(0,0,0,0.3);
	
	svg{
		width: 3.5em;
		height: auto;
		position: absolute;
		left: 2.5em;
		bottom: calc(100% - 1px);
	}
	
	& > div{
		padding: 1.25em 1.25em 1.25em 0;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		span{
			padding-right: 2em;
		}
		
		& + div{
			border-top: 1px solid rgba(0,0,0,0.08);
		}
	}
}

.checkbox{
	input{
		display: none;
		
		&:checked + label{
			background: $primary;
			
			&:before{
				transform: translateX(1.2em);
			}
		}
	}
	
	label{
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		display: flex;
		padding: .2em;
		align-items: center;
		width: 2.4em;
		cursor: pointer;
		height: 1.2em;
		border-radius: 1em;
		transition: background .1s ease;
		background: adjust-saturation($primary,-80%);
		position: relative;
		
		&:before{
			content: '';
			display: block;
			transition: transform .1s ease;
			height: 1.2em;
			width: 1.2em;
			border-radius: 50%;
			background: white;
			box-shadow: 3px 5px 20px -3px rgba(0,0,0,0.3);
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.