JSFiddle - React, Tailwind, and code Playground

by Dan Pasca

HTML

<!--html5 semantics-->
<!DOCTYPE html>

<header class="borders">
    <img src="http://www.w3schools.com/images/w3logotest2.png" />
</header>

<br />

<nav class="borders">
    <ul>
        <li>Run</li>
        <li>Save</li>
        <li>Quit</li>
        <li>Set</li>
        <li>Tidy</li>
        <li>Share</li>
    </ul>
</nav>

<br />

<div class="container">
<section class="borders">
    <header>
        <h1>Sectiune titlu</h1>
    </header>
    <article>
        <img class="articleimg" src="chrome://branding/content/about-logo.png" />      
        at pentru a crea o carte demonstrativă pentru literele respective. Nu doar că a supravieţuit timp de cinci secole, dar şi a facut saltul în tipografia electronică practic neschimbată. A fost popularizată în anii '60 odată cu ieşirea colilor Letraset care conţineau pasaje Lorem Ipsum, iar mai recent, prin programele de publicare pentru calculator, ca Aldus PageMaker care includeau versiuni de Lorem Ipsum.
        <div class="date">14/04/2014</div>
    </article>
    <article>
        <img class="articleimg" src="chrome://branding/content/about-logo.png" />      
        at pentru a crea o carte demonstrativă pentru literele respective. Nu doar că a supravieţuit timp de cinci secole, dar şi a facut saltul în tipografia electronică practic neschimbată. A fost popularizată în anii '60 odată cu ieşirea colilor Letraset care conţineau pasaje Lorem Ipsum, iar mai recent, prin programele de publicare pentru calculator, ca Aldus PageMaker care includeau versiuni de Lorem Ipsum.
        <div class="date">14/04/2014</div>
    </article>
    <article>
    
        <img class="articleimg" src="chrome://branding/content/about-logo.png" />      
        at pentru a crea o carte demonstrativă pentru literele respective. Nu doar că a supravieţuit timp de cinci secole, dar şi a facut saltul în tipografia electronică practic neschimbată. A fost popularizată în anii '60 odată cu ieşirea colilor Letraset care conţineau pasaje Lorem...

CSS

.borders {
    border: 0px solid black;
}

@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Serif'), local('DroidSerif'), url(http://themes.googleusercontent.com/static/fonts/droidserif/v4/0AKsP294HTD-nvJgucYTaIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}


ul {
    background: linear-gradient(180deg, rgb(31,178,219), rgb(20,61,107));
    list-style-type: none;
    height:45px;
    padding-top: 17px;
}

li {
    background-color: black;
    color: white;
    font-weight:bold;
    display: inline-block;
    border-radius: 5px;
    padding: 5px 15px 5px 15px;
    margin-left:5px;

    transition: all 0.2s ease;
}

li:hover {
    box-shadow: 1px 3px 3px black;
    color: black;
    background-color: white;
    font-family: 'Droid Serif';
    display:inline-block;
    transform:rotate(30deg) scale(1.5);
    -webkit-transform:rotate(30deg) scale(1.5);
}

header {
    width: 100%;
}

footer {
    width: 100%;
    position: relative;
    margin: 10px;
    background: orange;
    display: block;
    text-align:center;
    
}

article {
    border: 1px solid black;
    position: relative;
    height: auto;
    padding: 5px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -40px;
    margin-top: 60px;
}

.container {
    width: 900px;
    margin-left:auto;
    margin-right:auto;
    height: auto;
}

header h1 {
    position: absolute;
    background-color:white;
    z-index: 5;    
}

section {
    float: left;
    width: 70%;
    background: red;
    height:300px;
    overflow: scroll;
    
}

.articleimg {
    float: left;
    width: 100px;
    height: 100px;
}

.date {
    position: relative;
    float: right;
    background: green;
}

aside {
    float: right;
    background: darkblue;
    width: 30%;
    height: 300px;
    box-shadow: inset 3px 0  3px black;
}