JSFiddle - React, Tailwind, and code Playground

by Sokiraon

HTML

<!--HTML-->
<div id='app'>
	<table>
		<tr>
			<th>{{ headers[0] }}</th>
			<th>{{ headers[1] }}</th>
		</tr>
		<tr>
			<td>{{ content.name }}</td>
			<td>{{ content.sex }}</td>
		</tr>
	</table>
</div>

CSS

table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
}

th, td {
	padding: 5px 10px 5px 10px;
}

JavaScript

new Vue({
	el: '#app',
	data: {
		headers: ['Name', 'Sex'],
		content: {
			name: 'John',
			sex: 'Male',
		},
	},
})