JSFiddle - React, Tailwind, and code Playground

by _jro

HTML

<div class="w">
    <div class="applebox">
        <div class="col">
            <p>Some first column content.</p>
        </div>
        
        <div class="col">
            <p>and here too!</p>
        </div>
        
        <div class="col">
            <p>Oh wow, just so much Apple...</p>
        </div>
    </div>
</div>

CSS

.w { width: 620px; padding: 12px 7px; }
.applebox {
width: auto;
height: 85px;
box-sizing: border-box;
background: #f5f5f5;
padding: 20px 20px 10px;
margin: 10px 0 20px;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
}

.applebox .col {
width: 140px; 
float: left;
margin: 0 0 0 30px;
}
.applebox .col p {
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
color: #343434;
}