JSFiddle - React, Tailwind, and code Playground

by Kye Hohenberger

HTML

<script src="https://unpkg.com/react/dist/react-with-addons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/data-driven-motion.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-router-dom.min.js"></script>
<div id="root"></div>

CSS

body {
  margin: 8px;
  font-family: -apple-system, 
               BlinkMacSystemFont, 
               "Segoe UI", 
               Roboto, 
               Oxygen,
               Ubuntu,
               Cantarell,
               "Open Sans",
               "Helvetica Neue", 
               sans-serif;
}

.address-bar {
  margin: -8px;
  padding: 10px;
  background: #ccc;
  display: flex;
  align-items: center;
}

.ab-button {
  border: none;
  background: none;
  font-size: 30px;
  color: #444;
  outline: none;
}

.ab-button:focus {
  color: hsl(200, 50%, 50%)
}

.ab-button:hover {
  color: #666;
}

.ab-button:active {
  color: #000;
}

.url {
  background: white;
  flex: 1;
  margin-left: 10px;
  padding: 10px;
  color: #aaa;
}

Babel + JSX

const { createElement: h, Component, render } = React
const { Motion } = DDM // https://github.com/tkh44/data-driven-motion

const {
  HashRouter: Router,
  Switch,
  Route,
  Link,
  matchPath,
  withRouter
} = ReactRouterDOM

const WOBBLY_SPRING = { stiffness: 200, damping: 15, precision: 0.1 }

const App = () => (
  <Router>
    <div>
      <AddressBar/>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/about'>About</Link></li>
        <li><Link to='/topics'>Topics</Link></li>
      </ul>

      <hr />
      <AnimatedSwitch style={{ position: 'relative' }}>
        <AnimatedRoute exact path='/' component={Home} />
        <AnimatedRoute path='/about' component={About} />
        <AnimatedRoute path='/topics' component={Topics} />
      </AnimatedSwitch>
    </div>
  </Router>
)

const AnimatedRoute = ({ component: Component, style, getKey, ...rest }) => (
  <Route
    {...rest}
    render={props => (
      <Component
        {...props}
        style={{ position: 'absolute', pointerEvents: 'none', left: 0, top: 0, ...props.style, ...style }}
      />
    )}
  />
)

const Home = ({ style }) => (
  <div style={style}>
    <h2>Home</h2>
    <p>
      All of these examples can be copy pasted into an app created with create-react-app. Just paste the code into
      src/App.js of your project.
    </p>
  </div>
)

const About = ({ style }) => (
  <div style={style}>
    <h2>About</h2>
    <p>
      Components are the heart of React's powerful, declarative programming model. React Router is a collection of
      navigational components that compose naturally with your application. Whether you want to have bookmarkable URLs
      for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering.
    </p>
  </div>
)

const Topics = ({ match, style }) => (
  <div style={{ ...style, height: '100%' }}>
    <h2>Topics</h2>
    <ul style={{ padding: 0, listStyle: 'none' }}>
      <li><Link...