JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<div class="header">
<div class="logo">
    <a href="http://codecat.pancakeapps.com/index.html">
    &#60;Codecat&#62;
    </a>
<nav>
    <ul>
        <li>BIO</li>
        <li>COMMISIONS</li>
    </ul>
</nav>  
</div>    
</div>
<div class="about">
Welcome to Codecat! I am an independent web designer that makes hand crafted websites on commision for affordable prices. My last three projects are listed below, (to the owners expense) so look around!
</div>
<div class="one">
<h1>Blinders Journal</h1>
<span class="progress">(In Progress)</span>
<article>
<span class="link">
    <a href="http://blindersjournal.pancakeapps.com/index.html">
http://blindersjournal.pancakeapps.com/index.html
    </a>
</span>
<br />
<p>Have you ever, as a new writer, felt intimidated by the contributor bios you read in the back of your favorite magazines? Have you ever, as a well-established writer, wondered how well your manuscripts would fare if they were separated from your name and list of previous publications?</p>

<p>We here at Blinders Literary Journal hope that we have found a solution for writers and poets, new and advanced. We read blind submissions only for two electronic issues a year, one to be published in summer and one in winter. We never want to see your cover letter, only your fiction, creative nonfiction, poetry, and artwork.</p>

<p>Once we accept your work, we will display it professionally in a digital environment. Also, upon acceptance, your name will become important to us. We will pay the highest respect possible to our contributors.</p> 
</article>
</div>
<div class="two">
<h1>Lorem ipsum dolor sit amet</h1>
<span class="progress">(Done)</span>
<article>
<span class="link">http://consectetuer.adipiscing.elit.com</span>
<br />
<p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim....

CSS

@font-face {
font-family: Orson Heavy;
src: url('https://dl.dropboxusercontent.com/u/105222237/sf-orson-casual.heavy.ttf');
}
@font-face {
font-family: Timeburner;
src: url('https://dl.dropboxusercontent.com/u/105222237/timeburner_regular.ttf');
}
@font-face {
font-family: Icecream;
src: url('https://dl.dropboxusercontent.com/u/105222237/ICE-CS__.TTF');
}
@font-face {
font-family: Nordic;
src: url('https://dl.dropboxusercontent.com/u/105222237/PTF-NORDIC-Rnd.ttf');
}
.header {
background: #000;
height: 60px;
}
.logo {
font-family: Orson Heavy;
font-size: 40px;
color: #0f0;
margin-left: 10px;
position:relative;
float;left;
}
nav ul
{
    list-style-type:none;
    display:inline-block;
    margin-left:210px;
    margin-top:-39px;
}
body {
background: url('http://www.dreamwidth.org/img/styles/planetcaravan/starrysky.png');
}
.one, .two {
background: #000;
text-align: left;
padding: 20px;
margin-left: 120px;
margin-right: 120px;
margin-top: 20px;
}
h1 {
font-family: Icecream;
font-size: 40px;
color: yellow;
letter-spacing: 2px;
}
article {
font-family: Verdana;
color: #fff;
font-size 10px;
}
.progress {
color: yellow;
font-size 14px;
font-family: Timeburner;
}
.link {
color: yellow;
}
.about {
background: rgba(0,0,0,0.5);
text-align: left;
padding: 20px;
margin-left: 120px;
margin-right: 120px;
margin-top: 20px; 
color: green;
font-size: 21px;
font-family: Timeburner;
}
a {
text-decoration: none;
color: yellow;
}
.logo a {
color: green;
}
nav {
font-family: Nordic;
font-size: 30;
color: green;
}
ul {
float: left;
margin: 0;
padding: 0;
list-style: none; 
}
li {
float: left; 
}