JSFiddle - React, Tailwind, and code Playground

by asifrc

HTML

<!-- Wrapper Start -->
<div id="wrapper">
    <div class="wrapper cf">
<span class="bar white"></span>

<span class="line red"></span>

<div class="content black">

<!-- Content  Start -->

<h1>Project Hollywood</h1>

<div id="nav">
<ul>
<li><a href="login.php">Sign In</a></li>
<li><a href="index.php">Home</a></li>
</ul>

<ul>
<li><a href="index.php">Home</a></li>
<li><a href="admin.php">Admin Panel</a></li>
<li><a href="logout.php">Sign Out</a></li>
</ul>
    </div>
    <!-- Entries  Start -->
    <span class="post">
<h3>Title</h3>
        <br>
            <p>Content</p>
            <br>
                Tags:
                <a href = "tag.php?tid=tag">Tag</a>
                </span>
            <!-- Entries  Start -->
    <span class="post">
<h3>Title</h3>
        <br>
            <p>Content</p>
            <br>
                Tags:
                <a href = "tag.php?tid=tag">Tag</a>
                </span>

        <!-- Entries & Content End -->
        </div>
<span class="line red"></span>

<span class="bar white"></span>

    </div>
</div>

CSS

}
.white {
    background-color: #FFFFFF;
}
.red {
    background-color: #A80000;
}
.black {
    background-color: #000000;
    background-image:url('http://i.imgur.com/bcq2U.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-attachment:fixed;
}
/*------------------------Navigation------------------------*/
 #nav {
    width: 100%;
    float: left;
    background-color: #A80000;
    border-bottom: 1px solid #C4A23E;
}
ul {
    list-style: none;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    font-family:"Arial";
}
li {
    float: left;
}
li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: #000000;
    background-color:#A80000;
    border-right: 1px solid #C4A23E;
}
li a:hover {
    color: #A80000;
    background-color: #C4A23E;
}
/*------------------------Text------------------------*/
 h1 {
    color: #FFFFFF;
    font-family:"Arial";
    text-alighn:center;
}
/*------------------------Boxes------------------------*/
 .post {
    float:left;
    display:inline;
    border-style:groove;
    border-width:2px;
    border-color:#A80000;
    background-image:url('http://i.imgur.com/kOFxo.png');
    background-repeat:no-repeat;
    background-position: top left;
    background-color:white;
    width:60%;
    margin:0px auto;
    text-align:left;
    padding:2px 5px 2px 5px;
    margin:1cm 0cm 1cm 1cm;
}
.logbox {
    float:left;
    border-style:groove;
    border-width:2px;
    border-color:#A80000;
    background-image:url('http://i.imgur.com/kOFxo.png');
    background-repeat:no-repeat;
    background-position:top left;
    background-color:white;
    margin:0px auto;
    text-align:center;
    padding:80px 80px 80px 80px;
    margin:1cm 0cm 1cm...