JSFiddle - React, Tailwind, and code Playground

by craigzilla

HTML

<div class="projectWrapper">
  <div class="title">Lorem ipsum sit amet</div>
  <video controls poster="http://lorempixel.com/output/abstract-q-c-1280-720-10.jpg" id="video"> 
    <!-- Video: 8000 kbps, Audio: 160 kbps -->
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type='video/ogg; codecs="theora, vorbis"' />
  </video>
  <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet libero vitae nisl euismod convallis. Aenean egestas dignissim quam vitae bibendum. Maecenas quis libero lorem. Aenean vel libero eget mi facilisis scelerisque a quis odio. Vivamus accumsan eros sed arcu interdum feugiat. Etiam feugiat sapien at enim blandit eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</div>

CSS

body, html {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #394264;
	font-family: "quatro-slab";
	font-style: normal;
	color: #ffffff;
	width: 100%;
	height: 100%;
}
.wrapper {
	max-width: 100%;
	min-width: 320px;
	overflow: hidden;
}
.tab {
	width: 300px;
	height: 400px;
	float: left;
	margin: 10px;
}
.tab:nth-child(4n+1) {
	background: #e64c65;
}
.tab:nth-child(4n+2) {
	background: #11a8ab;
}
.tab:nth-child(4n+3) {
	background: #fcb150;
}
.tab:nth-child(4n+4) {
	background: #4fc4f6;
}
.info {
	width: 290px;
	padding: 10px 0px 0px 10px;
}
#name {
	font-weight: 900;
	font-size: 36px;
	line-height: 46px;
}
#contact {
	font-weight: 300;
	font-size: 20px;
}
.bottom {
	width: 290px;
	height: 90px;
	font-weight: 400;
	font-size: 32px;
	padding: 5px 0px 0px 10px;
}

.projectWrapper {
	max-width: 960px;
	min-width: 320px;
	margin: auto;
}
.title {
	position: relative;
	right: -10px;
	width: 90%;
	font-weight: 900;
	font-size: 44px;
	padding-bottom: 10px;
}
video {
	width: 100%;
}
.description {
	position: relative;
	right: -10px;
	width: 90%;
	font-weight: 300;
	font-size: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}