JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Basic 79</title>
<meta charset="iso-8859-1">
<link rel="stylesheet" href="styles/layout.css" type="text/css">
<!--[if lt IE 9]>
<script src="scripts/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper row1">
<header id="header" class="clear">
<hgroup>
<h1><a href="#">Basic 79</a></h1>
<h2>Free HTML5 Website Template</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Text Link</a>
</li>
<li><a href="#">Text Link</a>
</li>
<li><a href="#">Text Link</a>
</li>
<li><a href="#">Text Link</a>
</li>
<li class="last"><a href="#">Text Link</a>
</li>
</ul>
</nav>
</header>
</div>
<!-- content -->
<div class="wrapper row2">
<div id="container" class="clear">
<!-- content body -->
<!-- main content -->
<section id="services" class="clear">
<!-- article 1 -->
<article class="one_third">
<h2>Lorum ipsum dolor</h2>
<img src="images/demo/80x80.gif" alt="">
<p>Vestibulumaccumsan egestibulum eu justo convallis augue estas aenean elit
intesque sed. Facilispede estibulum nulla orna nisl velit elit ac aliquat
non tincidunt. Namjusto cras urna urnaretra lor urna neque sed quis orci
nulla. Laoremut vitae doloreet condimentumst phasellentes dolor ut a...
CSS
/*
HTML 5 Template Name: Basic 79
File: Layout CSS
Author: OS Templates
Author URI: http://www.os-templates.com/
Licence: <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>
*/
html {
overflow-y:scroll;
}
/* Forces a scrollbar when the viewport is larger than the websites content - CSS3 */
body {
margin:0;
padding:0;
font-size:13px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#979797;
background-color:#FFFFFF;
}
.clear:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
line-height:0;
}
.clear {
display:block;
clear:both;
}
html[xmlns] .clear {
display:block;
}
* html .clear {
height:1%;
}
a {
outline:none;
text-decoration:none;
}
code {
font-weight:normal;
font-style:normal;
font-family:Georgia, "Times New Roman", Times, serif;
}
.fl_left {
float:left;
}
.fl_right {
float:right;
}
img {
margin:0;
padding:0;
border:none;
line-height:normal;
vertical-align:middle;
}
.imgholder, .imgl, .imgr {
padding:4px;
border:1px solid #D6D6D6;
text-align:center;
}
.imgl {
float:left;
margin:0 15px 15px 0;
clear:left;
}
.imgr {
float:right;
margin:0 0 15px 15px;
clear:right;
}
/*----------------------------------------------HTML 5 Overrides-------------------------------------*/
address, article, aside, figcaption, figure, footer, header, hgroup, nav, section {
display:block;
margin:0;
padding:0;
}
q {
display:block;
padding:0 10px 8px 10px;
color:#979797;
background-color:#ECECEC;
font-style:italic;
line-height:normal;
}
q:before {
content:'“ ';
font-size:26px;
}
q:after {
content:' „';
font-size:26px;
line-height:0;
}
/* ----------------------------------------------Wrapper-------------------------------------*/
div.wrapper {
display:block;
width:960px;
margin:0 auto;
padding:0;
...
JavaScript
/*! HTML5 Shiv vpre3.6 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */
;
(function (window, document) {
/** Preset options */
var options = window.html5 || {};
/** Used to skip problem elements */
var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
/** Not all elements can be cloned in IE (this list can be shortend) **/
var saveClones = /^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i;
/** Detect whether the browser supports default html5 styles */
var supportsHtml5Styles;
/** Name of the expando, to work with multiple documents or to re-shiv one document */
var expando = '_html5shiv';
/** The id for the the documents expando */
var expanID = 0;
/** Cached data for each document */
var expandoData = {};
/** Detect whether the browser supports unknown elements */
var supportsUnknownElements;
(function () {
var a = document.createElement('a');
a.innerHTML = '<xyz></xyz>';
//if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
supportsHtml5Styles = ('hidden' in a);
supportsUnknownElements = a.childNodes.length == 1 || (function () {
// assign a false positive if unable to shiv
try {
(document.createElement)('a');
} catch (e) {
return true;
}
var frag = document.createDocumentFragment();
return (
typeof frag.cloneNode == 'undefined' || typeof frag.createDocumentFragment == 'undefined' || typeof frag.createElement == 'undefined');
}());
}());
/*--------------------------------------------------------------------------*/
/**
* Creates a style sheet with the given CSS text and adds it...