JSFiddle - React, Tailwind, and code Playground

by juvian

HTML

<div id="navv" style="position: absolute;">
<a href="#opening" class="nav">Selling</a>
 <a href="#1" class="nav">Buying/trading</a>

<a href="#2" class="nav">Screenies</a>

    <p></p>
</div>
<div id="hi" style="position: absolute;"> <a name="opening"></a>

    <div id="under">
         <h1 class="heading">Selling</h1>

        <img src="http://cgi.boingdragon.com/count/juvian/2.gif" width="114" height="35" />
        <div><span>started on 22/11/2010</span>

        </div> <span>Hover over the item to see its price. Prices are not accurate as most are hts and their prices might change. Mail to ask for accurate price.</span>

        <div id="for_sale">
            <div>
                 <h1> For sale:</h1>

            </div>
            <div><span class='separator'>1-9</span>

            </div>
            <div class='images'>
                <img src='http://images.neopets.com/items/sch_fyora_10th.gif' title='10th Birthday Fyora Ballpoint Pen: 250k'></img>
                <img src='http://images.neopets.com/items/toy_isca_10th.gif' title='10th Birthday Isca Counter: 300k'></img>
                <img src='http://images.neopets.com/items/gif_sloth_10th.gif' title='10th Birthday Sloth Gift Box: 250k'></img>
                <img src='http://images.neopets.com/items/bak_scorchio_10thbdaycake.gif' title='10th Birthday Red Scorchio Birthday Cake: 300k'></img>
            </div>
            <div><span class='separator'>A</span>

            </div>
            <div class='images'>
                <img src="http://images.neopets.com/items/boo_altador_summer.gif" title="Altador in Summer : 500k"></img>
                <img src="http://images.neopets.com/items/toy_kite_blueshoyru.gif" title="Adorable Blue Shoyru Kite : 800k"></img>
                <img src='http://images.neopets.com/items/fueltank.gif' title='Aquatic Gem: 5m'></img>

                <img src='http://images.neopets.com/items/altcp2_toy_angrytecho_plushie.gif' title='Angry Techo Plushie: 200k'></img>
      ...

CSS

body {
    background: #cae4ff;
}
.sf {
    display: none;
}
#hi {
    background-color: #ffffff;
    left: 10px;
    width: 830px;
    height: 525px;
    overflow: hidden;
    top: 75px;
    padding: 5px;
    border: #53a9ff 5px solid;
}
#under {
    background-color: #ffffff;
    overflow: auto;
    height: 520px;
    margin-bottom: 1000px;
}
#navv {
    left: 870px;
    width: 300px;
    height: 500px;
    top: 70px;
    padding: 5px;
}
h1 {
    color: #53a9ff;
    font-family: rockwell;
    margin-bottom: 5px;
    font-size: 25pt;
    border-bottom: 3px solid #cae4ff;
}
h2 {
    color: #53a9ff;
    font-family: verdana;
    margin-bottom: 5px;
    font-size: 15pt;
    text-transform: lowercase;
}
FONT, td, body {
    font-family: tahoma;
    font-size: 10pt;
    color: #000000;
}
a, b {
    text-decoration: none;
    color: #53a9ff;
    font-weight: bold;
}
a:hover {
    text-decoration: none;
    color: #cae4ff;
    font-weight: bold;
}
a.nav, a.nav:hover {
    text-decoration: none;
    color: #53a9ff;
    font-weight: bold;
    font-size: 18px;
    font-family: tahoma;
    display: block;
}
span {
    color: #53a9ff;
}
#hi {
    text-align:center;
}
#pictures img {
    display:block;
}
table b {
    display:block;
}
table {
    text-align:center
}
table td {
    text-align:center;
}
#sold, #for_sale {
    margin-top:200px;
    background-color: rgb(255, 255, 255);
    border: 3px solid rgb(83, 169, 255);
    border-style:dotted;
    padding-bottom:20px;
}
#for_sale {
    margin-top:20px;
}
.separator {
    color: #53a9ff;
    font-family: rockwell;
    margin-bottom: 5px;
    font-size: 20pt;
    border-bottom: 3px solid #cae4ff;
    margin:10px;
}
.images {
    margin-top:30px;
    margin-bottom:30px;
}