CodePen

HTML

            
              <div class="panel">
  <div class="paneltop">
    <p class="type">Quick Panel</p>
  </div>
  <div class="panelback">
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .type {
	color: #fff; /* text color */
	font-family: "Helvetica";
	font-size: 10px;
}

.paneltop {
	width: 351px;
	height: 81px;
	-moz-border-radius: 20px 20px 0 0;
	-webkit-border-radius: 20px 20px 0 0;
	border-radius: 20px 20px 0 0; /* border radius */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /* prevents bg color from leaking outside the border */
	background-color: #000; /* layer fill content */
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDM1MSA4MSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSIgeDI9IjUwJSIgeTI9IjEwMCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDA2MWFiIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAzMzViIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIzNTEiIGhlaWdodD0iODEiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); /* gradient overlay */
	background-image: -moz-linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
	background-image: -o-linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
	background-image: -webkit-linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
	background-image: linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
}

.panelback {
	width: 351px;
	height: 418px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px; /* border radius */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /* prevents bg color from leaking outside the border */
	background-color: #dfe0e2; /* layer fill content */
	-moz-box-shadow: 2px 3px 5px rgba(0,0,0,.34); /* drop shadow */
	-webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.34); /* drop shadow */
	box-shadow: 2px 3px 5px rgba(0,0,0,.34); /* drop shadow */
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................