<div class="box">
	<h1 class="text-2xl font-bold">蛍光ペン</h1>
	<h2 class="text-lg font-bold mt-5 my-2">marker タグ</h2>
	<p><mark>吾輩は猫である。名前はまだ無い。</mark></p>
	<h2 class="text-lg font-bold mt-5 my-2">background-color</h2>
	<p><span class="marker_bg">どこで生れたかとんと見当がつかぬ。</span></p>
	<h2 class="text-lg font-bold mt-5 my-2">linear-gradient 0%</h2>
	<p><span class="marker01">何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</span></p>
	<h2 class="text-lg font-bold mt-5 my-2">linear-gradient 30%</h2>
	<p><span class="marker02">吾輩はここで始めて人間というものを見た。</span></p>
	<h2 class="text-lg font-bold mt-5 my-2">linear-gradient 50%</h2>
	<p><span class="marker03">しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</span></p>
	<h2 class="text-lg font-bold mt-5 my-2">linear-gradient 70%</h2>
	<p><span class="marker04">この書生というのは時々我々を捕えて煮て食うという話である。</span></p>
	<h2 class="text-lg font-bold mt-5 my-2">linear-gradient 80%</h2>
	<p><span class="marker05">しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</span></p>
	<h2 class="text-lg font-bold mt-5 my-2">linear-gradient 30%-100%</h2>
	<p><span class="marker06">ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</span></p>
	<h2 class="text-lg font-bold mt-5 mb-2">linear-gradient イエロー30%-グリーン100%</h2>
	<p><span class="marker07">掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。</span></p>
</div>

.box {
	max-width: 800px;
	margin:1rem auto;
	line-height: 1.8;
}
.marker_bg {
	background-color: #b2ffb2;
}
.marker01 {
	background: linear-gradient(transparent 0%, #b2ffb2 0%);
}
.marker02 {
	background: linear-gradient(transparent 30%, #c1e0ff 30%);
}
.marker03 {
	background: linear-gradient(transparent 50%, #c1e0ff 50%);
}
.marker04 {
	background: linear-gradient(transparent 70%, #c1e0ff 70%);
}
.marker05 {
	background: linear-gradient(transparent 80%, #c1e0ff 80%);
}
.marker06 {
	background: linear-gradient(transparent 30%, #c1e0ff 100%);
}
.marker07 {
	background: linear-gradient(transparent 30%, #ffffb7 30%, #b2ffb2 100%);
}