JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
	<link href='https://fonts.googleapis.com/css?family=Holtwood+One+SC' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Kaushan+Script|Herr+Von+Muellerhoff' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Istok+Web|Roboto+Condensed:700' rel='stylesheet' type='text/css'>

	<title>SwordSayers Tournament</title>
</head>
<body>
	<header class="hero">
    <div class="hero-wrap">
     <p class="intro" id="intro">SwordSayers</p>
		 <h1 id="headline">Tournament</h1>
		 <p class="year"><i class="fa fa-star"></i> 3000 <i class="fa fa-star"></i></p>
     <p>Fight for the Future</p>
   </div>
	</header>


	<section id="bracket">
	<div class="container">
	<div class="split split-one">
		<div class="round round-one current">
			<div class="round-details">Round 1<br/><span class="date">March 16</span></div>
			<ul class="matchup">
				<li class="team team-top">Grandle<span class="score">W</span></li>
				<li class="team team-bottom">Robe Knight<span class="score">L</span></li>
			</ul>
			<ul class="matchup">
				<li class="team team-top">Pond<span class="score">W</span></li>
				<li class="team team-bottom">.....<span class="score">L</span></li>
			</ul>
			<ul class="matchup">
				<li class="team team-top">Volcanis<span class="score">W</span></li>
				<li class="team team-bottom">Shana<span class="score">L</span></li>
			</ul>
			<ul class="matchup">
				<li class="team team-top">Flower<span class="score">W</span></li>
				<li class="team team-bottom">Macabre Knight<span class="score">L</span></li>
			</ul>			
			<ul class="matchup">
				<li...

CSS

body {font-family: 'Istok Web', sans-serif;background: url("http://picjumbo.com/wp-content/uploads/HNCK2189-1300x866.jpg") no-repeat #000;background-size: cover;min-height: 100%;margin: 0;}
.hero {position:relative; text-align: center; overflow: hidden; color: #fcfcfc; }
.hero h1 {font-family: 'Holtwood One SC', serif;font-weight: normal;font-size: 5.4em;margin:0 0 20px; text-shadow:0 0 12px rgba(0, 0, 0, 0.5);text-transform: uppercase;letter-spacing:-1px;}
.hero p {font-family: 'Abel', sans-serif;text-transform: uppercase; color: #5CCA87; letter-spacing: 6px;text-shadow:0 0 12px rgba(0, 0, 0, 0.5);font-size: 1.2em;}
.hero-wrap {padding: 3.5em 10px;}
.hero p.intro {font-family: 'Holtwood One SC', serif;text-transform: uppercase;letter-spacing: 1px;font-size: 3em;margin-bottom:-40px;}
.hero p.year {color: #fff; letter-spacing: 20px; font-size: 34px; margin: -25px 0 25px;}
.hero p.year i {font-size: 14px;vertical-align: middle;}
#bracket {overflow:hidden;background-color: #e1e1e1;background-color:rgba(225,225,225,0.9);padding-top: 20px;font-size: 12px;padding: 40px 0;}
.container {max-width: 1100px;margin: 0 auto;display:block;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: -webkit-flex;display: flex;-webkit-flex-direction:row;flex-direction: row;}
.split {display:block;float:left;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display:flex;width: 42%;-webkit-flex-direction:row;-moz-flex-direction:row;flex-direction:row;}
.champion {float:left;display:block;width: 16%;-webkit-flex-direction:row;flex-direction:row;-webkit-align-self:center;align-self:center;margin-top: -15px;text-align: center;padding: 230px 0\9;} 
.champion i {color: #a0a6a8; font-size: 45px;padding: 10px 0; }
.round {display:block;float:left;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display:...