JSFiddle - React, Tailwind, and code Playground

by amkrtchyan

HTML

<section id="otherArticles">
    <div class="wrapper">
    <article class="threeCol paddingR">
      <header><h4 class="noSpaces">Lorem ipsum dolor sit amet</h4></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article>

      <article class="threeCol paddingR">
      <header><h4 class="noSpaces">Lorem ipsum dolor sit amet</h4></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna1leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article> 

        <article class="threeCol noPadding">
      <header><h4 class="noSpaces">Lorem ipsum dolor sit amet</h4></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article>
    </div
></section>

<div class="clear"></div>

<footer id="footer">
<div class="wrapper">
    <p> Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscin </p>
    </div>
</footer>

CSS

body {
    font-family: "Century Gothic", "Arial" , "Verdana";
}

.wrapper {
    width:850px;
    margin: 0 auto;
}

h4 {
    color: #db870a;
    font-size:16px;
}

.threeCol {
    display:block;
    float:left;
    width:260px;
    padding:30px 0px;
    text-align:justify;
    margin : 0 20px 0 0;
}

/*Alterations*/
.noSpaces {
    margin:0px;
    padding:0px;
}

.float {
    float:left;
}

.alignR {
    text-align:right;
}

.paddingR {
    padding:10px 0px 10px 0px;
}

.paddingL {
    padding:10px 0px 10px 30px;
}

.noPadding {
    padding: 10px 0px 10px 0px;
}


/*footer*/

#footer {
    display:inline-block;
    background-color:#F60;
    text-align: center;

}


/*Other Articles*/

#otherArticles {
    font-size:12px;
}

.clear {
    clear: both;
}