JSFiddle - React, Tailwind, and code Playground
HTML
<div class="row">
<div class="large-6 columns">
The custom CSS is at the bottom of the CSS window.
</div>
<div class="large-6 columns">
Edit it to see that the paddings chkjkjkjkjange!
</div>
</div>
CSS
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
html,
body {
font-size: 16px; }
body {
background: white;
color: #222222;
padding: 0;
margin: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative;
-webkit-font-smoothing: antialiased; }
img,
object,
embed {
max-width: 100%;
height: auto; }
object,
embed {
height: 100%; }
img {
-ms-interpolation-mode: bicubic; }
#map_canvas img,
#map_canvas embed,
#map_canvas object,
.map_canvas img,
.map_canvas embed,
.map_canvas object {
max-width: none !important; }
.left {
float: left; }
.right {
float: right; }
.text-left {
text-align: left; }
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-justify {
text-align: justify; }
.hide {
display: none; }
img {
display: block; }
textarea {
height: auto;
min-height: 50px; }
select {
width: 100%; }
/* Grid HTML Classes */
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5em;
*zoom: 1; }
.row:before, .row:after {
content: " ";
display: table; }
.row:after {
clear: both; }
.row .column,
.row .columns {
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
width: 100%; }
.row.collapse .column,
.row.collapse .columns {
position: relative;
padding-left: 0;
padding-right: 0; }
.row .row {
width: auto;
margin-left: -0.9375em;
margin-right: -0.9375em;
margin-top: 0;
margin-bottom: 0;
max-width: none;
*zoom: 1; }
.row .row:before, .row .row:after {
content: " ";
display: table; }
.row .row:after {
clear: both; }
.row .row.collapse {
width: auto;
margin: 0;
max-width: none;
*zoom: 1; }
.row...