JSFiddle - React, Tailwind, and code Playground

by pphheerroonn

HTML

<!DOCTYPE html>
<html>
<head>
<style>
body{
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}
header img{
width: 20%;
max-width:200px;
}

#gridcontainer
{
/*display:none;*/
height:300px;
background-color:yellow;
overflow: hidden;
}

#gridcontainertarget
{
display:block;
width: 80%;
margin 0px auto;
max-width:1000px;
}

div .grid
{
width: 20%;
padding: 10%;
margin: 1%;
float: left;
border-style:solid;
border-color:#B8B8B8;
border-width:1px;
border-radius:4px;
style="cursor: pointer;" onclick="window.location="#one";"
}

div .grid:hover
{ 
border-color:#007AFF;
box-shadow: 0px 0px 0px 1pt #007AFF;
}

div .grid img
{
width: 100%;
}
div .grid a
{
display: block
width 80%;
margin: 0px auto;
}
a:link {text-decoration:none; color: black;}
a:visited {text-decoration:none; color: black;}
a:hover {text-decoration:underline; color: black;}
a:active {text-decoration:underline; color: black;}
h1{
font-weight: 100;
}
h2{
 font-family: 'HelveticaNeue-UltraLight', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 100;
}
</style>
</head>
<body id="home">
<header>
<img src ="http://compub.com/compublogoblack.png">
<img style="float: right;" src="http://www.stangelas.nuigalway.ie/images/nuig_col.gif">
<div style="clear: right">
</header>
    <h1>Compu b / NUI Galway</h1>
    
    <h2>Request a quote:</h2>
<div id="gridcontainer">
    <div id= "macbook" class="grid">
     <img src="http://www.stormfront.co.uk/mac/images/macbook-retina-stormfront.jpg" alt="">
     <a href="#one">Macbook</a>
    </div><!--end-->
    <div id= "iMac" class="grid">
     <img src="http://www.stormfront.co.uk/mac/images/macbook-retina-stormfront.jpg" alt="">
     iMac
    </div><!--end-->
    <div id= "mac" class="grid">
     <img src="http://www.stormfront.co.uk/mac/images/macbook-retina-stormfront.jpg" alt="">
     Mac
   ...

CSS

body{
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}
header img{
width: 20%;
max-width:200px;
}
#gridcontainer
{
width: 80%;
margin 0px auto;
max-width:1000px;
}
div .grid
{
width: 20%;
padding: 10%;
margin: 1%;
float: left;
border-style:solid;
border-color:#B8B8B8;
border-width:1px;
border-radius:4px;
style="cursor: pointer;" onclick="window.location="#one";"
}

div .grid:hover
{ 
border-color:#007AFF;
box-shadow: 0px 0px 0px 1pt #007AFF;
}

div .grid img
{
width: 100%;
}
div .grid a
{
display: block
width 80%;
margin: 0px auto;
}
a:link {text-decoration:none; color: black;}
a:visited {text-decoration:none; color: black;}
a:hover {text-decoration:underline; color: black;}
a:active {text-decoration:underline; color: black;}
h1{
font-weight: 100;
}
h2{
 font-family: 'HelveticaNeue-UltraLight', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 100;
}