JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<h1>Big Letter</h1>
	<p> This is for <span class="change"> studying HTMl </span> and CSS !! </p>
	
	<ul id="greet">
		<li>Good Morning ! </li>
		<li>Good Afternoon ! <span class="person"> Mr.kim </span> </li>
		<li>Good Night ! </li>
	</ul>

	<div><input type="text" name="name" value=" Name? " id="name"></div>
	
	<div class="person"> Mr.Kim </div>
</body>

CSS

p{
	font-size: 14px;
}

.person:hover {
	color: red;
}
/* 마우스 오버 했을 때 스타일 지정*/

li:first-child{
	color: green;
}
/* 리스트 첫번째 줄 스타일 지정, last-child도 가능 */

#name:focus{
	font-weight: bold;
}
/* 해당 요소가 클릭되었을 때 스타일 지정 */

ul:after{
	content: 'Write some sentence after ul';
}
/*  해당 요소의 뒤에 문자열을 생성한다. ul:before도 가능*/

p::first-letter{
	background-color: red;
}
/* first-line도 사용가능 */	

li::selection{
	background-color: green;
}
/* 해당 요소를 마우스로 선택했을 때 스타일 지정*/