JSFiddle - React, Tailwind, and code Playground

HTML

<body>

      <header class="position-fixed container">
        <div class="header-content">
          <a class="site-logo"><i class="fa fa-diamond fa-4x">            </i></a>
          <h1 class="blog-title"><a href="">HEADER</a></h1>
          <h2 class="blog-desc">lorem descriptionsum</h2>
        </div>
      </header>    
      <div class="container">

      <!-- Left information sidebar -->
      <div class="row spacing-top">
        <div class="position-fixed col-md-2 col-xs-4 hidden-xs hidden-sm  ">
<h3>ABOUT ME</h3>

<h4>Recent Posts</h4>
<ul>
	{% for post in site.posts limit: 5 %}
	<li><a href="{{ post.url }}">{{ post.title }}</a></li>
	{% endfor %}
</ul>

<p>Donec libero libero, bibendum non condimentum ac, ullamcorper at sapien.\
 Duis feugiat urna vel justo cursus facilisis. Vivamus ligula dui, convalli\
s a varius vitae, facilisis eget magna.</p>
        </div>
  
        <!-- Will house main content -->
        <div class="min-width float-right col-md-10 col-xs-12 ">
          
          <div class="frame">
            <div class="content">
<!-- Front Page (/site) - index.html -->
<div class="home">

  <h1>POSTS</h1>


  <!-- Loop through paginated posts -->
  <ul class="post-list">
    {% for post in paginator.posts %}
      <li>
       <h2>
          <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
        </h2>
        
        <p>{{ post.excerpt }}</p>
        
        <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
      </li>
    {% endfor %}
  </ul>
  
  <!-- Pagination links -->
  {% if paginator.total_pages > 1 %}
<div class="pagination">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
  {% else %}
    <span>&laquo; Prev</span>
  {% endif %}

  {% for page in (1..paginator.total_pages) %}
    {% if page == paginator.page %}
      <em>{{ page }}</em>
    {% elsif page == 1 %}
      <a...

CSS

/** {
  outline: 1px dashed red;
}
*/
body {
  background-color:rgba(230,230,240,0.5) !important;
}


.min-size {
  min-width: 1000px !important;

}
header {
  /*top:30px;
  left: 150px;*/
  margin: 10px 0 30px 0;
}

.spacing-top {
  margin-top: 120px;
}

.float-right {
  float: right;
}

.position-fixed {
  position: fixed;
}

.container {
  margin-left: 120px;
  max-width: 1000px;
  margin: 0 141px;
}
.header-content {
  position: relative;
  padding: 30px 0 23px 0;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}
.site-logo {
  text-decoration: none;
  float: left;
  margin: -10px 10px 0 0;
}
.blog-title{

margin: 0 0 0 40px;
font-size: 3.2rem;
letter-spacing: -1px;
font-weight: bold;
font-family: 'Open Sans',sans-serif;
text-transform: uppercase;
}
.blog-desc {
  margin: 0 0 0 41px;
font-size: 1.5rem;
line-height: 1em;
font-weight: normal;
letter-spacing: 0;
}
.nav {
  border-radius: 10px 0 0 0;
  background-color:rgba(255,255,255,0.5);
  
}

.no-left-padding {
  padding-left: 0;
  
}

.no-right-padding {
  padding-right: 0;
}
.content {
  padding: 30px 30px;
  overflow: auto;
  height: 300;
}


a {
  position: relative;
}
a:hover {
  text-decoration: none !important;
}
.spacing { 
  padding-top: 20%;
}

.frame {
  width: auto;
  height: 800px;
  overflow: hidden;
  padding: 10px;
}