JSFiddle - React, Tailwind, and code Playground

by amkrtchyan

HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
    <div class="wrapper">
    <article class="threeCol">
      <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">
      <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 last">
      <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>

</body>
</html>

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;
}

.threeCol h4{
    margin: 0;
    padding: 0;
}


.threeCol p {
    margin: 0 0 5px 0;
    padding: 0;
    font-size: 12px;
}

/*footer*/

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

}


.clear {
    clear: both;
}