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:...