ShawnRong/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.content {
  width: 600px;
  margin: 0 auto;
}

.alert {
  margin-top: 30px;
  border-radius: 3px;
  color: #fff;
  position: relative;
  padding: 0.75rem 0.75rem 0.75rem 0.75rem
}

.alert>span {
  position: absolute;
  right: 0.5em;
  top: 0.02em;
}

.alert>h3 {
  margin: 0.25rem 0;
}

.close {
  font-size: 23px;
  font-weight: bold;
  cursor: pointer;
}


.success {
  background-color: #32cf65;
}

.info {
  background-color: #3776d9;
}

.danger {
  background-color: #fc3c63;
}

.warning {
  background-color: #fedc63;
}
</style>
</head>
<body>
<div class="content">
  <div class="alert success"><span class="close">x</span><h3>成功</h3><p>提交成功！</p></div>
  <div class="alert info"><span class="close">x</span><h3>消息</h3><p>你有一条新消息</p></div>
  <div class="alert danger"><span class="close">x</span><h3>错误</h3><p>烫烫烫烫</p></div>
  <div class="alert warning"><span class="close">x</span><h3>警告</h3><p>下次不许这样了</p></div>
</div>


<script id="jsbin-source-css" type="text/css">.content {
  width: 600px;
  margin: 0 auto;
}

.alert {
  margin-top: 30px;
  border-radius: 3px;
  color: #fff;
  position: relative;
  padding: 0.75rem 0.75rem 0.75rem 0.75rem
}

.alert>span {
  position: absolute;
  right: 0.5em;
  top: 0.02em;
}

.alert>h3 {
  margin: 0.25rem 0;
}

.close {
  font-size: 23px;
  font-weight: bold;
  cursor: pointer;
}


.success {
  background-color: #32cf65;
}

.info {
  background-color: #3776d9;
}

.danger {
  background-color: #fc3c63;
}

.warning {
  background-color: #fedc63;
}</script>
</body>
</html>

## jsbin.tulahabene.css
.content {
  width: 600px;
  margin: 0 auto;
}

.alert {
  margin-top: 30px;
  border-radius: 3px;
  color: #fff;
  position: relative;
  padding: 0.75rem 0.75rem 0.75rem 0.75rem
}

.alert>span {
  position: absolute;
  right: 0.5em;
  top: 0.02em;
}

.alert>h3 {
  margin: 0.25rem 0;
}

.close {
  font-size: 23px;
  font-weight: bold;
  cursor: pointer;
}


.success {
  background-color: #32cf65;
}

.info {
  background-color: #3776d9;
}

.danger {
  background-color: #fc3c63;
}

.warning {
  background-color: #fedc63;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.content {
	width: 600px;
	margin: 0 auto;
	}

	.alert {
	margin-top: 30px;
	border-radius: 3px;
	color: #fff;
	position: relative;
	padding: 0.75rem 0.75rem 0.75rem 0.75rem
	}

	.alert>span {
	position: absolute;
	right: 0.5em;
	top: 0.02em;
	}

	.alert>h3 {
	margin: 0.25rem 0;
	}

	.close {
	font-size: 23px;
	font-weight: bold;
	cursor: pointer;
	}


	.success {
	background-color: #32cf65;
	}

	.info {
	background-color: #3776d9;
	}

	.danger {
	background-color: #fc3c63;
	}

	.warning {
	background-color: #fedc63;
	}
	</style>
	</head>
	<body>
	<div class="content">
	<div class="alert success"><span class="close">x</span><h3>成功</h3><p>提交成功！</p></div>
	<div class="alert info"><span class="close">x</span><h3>消息</h3><p>你有一条新消息</p></div>
	<div class="alert danger"><span class="close">x</span><h3>错误</h3><p>烫烫烫烫</p></div>
	<div class="alert warning"><span class="close">x</span><h3>警告</h3><p>下次不许这样了</p></div>
	</div>


	<script id="jsbin-source-css" type="text/css">.content {
	width: 600px;
	margin: 0 auto;
	}

	.alert {
	margin-top: 30px;
	border-radius: 3px;
	color: #fff;
	position: relative;
	padding: 0.75rem 0.75rem 0.75rem 0.75rem
	}

	.alert>span {
	position: absolute;
	right: 0.5em;
	top: 0.02em;
	}

	.alert>h3 {
	margin: 0.25rem 0;
	}

	.close {
	font-size: 23px;
	font-weight: bold;
	cursor: pointer;
	}


	.success {
	background-color: #32cf65;
	}

	.info {
	background-color: #3776d9;
	}

	.danger {
	background-color: #fc3c63;
	}

	.warning {
	background-color: #fedc63;
	}</script>
	</body>
	</html>