JSFiddle - React, Tailwind, and code Playground
HTML
<div id="boxes" class="container">
<div class="box" id="box1">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac viverra orci. Etiam volutpat lectus vitae tellus blandit volutpat. Maecenas ante quam, scelerisque et tempor ac, varius id eros. Integer hendrerit pretium feugiat. </p>
<a href="#" class="c2action">link</a>
</div><!--box1-->
<div class="box" id="box2">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac viverra orci. Etiam volutpat lectus vitae tellus blandit volutpat. Maecenas ante quam, scelerisque et tempor ac, varius id eros. Integer hendrerit pretium feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<a href="#" class="c2action">link</a>
</div><!--box2-->
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {background: #FFFFFF; font-family: Arial, verdana, sans-serif;}
.container {margin: 0 auto; width: 940px;}
.box {
position:relative;
width:296px;
height:270px;
float:left;
background-color:#ebe1bf;
margin-top: 20px;
border-style: solid;
border-width: 2px;
border-color: #e0d6b2;
}
.box h2 {
font-size: 16px;
margin-top: 18px;
margin-left: 24px;
color: #353535;
}
.box p {
margin-top: 10px;
margin-left: 24px;
width: 252px;
font-size:13px;
color:#525151;
}
a.c2action {
text-align:right;
position:absolute;
bottom:10px;
right:20px;
font-size: 14px;
color:#FF0000;
}
#box1 {
margin-right: 20px;
}
#box2 {
margin-right: 20px;
}