JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<div class="masterContainer">
<main class="main">
<article class="article">
<header>
<div class="contain3"><span class="name"><a href="#">Uba Rant</a></span><time>31st October 2019</time></div>
<h1 itemprop="headline">Halloween: The Spooky Quiz!</h1>
</header>
<div class="contain2"></div>
<h2>Be a Guest Writer</h2>
<p>
In tellus lacus, mollis nec nibh congue, eleifend imperdiet ligula. Proin tristique molestie lectus eget laoreet. Vivamus non lectus arcu. Sed tempor nec tellus <a href="#">et scelerisque</a>. Sed rutrum sollicitudin pharetra. Proin et est massa. Morbi ultrices libero lacus, ac condimentum erat posuere at. Sed vitae interdum augue. Sed at mattis diam. Curabitur tincidunt turpis ac maximus rhoncus.
</p>
<h2>Why is it Spooky?</h2>
<p>
In tellus lacus, mollis nec nibh congue, eleifend imperdiet ligula. Proin tristique molestie lectus eget laoreet. Vivamus non lectus arcu. Sed tempor nec tellus et scelerisque. Sed rutrum sollicitudin pharetra. Proin et est massa. Morbi ultrices libero lacus, ac condimentum erat posuere at. Sed vitae interdum augue. Sed at mattis diam. Curabitur tincidunt turpis ac maximus rhoncus.
</p>
</article>
<div class="social">
<div class="facebook"><a href="#">SHARE</a></div><div class="twitter"><a href="#">TWEET</a></div><div class="staf"><a href="#">EMAIL</a></div>
</div>
</main>
<aside>Make This an Include</aside>
<aside>Make This an Include</aside>
</div>
<footer>Footer</footer>CSS
body{margin:20px 0;background:#eeeeee;font-family:'Arial';}
.masterContainer {max-width:740px;margin:auto;}
.main {position:relative;max-width:740px;margin:auto;background:#ffffff;-webkit-box-shadow: 0px 0px 5px 0px rgba(214,221,226,1);
-moz-box-shadow: 0px 0px 5px 0px rgba(214,221,226,1);
box-shadow: 0px 0px 5px 0px rgba(214,221,226,1);}
.article {padding:20px 20px 60px 20px;}
.contain {max-width:700px;}
.contain2 {max-width:700px;background:#999999;height:350px}
.contain3 {max-width:700px;background:#eeeeee;height:24px;font-size:14px;line-height:24px;font-family:'Arial';}
.name a {background:#444444;color:#ffffff;line-height:24px;padding:0 10px;display:inline-block;margin:0 7px 0 0;text-decoration:none;}
.article p {font-family:'Arial';font-size:16px;line-height:24px;}
.article p a {color:#000000;}
h1 {font-family:'Arial';font-size:36px;line-height:42px;font-weight:bold;margin:15px 0;padding:0;color:#333333;}
h2 {font-family:'Arial';font-size:20px;line-height:26px;margin:15px 0;padding:0;color:#333333;}
.social {height:45px;width:100%;position:absolute;bottom:0;left:0;border:solid #dddddd;border-width:1px 0 0 0;display: flex;flex-direction:row;}
.facebook,.twitter,.staf {flex: 1 1 0px;}
.facebook a,.twitter a,.staf a { display:block;line-height:45px;text-align:center;font-size:14px;text-decoration:none;}
.facebook {border:solid #3E5E92;border-width:0 0 4px 0;}
.twitter {border:solid;border-width:0 1px 4px 1px;border-color:#dddddd #dddddd #1DADEB #dddddd;}
.staf {border:solid #333333;border-width:0 0 4px 0;}
.facebook a {color:#3E5E92;}
.twitter a {color:#1DADEB;}
.staf a {color:#333333;}
.social div:hover {background:#f9f9f9;}