JSFiddle - React, Tailwind, and code Playground

CSS

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
$table_header_color: #009ac8;
$table_tr_back: #fff;
$table_td_color: #333;
$table_th_color: #fff;
article {
	width: 800px;
	margin: 10px auto;
	font : {

		size: 14px;
		family: 'Nanum Gothic', sans-serif;
	}

	table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 50px;

		th, td {
			padding: 12px 8px;
			text-align: center;
			border: 1px solid rgba($table_td_color, 0.4);
		}

		th {
			background-color: rgba($table_header_color, 0.5);
			color: $table_th_color;
			border: {
				top: 2px solid $table_td_color;
				bottom: 2px solid $table_td_color;
			}
		}

		td {
			&:nth-child(2) {
				text-align: left;
				padding-left: 15px;
			}
		}

		tr {
			&:hover {
				background-color: rgba($table_header_color, 0.5);
				color: $table_th_color;
				cursor: pointer;
			}
		}
	}
}