JSFiddle - React, Tailwind, and code Playground
by hteumeuleu
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="generator" content="2.3.50.166"/>
<title>Page d'accueil</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/site_global.css?34012988"/>
<link rel="stylesheet" type="text/css" href="css/index.css?225074834"/>
<!-- Other scripts -->
<script type="text/javascript">
document.documentElement.className = 'js';
</script>
</head>
<body>
<div class="clearfix" id="page"><!-- column -->
<div class="colelem" id="u65-4"><!-- rasterized frame -->
<img id="u65-4_img" src="http://i.imgur.com/6ctfh.png" alt="Mon site web" width="439" height="53"/>
</div>
<div class="clearfix colelem" id="u67-11"><!-- content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis, quam vel dictum eleifend, purus quam bibendum ligula, a lacinia <a class="nonblock" href="http://www.google.fr">ipsum</a> libero ac est. Quisque congue, lorem eget dapibus facilisis, nunc tellus mollis orci, ut vestibulum quam eros tempor lorem. Vivamus id neque purus, a laoreet nisl. In hac habitasse platea dictumst. Sed pharetra, magna a scelerisque ullamcorper, mauris mauris egestas justo, a volutpat felis augue in sem. Vestibulum in placerat sem. Aliquam erat ipsum, luctus consectetur sollicitudin a, pharetra a massa. Mauris ante odio, pellentesque eu interdum eget, suscipit et mauris. Praesent commodo orci sapien. Suspendisse vel erat diam, nec faucibus risus. Nullam sapien erat, eleifend ac feugiat sit amet, scelerisque sed erat. Integer eget porttitor ipsum. Ut ut quam sed dolor luctus feugiat et at orci. Morbi elit quam, tempor dignissim faucibus id, malesuada nec sapien. Donec nibh lorem, porttitor ac molestie at, venenatis sit amet mi. Morbi mollis cursus laoreet.</p>
<p> </p>
<p><a class="nonblock" href="pr%c3%a9sentation.html">Voir la page de présentation</a></p>
</div>
</div>
<!-- JS...
CSS
/* Index.css */
html
{
background-color: #7F7F7F;
}
#page
{
z-index: 1;
width: 661px;
min-height: 303px;
background-image: none;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
padding: 80px 256px 117px 43px;
}
#u65-4
{
z-index: 2;
margin-left: 5px;
position: relative;
}
#u65-4_img
{
display: block;
vertical-align: top;
}
#u67-11
{
z-index: 6;
width: 661px;
min-height: 190px;
margin-top: 48px;
position: relative;
}
body
{
padding-top: 35px;
padding-bottom: 36px;
}
/* Pr_sentation.css */
html
{
background-color: #7F7F7F;
}
#page
{
z-index: 1;
width: 661px;
min-height: 359px;
background-image: none;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
padding: 79px 254px 62px 45px;
}
#u74-4
{
z-index: 2;
margin-left: 5px;
position: relative;
}
#u74-4_img
{
display: block;
vertical-align: top;
}
#u75-37
{
z-index: 6;
width: 661px;
min-height: 190px;
margin-top: 48px;
position: relative;
}
body
{
padding-top: 35px;
padding-bottom: 36px;
}
/* Site_global.css */
html
{
min-height: 100%;
min-width: 100%;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,a
{
margin: 0;
padding: 0;
border-width: 0;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img
{
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var,optgroup
{
font-style: inherit;
font-weight: inherit;
}
del,ins
{
text-decoration: none;
}
li
{
list-style: none;
}
caption,th
{
text-align: left;
}
h1,h2,h3,h4,h5,h6
{
font-size: 100%;
font-weight:...