JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<section class="contain">
  <div id="section-nav" class="section-nav">
<div class="top">
  <ul>
    <li class="logo"><a href="#">Magna Contra</a></li>
    <li class="active"><a href="#">Blog With Us</a></li>
    <li><a href="#">Compxta</a></li>
    <li><a href="#">Laurie</a></li>
    <li><a href="#">SUBTITLESOFLIFE</a></li>
<li>

 </li>
</ul>
</div>
</div>
</section>
<div class="bg">





<h1>SUBTITLESOFLIFE</h1>
</div>

<ul class="check">
<li class="bold"><a href="#">Hot Trends</a></li>
<li class="topic"><a href="#">Daft Punk</a></li>
<li class="topic"><a href="#">#bbcqt</a></li>
<li class="topic"><a href="#">Petite Noir - Major</a></li>
<li class="topic"><a href="#">Alt J Album Teaser</a></li>
<li class="topic"><a href="#">Materialistic Happine$$</a></li>
<li class="topic"><a href="#">WOLF</a></li>

</li>
</li>
</li>
</li>
</li>
</li>
</li>
</ul>


<div class="contar">
  ljklk
  </div>

</body>
</html>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
html, body {
  height: 100%;
  color:#fff;
}
 HTML5 display-role reset for older browsers 
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  text-align: center;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

body{
  background-color: #dfe0db;
}


ul
{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
}

.check{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
display: inline-block;

}




::selection{background:red;color:red;}::-moz-selection{background:red;color:red;}

li
{
display: inline;
padding:15px;
text-align: center;
margin:auto 0;
position: relative;
}

li a{
  text-decoration: none;
  color:#bbbbbb;
  font-family: "proxima-nova",sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.78em;
letter-spacing: .2em}

hr{
  color:#dfe0db;
    border: 0;
background-color: #dfe0db;
height: 1px;
}

.bold{
  display: inline;
}

.bold a{
  color:#e94378;
}
.topic{
  display: inline;
padding:8px;
text-align: center;
margin:auto 0;
position: relative;

}

.topic...