JSFiddle - React, Tailwind, and code Playground

by Sillvva

HTML

<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.3.2/styled-components.min.js"></script>
<div id="container"></div>

CSS

body {
  margin: 60px 0 0;
  font-family: sans-serif;
}

main {
    background: grey; 
    height: 800px;
    padding: 15px;
}

.navbar {
  background-color: rgb(219, 112, 147);
  color: white;
  padding: 0 15px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.navbar nav a {
  padding: 0 15px;
}

.navbar a {
  text-decoration: none;
  color: white;
}

Babel + JSX

const breakpoints = {
    sm: "576px",
    md: "768px",
    lg: "992px",
    xl: "1199px"
};

const px = n => (typeof n === "number" ? n + "px" : n && n.length > 0 ? n : null);

const fr = n => (typeof n === "number" ? `repeat(${n}, 1fr)` : n);

const breakpointWrapper = (name, value, func) => {
    if (!value) return null;
    let output = "";
    if (value.xs || value.sm || value.md || value.lg || value.xl) {
        if (value.xs && !(func && !func.call(null, value.xs))) output += `${name}: ${func ? func.call(null, value.xs) : value.xs};`;
        output += Object.keys(breakpoints)
            .map(
                bp =>
                    value[bp] &&
                    !(func && !func.call(null, value[bp])) &&
                    `@media (min-width: ${breakpoints[bp]}) {
                        ${name}: ${func ? func.call(null, value[bp]) : value[bp]};
                    }`
            )
            .join("\n");
    }
    else {
        if (func && !func.call(null, value)) return null;
        output += `${name}: ${func ? func.call(null, value) : value};`;
    }
    return output;
};

const flexBuilder = (flex) => {
    if (flex) {
        if (typeof flex === 'string' || typeof flex === 'number') {
            return `${flex};`;
        }
        else {
            if (flex.min) {
                return `${flex.grow} 0 ${px(flex.min)};`;
            }
            else if (flex.max) {
                return `0 ${flex.shrink} ${px(flex.max)};`;
            }
            else {
                return `0 0 ${px(flex.exact)};`;
            }
        }
    }
    return null;
}
const ptFlexDir = PropTypes.oneOf(["row", "row-reverse", "column", "column-reverse"]);
const ptFlexWrap = PropTypes.oneOf(["nowrap", "wrap", "wrap-reverse"]);
const ptAlign = PropTypes.oneOf(["stretch", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "inherit", "initial", "unset"]);
const ptJustify = PropTypes.oneOf(["flex-start", "flex-end", "center",...