JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<body>
    <div id="front_page" class="page">
        <header>WELCOME SLIDESHOW</header>
        <div id="intro_links">	<a class="nav_link" href="#">New Artists</a>
	<a class="nav_link" href="#">New Designs</a>
	<a class="nav_link" href="#">New Garments</a>
	<a class="nav_link" href="#">How it Works</a>

        </div>
        <div id="new_artists" class="title_01">New Artists</div>
        <div class="new_artist_pane">
            <div class="art_pane01"></div>
            <div class="art_pane01"></div>
            <div class="art_pane01"></div>
        </div>
    </div>
    <!--front_page-->
    <footer>footer</footer>
</body>

CSS

@charset"utf-8";

/* CSS Document */
 body {
    margin:0;
    padding:0;
    height:auto;
    width:100%;
    display:block;
    /*background-color:#36F;*/
}
header {
    width:100%;
    height:444px;
    background-color:#999;
    color:#fff;
    text-align:center;
    display:block;
}
footer {
    width:100%;
    height:111px;
    margin-top:4%;
    background-color:#999;
    color:#fff;
    text-align:center;
    display:block;
}
.page {
    width:100%;
    height:auto;
    margin-bottom:4%;
    display:block;
}
#intro_links {
    width:88%;
    overflow:auto;
    margin:auto;
    display:block;
}
.nav_link {
    width:23%;
    height:137px;
    float:left;
    text-align:center;
    text-decoration:none;
    margin:4% 0 4% 2%;
    display:block;
    background-color:#03C;
    color:#fff;
}
.title_01 {
    width:44%;
    height:44px;
    background-color:#666;
    font-size:29pt;
    color:#fff;
    display:block;
    float:left;
    clear:both;
}
.new_artist_pane {
    width:66%;
    height:auto;
    border:solid 1px #333;
    float:left;
    margin:4% 0 0 2%;
    display:block;
}
.art_pane01 {
    width:100%;
    height:333px;
    float:left;
    border:solid 1px #CCC;
    margin-bottom:4%;
    display:block;
}