JSFiddle - React, Tailwind, and code Playground

by Safire Lauene

HTML

<table class="tabela1">
	<tr>
		<th>Coluna 1</th>
		<th>Coluna 2</th>
		<th>Coluna 3</th>
	</tr>
	<tr>
		<td>Linha</td>
		<td>Linha</td>
		<td>Linha</td>
		
	</tr>
	<tr>
		<td>Linha</td>
		<td>Linha</td>
		<td>Linha</td>
	</tr>
</table>

CSS

.tabela1{
	border:1px solid #ccc;
	border-spacing:0;
	border-collapse:collapse;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	-webkit-box-shadow: 1px 1px 20px 5px #CCCCCC;
	box-shadow: 1px 1px 20px 5px #CCCCCC;
	
	width:80%;
	margin-left:10%;
	
}

.tabela1 th{
	border:1px solid #ccc;
	padding: 5px;
}

.tabela1 tr td{
	/* cor das linhas */
	background-color: #959595;
	
	color: #fff;
	text-shadow: 0px 0px 1px #EDEDED;
	border:1px solid #ccc;
	padding: 10px;
	text-align:center;
	
	-webkit-transition-duration: 0.9s;
	transition-duration: 0.9s;
	
}

.tabela1 tr td:hover,.tabela1 tr td:focus,.tabela1 tr td:active {  
	opacity: 0.7;
	
	
}